import Link from "next/link";
import { ArrowUpRight, ExternalLink } from "@/components/ui/icons";
import { Reveal } from "@/components/ui/reveal";
import {
  LIGHTHOUSE_LABELS,
  TYPE_ICONS,
  TYPE_LABELS,
  type LighthouseScores,
  type Realisation,
} from "@/lib/realisations";
import { RealisationMockup } from "./realisation-mockup";

export function RealisationCard({ r, delay = 0 }: { r: Realisation; delay?: number }) {
  const TypeIcon = TYPE_ICONS[r.type];
  return (
    <Reveal delay={delay}>
      <article
        className="group panel p-6 md:p-7 hover:border-accent/30 hover:shadow-lg hover:-translate-y-1 hover:rotate-[0.3deg] motion-reduce:hover:rotate-0 motion-reduce:hover:-translate-y-0 transition-[transform,box-shadow,border-color] duration-[400ms]"
        style={{ transitionTimingFunction: "cubic-bezier(0.2, 0.8, 0.2, 1)" }}
      >
        <Link href={`/realisations/${r.slug}`} className="block">
          <div className="transition-transform duration-500 group-hover:-translate-y-1">
            <RealisationMockup r={r} />
          </div>
        </Link>

        <div className="mt-6">
          <div className="flex items-center justify-between text-xxs uppercase tracking-wider text-text-faint">
            <span className="inline-flex items-center gap-1.5">
              <TypeIcon className="size-3" />
              {TYPE_LABELS[r.type]}
            </span>
            <span className="tabular-nums">{r.year}</span>
          </div>

          <h3 className="mt-3 font-editorial text-2xl md:text-3xl font-medium text-text leading-tight">
            <Link
              href={`/realisations/${r.slug}`}
              className="hover:text-accent-hi transition-colors"
            >
              {r.name}
            </Link>
          </h3>
          <p className="mt-1 text-xs text-text-muted">
            {r.sector} · {r.context}
          </p>
          <p className="mt-4 text-sm text-text-muted leading-relaxed">{r.summary}</p>

          {r.pagespeed?.mobile && (
            <PageSpeedRow scores={r.pagespeed.mobile} />
          )}

          <div className="mt-6 flex items-center justify-between gap-4">
            <Link
              href={`/realisations/${r.slug}`}
              className="group/cta inline-flex items-center gap-1.5 text-sm font-medium text-text hover:text-accent transition-colors"
            >
              Voir le projet
              <ArrowUpRight className="size-3.5 transition-transform group-hover/cta:translate-x-0.5 group-hover/cta:-translate-y-0.5" />
            </Link>
            <a
              href={r.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group/ext inline-flex items-center gap-1 text-xs text-text-faint hover:text-text-muted transition-colors truncate"
            >
              <span className="truncate">{r.domain}</span>
              <ExternalLink className="size-3 shrink-0" />
            </a>
          </div>
        </div>
      </article>
    </Reveal>
  );
}

function PageSpeedRow({ scores }: { scores: LighthouseScores }) {
  return (
    <div className="mt-5 pt-5 border-t border-border/60">
      <div className="flex items-center justify-between mb-3">
        <span className="text-micro uppercase tracking-[0.18em] text-text-faint">
          PageSpeed · Mobile
        </span>
      </div>
      <div className="grid grid-cols-4 gap-2">
        {LIGHTHOUSE_LABELS.map(({ key, label }) => (
          <MiniGauge key={key} score={scores[key]} label={label} />
        ))}
      </div>
    </div>
  );
}

function MiniGauge({ score, label }: { score: number; label: string }) {
  const stroke =
    score >= 90 ? "#22c55e" : score >= 50 ? "#f97316" : "#ef4444";
  const r = 16;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - score / 100);
  return (
    <div className="flex flex-col items-center">
      <div className="relative size-11">
        <svg viewBox="0 0 40 40" className="size-full -rotate-90">
          <circle
            cx="20"
            cy="20"
            r={r}
            fill="none"
            stroke={stroke}
            strokeOpacity="0.15"
            strokeWidth="3"
          />
          <circle
            cx="20"
            cy="20"
            r={r}
            fill="none"
            stroke={stroke}
            strokeWidth="3"
            strokeLinecap="round"
            strokeDasharray={c}
            strokeDashoffset={offset}
          />
        </svg>
        <div className="absolute inset-0 flex items-center justify-center">
          <span
            className="font-editorial text-xs font-medium tabular-nums"
            style={{ color: stroke }}
          >
            {score}
          </span>
        </div>
      </div>
      <span className="mt-1.5 text-[9px] text-text-faint text-center leading-tight">
        {label}
      </span>
    </div>
  );
}