import Link from 'next/link';
import type { ComponentScores, LawyerCard, RankedLawyer } from '@justice-choice/types';
import { paths } from '@justice-choice/seo-engine';
import { Monogram, Stars, VerificationBadge } from './Badges';
import { ScoreLedger } from './ScoreLedger';
import { ArrowRightIcon, BuildingIcon, ClockIcon, LanguagesIcon, MapPinIcon } from './Icons';

function Meta({ l, highlight }: { l: LawyerCard; highlight?: string }) {
  const areas = l.practiceAreas.slice(0, 3);
  const more = l.practiceAreas.length - areas.length;
  return (
    <>
      <div className="mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-ink-2">
        {l.firm && (
          <span className="inline-flex min-w-0 items-center gap-1.5">
            <BuildingIcon className="h-3.5 w-3.5 text-muted" />
            <span className="truncate">{l.firm.name}</span>
          </span>
        )}
        {l.yearsExperience != null && (
          <span className="num inline-flex items-center gap-1.5">
            <ClockIcon className="h-3.5 w-3.5 text-muted" />
            {l.yearsExperience} yrs in practice
          </span>
        )}
        {l.reviewCount > 0 && l.averageRating != null && (
          <span className="inline-flex items-center gap-1">
            <Stars value={l.averageRating} />
            <span className="num text-muted">({l.reviewCount})</span>
          </span>
        )}
      </div>
      {areas.length > 0 && (
        <div className="mt-2.5 flex flex-wrap gap-1.5">
          {areas.map((a) => (
            <span key={a.slug} className={`rounded-md px-2 py-0.5 text-xs leading-5 ${a.slug === highlight ? 'bg-ledger-soft font-semibold text-ledger' : 'bg-sunken text-ink-2'}`}>
              {a.name}
            </span>
          ))}
          {more > 0 && <span className="rounded-md px-1.5 py-0.5 text-xs leading-5 text-muted">+{more} more</span>}
        </div>
      )}
    </>
  );
}

/** One row of an organic ranking — rank figure, identity, verification and the score ledger */
export function RankedRow({ l, weights, practiceSlug }: { l: RankedLawyer; weights: ComponentScores | null; practiceSlug: string }) {
  const podium = l.rank <= 3;
  return (
    <li className="group relative grid grid-cols-[3rem_1fr] gap-x-4 border-b border-rule py-6 transition-colors last:border-b-0 sm:grid-cols-[4rem_1fr_16rem] sm:gap-x-6 sm:rounded-xl sm:border-b-0 sm:px-4 sm:hover:bg-surface sm:hover:shadow-sm">
      <div className="pt-0.5">
        <div className={`rank-figure text-4xl sm:text-5xl ${podium ? '' : 'opacity-80'}`} aria-label={`Rank ${l.rank}`}>
          {l.rank}
        </div>
        {podium && <span className="mt-2 hidden h-1 w-8 rounded-full bg-brass/60 sm:block" aria-hidden />}
      </div>
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
          <h3 className="font-serif text-xl font-semibold leading-tight">
            <Link href={paths.lawyer(l.slug)} className="hover:text-ledger hover:underline">
              {l.name}
            </Link>
          </h3>
          <VerificationBadge status={l.verificationStatus} compact />
        </div>
        {l.title && <p className="mt-0.5 text-sm text-muted">{l.title}</p>}
        <Meta l={l} highlight={practiceSlug} />
        {l.languages.length > 1 && (
          <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-muted">
            <LanguagesIcon className="h-3.5 w-3.5" />
            Speaks {l.languages.join(', ')}
          </p>
        )}
      </div>
      <div className="col-span-2 mt-4 sm:col-span-1 sm:mt-1">
        <ScoreLedger components={l.components} weights={weights} total={l.score} label={`${l.name}'s score`} />
        <Link href={`${paths.lawyer(l.slug)}#score`} className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-muted hover:text-ledger">
          See the evidence behind this score
          <ArrowRightIcon className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
        </Link>
      </div>
    </li>
  );
}

export function LawyerListItem({ l }: { l: LawyerCard }) {
  return (
    <li className="group relative -mx-3 flex gap-4 rounded-xl border-b border-rule px-3 py-5 transition-colors last:border-b-0 hover:bg-surface hover:shadow-sm sm:-mx-4 sm:px-4">
      <Monogram name={l.name} size={48} />
      <div className="min-w-0 flex-1">
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
          <Link href={paths.lawyer(l.slug)} className="font-serif text-lg font-semibold leading-snug after:absolute after:inset-0 after:content-[''] hover:text-ledger">
            {l.name}
          </Link>
          <VerificationBadge status={l.verificationStatus} compact />
        </div>
        {l.title && <p className="text-sm text-muted">{l.title}</p>}
        <Meta l={l} />
        {l.city && (
          <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-muted">
            <MapPinIcon className="h-3.5 w-3.5" />
            {l.city.name}
          </p>
        )}
      </div>
      <ArrowRightIcon className="mt-1 hidden h-5 w-5 shrink-0 self-center text-muted opacity-0 transition-all group-hover:translate-x-0.5 group-hover:text-ledger group-hover:opacity-100 sm:block" />
    </li>
  );
}