import Link from "next/link";
import { notFound } from "next/navigation";
import Shell from "@/components/Shell";
import { requireSession, asMembershipRow } from "@/lib/session";
import { can } from "@/lib/rbac";
import { getSite } from "@/lib/data/sites";
import { Badge } from "@/components/ui";

const TABS = [
  { seg: "", label: "Overview" },
  { seg: "updates", label: "Updates" },
  { seg: "backups", label: "Backups" },
  { seg: "security", label: "Security" },
  { seg: "access", label: "Access" },
  { seg: "domains", label: "Domains & SSL" },
  { seg: "settings", label: "Settings" },
];

export default async function SiteDetailLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const session = await requireSession();
  const m = asMembershipRow(session);
  const site = getSite(session.orgId, id);
  if (!site || site.disconnected_at) notFound();
  if (!can.viewSite(m, id)) notFound();

  return (
    <Shell session={session} active="/sites">
      <Link href="/sites" className="text-text-secondary text-sm font-semibold mb-4 inline-flex items-center gap-1.5">
        ← All sites
      </Link>
      <div className="flex items-center gap-3.5 flex-wrap mb-2">
        <div className="w-12 h-12 rounded-xl flex-none flex items-center justify-center font-heading font-bold text-lg text-bg bg-accent">
          {site.name.charAt(0).toUpperCase()}
        </div>
        <div>
          <div className="font-heading text-xl font-bold">{site.name}</div>
          <div className="font-mono text-[12.5px] text-text-secondary">{site.url}</div>
        </div>
        <Badge status={site.status} />
      </div>

      <div className="flex gap-0.5 border-b border-border my-5 overflow-x-auto">
        {TABS.map((tab) => (
          <Link
            key={tab.seg}
            href={`/sites/${id}${tab.seg ? `/${tab.seg}` : ""}`}
            className="px-3.5 py-2.5 text-[13px] font-semibold text-text-secondary hover:text-text-primary whitespace-nowrap"
          >
            {tab.label}
          </Link>
        ))}
      </div>

      {children}
    </Shell>
  );
}