import Link from "next/link";
import type { ProductArea } from "@/lib/platform";

type ProductOverviewMetric = {
  label: string;
  value: string | number;
};

const statusStyles: Record<ProductArea["status"], string> = {
  ready_for_migration: "border-primary/40 bg-primary/10 text-primary",
  active_foundation: "border-sky-500/30 bg-sky-500/10 text-sky-200",
  planned: "border-amber-500/30 bg-amber-500/10 text-amber-200",
};

const statusLabels: Record<ProductArea["status"], string> = {
  ready_for_migration: "Ready for migration",
  active_foundation: "Foundation in progress",
  planned: "Planned",
};

export function ProductOverviewCard({
  area,
  metrics = [],
}: {
  area: ProductArea;
  metrics?: readonly ProductOverviewMetric[];
}) {
  return (
    <article className="flex h-full flex-col justify-between rounded-3xl border border-border/70 bg-card/90 p-6 shadow-[0_20px_80px_-32px_rgba(0,0,0,0.6)]">
      <div className="space-y-4">
        <div className="flex items-start justify-between gap-4">
          <div>
            <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">{area.surface}</p>
            <h2 className="mt-2 text-2xl font-semibold text-card-foreground">{area.title}</h2>
          </div>
          <span className={`rounded-full border px-3 py-1 text-xs ${statusStyles[area.status]}`}>
            {statusLabels[area.status]}
          </span>
        </div>
        <p className="text-sm leading-6 text-muted-foreground">{area.summary}</p>
        <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
          {area.ownership === "internal" ? "Internal module" : "External module"}:
          <span className="ml-1 text-foreground">{area.sourceOfTruth}</span>
        </p>
        {metrics.length > 0 ? (
          <div className="grid gap-2 sm:grid-cols-2">
            {metrics.map((metric) => (
              <div key={metric.label} className="rounded-2xl border border-border/60 bg-background/40 px-3 py-3">
                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{metric.label}</p>
                <p className="mt-2 text-lg font-semibold text-foreground">{metric.value}</p>
              </div>
            ))}
          </div>
        ) : null}
        <ul className="space-y-2 text-sm text-foreground/90">
          {area.capabilities.map((capability) => (
            <li key={capability} className="rounded-2xl border border-border/60 bg-background/40 px-3 py-2">
              {capability}
            </li>
          ))}
        </ul>
      </div>
      <div className="mt-6">
        <Link
          href={area.href}
          className="inline-flex rounded-full border border-primary/40 px-4 py-2 text-sm text-primary transition hover:bg-primary hover:text-primary-foreground"
        >
          Open {area.title}
        </Link>
      </div>
    </article>
  );
}