import Link from "next/link";
import type { AppSession } from "@/lib/session";
import { getOrgUsage } from "@/lib/data/org";
import { Avatar } from "./ui";
import SignOutButton from "./SignOutButton";
import NewSiteButton from "./NewSiteButton";

const NAV: { href: string; label: string; ownerOnly?: boolean }[] = [
  { href: "/customers", label: "Customers" },
  { href: "/sites", label: "Sites" },
  { href: "/security", label: "Security" },
  { href: "/domains", label: "Domains" },
  { href: "/deployments", label: "Deployments" },
  { href: "/billing", label: "Billing", ownerOnly: true },
  { href: "/team", label: "Team" },
  { href: "/settings", label: "Settings" },
];

export default function Shell({
  session,
  active,
  children,
}: {
  session: AppSession;
  active: string;
  children: React.ReactNode;
}) {
  const { org, sitesUsed } = getOrgUsage(session.orgId);
  const pct = Math.min(100, Math.round((sitesUsed / Math.max(org.site_limit, 1)) * 100));

  return (
    <div className="min-h-screen flex">
      <aside className="w-[228px] flex-none flex flex-col bg-bg-sidebar border-r border-border p-3 gap-0.5 sticky top-0 h-screen">
        <div className="flex items-center gap-2.5 px-2 pb-5 pt-2">
          <div className="w-7 h-7 rounded-lg flex-none bg-gradient-to-br from-accent to-accent-2" />
          <span className="font-heading font-bold text-base tracking-tight">Webstation</span>
        </div>
        <nav className="flex flex-col gap-0.5">
          {NAV.filter((n) => !n.ownerOnly || session.role === "OWNER").map((item) => {
            const isActive = active === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`px-3 py-2 rounded-lg text-sm font-semibold ${
                  isActive ? "bg-accent/15 text-white" : "text-text-secondary hover:text-text-primary"
                }`}
              >
                {item.label}
              </Link>
            );
          })}
        </nav>
        <div className="flex-1" />
        <div className="bg-[#161920] border border-border-input rounded-xl p-3 flex flex-col gap-2">
          <div className="text-xs font-bold">{org.plan_name} plan</div>
          <div className="text-[11px] text-text-secondary">
            {sitesUsed} of {org.site_limit} sites used
          </div>
          <div className="h-1.5 bg-border-input rounded-full overflow-hidden">
            <div className="h-full bg-accent" style={{ width: `${pct}%` }} />
          </div>
        </div>
      </aside>

      <div className="flex-1 min-w-0 flex flex-col h-screen overflow-hidden">
        <header className="flex-none flex items-center gap-3 px-5 py-3.5 border-b border-border bg-bg">
          <div className="flex-1 max-w-[340px] relative hidden md:flex items-center">
            <span className="absolute left-3 text-text-tertiary text-sm">⌕</span>
            <input
              placeholder="Search sites..."
              className="w-full bg-bg-card border border-border-input rounded-lg py-2 pl-8 pr-3 text-sm outline-none"
              disabled
            />
          </div>
          <div className="flex-1" />
          {(session.role === "OWNER" || session.role === "ADMIN") && <NewSiteButton />}
          <div className="flex items-center gap-2">
            <span className="text-xs text-text-secondary hidden sm:inline">{session.name}</span>
            <Avatar name={session.name} size={34} />
            <SignOutButton />
          </div>
        </header>
        <main className="flex-1 overflow-y-auto px-5 py-6 pb-16">{children}</main>
      </div>
    </div>
  );
}