import Link from "next/link";

type AdminProductPageProps = {
  eyebrow: string;
  title: string;
  summary: string;
  sourceOfTruth: string;
  ownership?: "internal" | "external";
  routes: string[];
  responsibilities: string[];
  nextSteps: string[];
};

export function AdminProductPage({
  eyebrow,
  title,
  summary,
  sourceOfTruth,
  ownership = "internal",
  routes,
  responsibilities,
  nextSteps,
}: AdminProductPageProps) {
  return (
    <div className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
      <section className="rounded-3xl border border-border/70 bg-card/90 p-6">
        <p className="text-xs uppercase tracking-[0.24em] text-primary">{eyebrow}</p>
        <h2 className="mt-3 text-2xl font-semibold">{title}</h2>
        <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground">{summary}</p>

        <div className="mt-6 grid gap-6 md:grid-cols-2">
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">Responsibilities</h3>
            <ul className="mt-3 space-y-2 text-sm">
              {responsibilities.map((item) => (
                <li key={item} className="rounded-2xl border border-border/70 bg-background/40 px-3 py-2">
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">Routes in Ballbox</h3>
            <ul className="mt-3 space-y-2 font-mono text-sm">
              {routes.map((route) => (
                <li key={route} className="rounded-2xl border border-border/70 bg-background/40 px-3 py-2">
                  {route}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <aside className="space-y-6">
        <section className="rounded-3xl border border-border/70 bg-card/90 p-6">
          <h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">Source of truth</h3>
          <p className="mt-3 text-lg font-medium">{sourceOfTruth}</p>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">
            {ownership === "internal"
              ? "Ballbox aloja UX, backend y contratos de este modulo dentro del mismo repo/app."
              : "Ballbox aloja la UX y el BFF. El runtime especializado sigue fuera hasta consolidar escala y contratos."}
          </p>
        </section>

        <section className="rounded-3xl border border-border/70 bg-card/90 p-6">
          <h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">Next steps</h3>
          <ul className="mt-3 space-y-2 text-sm">
            {nextSteps.map((item) => (
              <li key={item} className="rounded-2xl border border-border/70 bg-background/40 px-3 py-2">
                {item}
              </li>
            ))}
          </ul>
        </section>

        <Link
          href="/admin"
          className="inline-flex rounded-full border border-border px-4 py-2 text-sm text-muted-foreground transition hover:border-primary/50 hover:text-foreground"
        >
          Back to admin overview
        </Link>
      </aside>
    </div>
  );
}