import { ArrowUpRight, ExternalLink, GitCompareArrows } from 'lucide-react';
import Link from 'next/link';
import { Chip, CompanyTierBadge, CountryChip, StatusBadge } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { countryName } from '@/lib/countries';
import { fmtInt, fmtPct, plural } from '@/lib/format';
import { descriptionOf, logoCandidates, socialsOf } from '@/lib/profile';
import { routes } from '@/lib/site';
import type { CompanyDetail } from '@/lib/types';
import { CompanyLogo } from './company-logo';
import { DescriptionAttribution } from './profile-panels';
import { WatchButton } from './watch-button';

/**
 * Company identity block: logo (profile logo → icon → monogram), name + legal name + legal form, domain / listing chips,
 * HQ, founded, employees (sourced count when known, else the stated band), industries, attributed description, socials,
 * watch + compare. Everything shown comes from the card or its enrichment profile — nothing is inferred here.
 */
export function CompanyHeader({ c }: { c: CompanyDetail }) {
  const p = c.profile ?? null;
  const desc = descriptionOf(c);
  const socials = socialsOf(p);
  const founded = p?.founded_year ?? c.founded_year;
  const hqCity = p?.hq?.city ?? c.hq_city;
  const hqRegion = p?.hq?.region ?? c.hq_region;
  const ticker = p?.ticker ?? c.ticker;
  const exchange = p?.exchange ?? c.exchange;
  const isPublic = p?.public_company || c.public_company;
  const legalLine = [c.legal_name && c.legal_name !== c.display_name ? c.legal_name : null, p?.legal_form].filter(Boolean).join(' · ');
  return (
    <div className="pb-4 pt-5 md:pt-8" data-company-header>
      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
        <div className="flex min-w-0 gap-3 md:gap-4">
          <CompanyLogo name={c.display_name} candidates={logoCandidates(c)} size={64} priority rounded="lg" className="mt-1 md:mt-1.5" />
          <div className="min-w-0 flex-1">
            <div className="eyebrow flex flex-wrap items-center gap-2">
              <span>Company</span>
              <CompanyTierBadge tier={c.tier} />
              {c.status !== 'ACTIVE' && <StatusBadge status={c.status} />}
            </div>
            <h1 className="display mt-1.5 text-[28px] md:text-[40px]">{c.display_name}</h1>
            {legalLine && <p className="mt-1 text-[13px] text-ink-3">{legalLine}</p>}
            <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1.5 text-sm text-ink-2">
              <a href={p?.official_website ?? c.website} target="_blank" rel="noopener noreferrer" className="mono inline-flex h-6 items-center gap-1 rounded-[3px] border border-rule px-1.5 text-xs text-ink-2 hover:border-rule-strong hover:text-accent">
                {c.canonical_domain} <ExternalLink className="size-3" aria-hidden />
              </a>
              {isPublic && ticker && (
                <Chip tone="outline" className="mono h-6 font-normal text-ink-2" title="Listed company — ticker and exchange as recorded">
                  {ticker}
                  {exchange ? <span className="text-ink-3">· {exchange}</span> : null}
                </Chip>
              )}
              <span className="inline-flex items-center gap-1.5">
                <CountryChip code={c.country} name={countryName(c.country)} />
                {hqCity && (
                  <span>
                    {hqCity}
                    {hqRegion ? `, ${hqRegion}` : ''}
                  </span>
                )}
              </span>
              {founded && <span className="tnum">est. {founded}</span>}
              {typeof p?.employees === 'number' ? (
                <span className="tnum">
                  {fmtInt(p.employees)} employees{p.employees_year ? ` (${p.employees_year})` : ''}
                </span>
              ) : (
                c.employees_band && <span className="tnum">{c.employees_band} employees (stated)</span>
              )}
            </div>
            <div className="mt-2 flex flex-wrap gap-1.5">
              {c.industries.map((i) => (
                <Link key={i} href={routes.industry(i)}>
                  <Chip tone="neutral" className="hover:bg-surface-3">
                    {i.replace(/-/g, ' ')}
                  </Chip>
                </Link>
              ))}
            </div>
            {desc && (
              <div className="mt-3 max-w-2xl">
                <p className="text-[15px] leading-relaxed text-ink-2">{desc.text}</p>
                <DescriptionAttribution c={c} className="mt-1" />
              </div>
            )}
            {socials.length > 0 && (
              <ul className="mt-3 flex flex-wrap gap-1.5" aria-label="Official social profiles" data-socials>
                {socials.map((s) => (
                  <li key={s.key}>
                    <a href={s.url} target="_blank" rel="noopener nofollow noreferrer" className="inline-flex h-7 items-center gap-1 rounded-[3px] border border-rule px-2 text-[12px] text-ink-2 hover:border-rule-strong hover:text-ink" title={s.url}>
                      {s.label} <ArrowUpRight className="size-3 text-ink-3" aria-hidden />
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
        <div className="flex shrink-0 flex-wrap items-center gap-2 md:flex-col md:items-end">
          <div className="flex gap-2">
            <WatchButton slug={c.slug} name={c.display_name} />
            <Link href={routes.compare([c.slug])} className="btn">
              <GitCompareArrows className="size-4" aria-hidden /> Compare
            </Link>
          </div>
          <p className="text-xs text-ink-3">
            last observed <LiveAgo at={c.last_observed_at} tick={30000} />
          </p>
        </div>
      </div>
    </div>
  );
}

/** "32 active sensors · 18,420 observations · 786 historical changes · 249 structured events · historical coverage 94 %" */
export function DensityStrip({ c }: { c: CompanyDetail }) {
  const parts: string[] = [
    `${fmtInt(c.counts.sensors)} active ${plural(c.counts.sensors, 'sensor')}`,
    `${fmtInt(c.counts.observations)} ${plural(c.counts.observations, 'observation')}`,
    `${fmtInt(c.counts.changes)} historical ${plural(c.counts.changes, 'change')}`,
    `${fmtInt(c.counts.events)} structured ${plural(c.counts.events, 'event')}`,
  ];
  if (c.coverage?.historical_coverage !== null && c.coverage?.historical_coverage !== undefined) parts.push(`historical coverage ${fmtPct(c.coverage.historical_coverage, 0)}`);
  if (c.coverage?.first_observed_at) parts.push(`observed since ${new Date(c.coverage.first_observed_at).toISOString().slice(0, 10)}`);
  return (
    <p className="tnum border-y border-rule py-2 text-xs text-ink-2" data-density-strip>
      {parts.map((p, i) => (
        <span key={p}>
          {i > 0 && <span className="mx-1.5 text-ink-3">·</span>}
          {p}
        </span>
      ))}
    </p>
  );
}