import Link from 'next/link';
import { Sparkline } from '@/components/charts/sparkline';
import { CompanyTierBadge, CountryChip } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { cn } from '@/lib/cn';
import { fmtInt, fmtPctSigned, fmtScore, num } from '@/lib/format';
import { descriptionOf, logoCandidates } from '@/lib/profile';
import { routes } from '@/lib/site';
import type { CompanyCard } from '@/lib/types';
import { CompanyLogo } from './company-logo';

/**
 * Directory rows: dense table on ≥ md (logo · name + domain + one-line description · country · industry · activity ·
 * hiring 30d · AI · events · sensors · sparkline · last event) and stacked cards below. Missing metrics render as a dash,
 * never 0. Logos are lazy with a monogram fallback; the description is the attributed profile paragraph when present.
 */
export function CompanyTable({ items, className, rank = false, showSparkline = true, showDescription = true, valueLabel, formatValue, formatDelta }: { items: (CompanyCard & { rank?: number; value?: number; delta?: number | null })[]; className?: string; rank?: boolean; showSparkline?: boolean; showDescription?: boolean; valueLabel?: string; formatValue?: (c: CompanyCard & { value?: number }) => string; formatDelta?: (c: CompanyCard & { delta?: number | null }) => string | null }) {
  if (!items.length) return <p className="border border-dashed border-rule-strong px-4 py-8 text-center text-sm text-ink-3">No companies match these filters yet.</p>;
  return (
    <div className={className} data-company-table>
      {/* desktop */}
      <div className="table-scroll hidden md:block">
        <table className="data-table">
          <thead>
            <tr>
              {rank && <th className="num">#</th>}
              <th>Company</th>
              <th>Country</th>
              <th>Industry</th>
              {valueLabel && <th className="num">{valueLabel}</th>}
              {valueLabel && formatDelta && <th className="num">Δ</th>}
              <th className="num">Activity</th>
              <th className="num">Hiring 30d</th>
              <th className="num">AI</th>
              <th className="num">Events</th>
              <th className="num">Sensors</th>
              {showSparkline && <th>30 d</th>}
              <th className="num">Last event</th>
            </tr>
          </thead>
          <tbody>
            {items.map((c) => {
              const h = num(c.metrics.hiring_momentum_30d);
              const d = formatDelta?.(c) ?? null;
              const desc = showDescription ? descriptionOf(c)?.text : null;
              return (
                <tr key={c.id}>
                  {rank && <td className="num tnum text-ink-3">{c.rank}</td>}
                  <td className="primary">
                    <Link href={routes.company(c.slug)} className="row-link flex items-center gap-2.5">
                      <CompanyLogo name={c.display_name} candidates={logoCandidates(c)} size={28} rounded="sm" />
                      <span className="min-w-0">
                        <span className="inline-flex items-center gap-2">
                          {c.display_name}
                          <CompanyTierBadge tier={c.tier} />
                        </span>
                        <span className="flex max-w-[30rem] items-baseline gap-1.5 text-[11px] font-normal text-ink-3 lg:max-w-[38rem]">
                          <span className="mono shrink-0">{c.canonical_domain}</span>
                          {desc && (
                            <span className="truncate" title={desc}>
                              · {desc}
                            </span>
                          )}
                        </span>
                      </span>
                    </Link>
                  </td>
                  <td>
                    <CountryChip code={c.country} />
                  </td>
                  <td className="text-ink-2">{c.industry_primary ? <Link href={routes.industry(c.industry_primary)} className="hover:text-accent">{c.industry_primary.replace(/-/g, ' ')}</Link> : '—'}</td>
                  {valueLabel && <td className="num tnum font-medium">{formatValue ? formatValue(c) : fmtScore(c.value)}</td>}
                  {valueLabel && formatDelta && <td className={cn('num tnum text-xs', d?.startsWith('+') ? 'text-positive' : d?.startsWith('−') ? 'text-danger' : 'text-ink-3')}>{d ?? '—'}</td>}
                  <td className="num tnum">{fmtScore(c.metrics.activity_score)}</td>
                  <td className={cn('num tnum', h !== null && (h > 0 ? 'text-positive' : h < 0 ? 'text-danger' : ''))}>{h === null ? '—' : fmtPctSigned(h)}</td>
                  <td className="num tnum">{fmtScore(c.metrics.ai_adoption)}</td>
                  <td className="num tnum">{fmtInt(c.counts.events)}</td>
                  <td className="num tnum">{fmtInt(c.counts.sensors)}</td>
                  {showSparkline && (
                    <td>
                      <Sparkline values={c.sparkline} width={80} height={20} tone="accent" />
                    </td>
                  )}
                  <td className="num text-xs text-ink-3">
                    <LiveAgo at={c.last_event_at} tick={30000} absoluteFallback={false} />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {/* mobile cards */}
      <ul className="divide-y divide-rule border-y border-rule md:hidden">
        {items.map((c) => {
          const h = num(c.metrics.hiring_momentum_30d);
          return (
            <li key={c.id}>
              <Link href={routes.company(c.slug)} className="block py-3">
                <div className="flex items-start gap-3">
                  {rank && <span className="tnum w-6 shrink-0 pt-0.5 text-sm text-ink-3">{c.rank}</span>}
                  <CompanyLogo name={c.display_name} candidates={logoCandidates(c)} size={32} rounded="sm" className="mt-0.5" />
                  <div className="min-w-0 flex-1">
                    <p className="flex items-center gap-2 text-[15px] font-medium text-ink">
                      <span className="truncate">{c.display_name}</span>
                      <CountryChip code={c.country} link={false} />
                    </p>
                    <p className="mono truncate text-[11px] text-ink-3">
                      {c.canonical_domain}
                      {c.industry_primary ? ` · ${c.industry_primary.replace(/-/g, ' ')}` : ''}
                    </p>
                  </div>
                  {showSparkline && <Sparkline values={c.sparkline} width={64} height={22} tone="accent" />}
                </div>
                <dl className="tnum mt-2 grid grid-cols-4 gap-2 text-center text-xs">
                  {valueLabel ? (
                    <div>
                      <dt className="text-[10px] uppercase tracking-wider text-ink-3">{valueLabel}</dt>
                      <dd className="font-medium text-ink">{formatValue ? formatValue(c) : fmtScore(c.value)}</dd>
                    </div>
                  ) : (
                    <div>
                      <dt className="text-[10px] uppercase tracking-wider text-ink-3">Activity</dt>
                      <dd className="font-medium text-ink">{fmtScore(c.metrics.activity_score)}</dd>
                    </div>
                  )}
                  <div>
                    <dt className="text-[10px] uppercase tracking-wider text-ink-3">Hiring</dt>
                    <dd className={cn('font-medium', h === null ? 'text-ink-3' : h > 0 ? 'text-positive' : h < 0 ? 'text-danger' : 'text-ink')}>{h === null ? '—' : fmtPctSigned(h, 0)}</dd>
                  </div>
                  <div>
                    <dt className="text-[10px] uppercase tracking-wider text-ink-3">Events</dt>
                    <dd className="font-medium text-ink">{fmtInt(c.counts.events)}</dd>
                  </div>
                  <div>
                    <dt className="text-[10px] uppercase tracking-wider text-ink-3">Sensors</dt>
                    <dd className="font-medium text-ink">{fmtInt(c.counts.sensors)}</dd>
                  </div>
                </dl>
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/** Compact list of companies (logo · name · country · one metric) for homepage sections and side panels. */
export function CompanyMiniList({ items, metric = 'activity_score', label, format, className, sparkline = false }: { items: CompanyCard[]; metric?: keyof CompanyCard['metrics']; label?: string; format?: (v: number | null) => string; className?: string; sparkline?: boolean }) {
  if (!items.length) return <p className="border border-dashed border-rule-strong px-4 py-6 text-center text-xs text-ink-3">No monitored evidence available yet.</p>;
  const fmt = format ?? ((v: number | null) => (v === null ? '—' : metric.startsWith('hiring') ? fmtPctSigned(v) : fmtScore(v)));
  return (
    <ol className={cn('divide-y divide-rule border-y border-rule', className)}>
      {items.map((c, i) => {
        const v = num(c.metrics[metric]);
        return (
          <li key={c.id}>
            <Link href={routes.company(c.slug)} className="flex items-center gap-2.5 py-2 hover:text-accent">
              <span className="tnum w-4 shrink-0 text-xs text-ink-3">{i + 1}</span>
              <CompanyLogo name={c.display_name} candidates={logoCandidates(c)} size={24} rounded="sm" />
              <span className="min-w-0 flex-1">
                <span className="block truncate text-[14px] font-medium text-ink">{c.display_name}</span>
                <span className="mono block truncate text-[11px] text-ink-3">
                  {c.canonical_domain}
                  {c.country ? ` · ${c.country}` : ''}
                </span>
              </span>
              {sparkline && <Sparkline values={c.sparkline} width={56} height={18} tone={metric.startsWith('hiring') ? 'auto' : 'accent'} />}
              <span className="text-right">
                <span className={cn('tnum block text-[14px] font-medium', v !== null && metric.startsWith('hiring') && (v > 0 ? 'text-positive' : v < 0 ? 'text-danger' : ''))}>{fmt(v)}</span>
                {label && <span className="block text-[10px] uppercase tracking-wider text-ink-3">{label}</span>}
              </span>
            </Link>
          </li>
        );
      })}
    </ol>
  );
}