import type { Metadata } from "next";
import Link from "next/link";
import { Globe } from "lucide-react";
import { openProjectAction, signOutAction } from "@/components/shell/actions";
import { Badge, Button, Card, EmptyState, Pagination, StatCard, StatusBadge } from "@/components/ui";
import { buttonClass } from "@/components/ui";
import { availableDashboards, can, dashboardPath } from "@/lib/authz/context";
import { requireUser } from "@/lib/authz/guard";
import { buildHref, parseListParams } from "@/lib/list-params";
import { listScopedSites } from "@/lib/services/workspace";

export const metadata: Metadata = { title: "My projects" };
export const dynamic = "force-dynamic";
const PATH = "/dashboard/projects";

/** Landing page for organization admins and maintenance users: their websites, one click to open each. */
export default async function ProjectsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const ctx = await requireUser();
  const { page } = parseListParams(await searchParams, ["_"] as const);
  const { rows, total } = await listScopedSites(ctx, "sites.read", page);
  const dashboards = availableDashboards(ctx);
  const isMaintenanceOnly = !ctx.isSuperAdmin && !ctx.orgGrants.some((g) => g.permissions.has("dashboard.admin"));
  const orgNames = [...new Set(rows.map((r) => r.organization.name))];
  const openTickets = rows.reduce((n, r) => n + r._count.tickets, 0);

  return (
    <div className="min-h-screen bg-background">
      <header className="flex items-center justify-between gap-3 border-b border-border bg-card px-4 py-3">
        <p className="text-sm font-semibold">{isMaintenanceOnly ? "Maintenance" : "Organization admin"}</p>
        <div className="flex items-center gap-3">
          <div className="hidden text-right text-xs leading-tight sm:block">
            <p className="font-medium">{ctx.name}</p>
            <p className="text-muted-foreground">{ctx.email}</p>
          </div>
          {ctx.isSuperAdmin || dashboards.includes("super-admin") ? <Link href={dashboardPath("super-admin")} className={buttonClass("ghost", "h-8 text-xs")}>Super Admin</Link> : null}
          <form action={signOutAction}><Button type="submit" variant="secondary">Sign out</Button></form>
        </div>
      </header>

      <main id="main" className="mx-auto max-w-5xl p-4 sm:p-6">
        <h1 className="text-2xl font-semibold tracking-tight">{isMaintenanceOnly ? "Your projects" : orgNames.length === 1 ? orgNames[0] : "Your websites"}</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {isMaintenanceOnly ? "Choose a project to open it. You can see its modules; what you can change depends on your role." : "Choose a website to edit. Its dashboard shows the modules enabled for you."}
        </p>

        <div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3">
          <StatCard label={total === 1 ? "Website" : "Websites"} value={total} />
          <StatCard label="Open maintenance requests" value={openTickets} tone={openTickets > 0 ? "warning" : "default"} />
        </div>

        {rows.length === 0 ? (
          <Card className="mt-6"><EmptyState title="No projects yet" description="Ask an administrator to give you access to a website." /></Card>
        ) : (
          <ul className="mt-6 grid gap-4 sm:grid-cols-2">
            {rows.map((s) => {
              const canEdit = can(ctx, "pages.edit", { siteId: s.id, siteOrganizationId: s.organizationId });
              const host = s.domains[0]?.hostname;
              return (
                <li key={s.id}>
                  <Card className="flex h-full flex-col gap-3 p-4">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex items-center gap-2">
                        <Globe className="size-4 text-muted-foreground" aria-hidden />
                        <h2 className="font-semibold">{s.name}</h2>
                      </div>
                      <StatusBadge value={s.status} />
                    </div>
                    <p className="text-xs text-muted-foreground">{s.organization.name} · {host ?? "no domain yet"}</p>
                    <div className="flex flex-wrap gap-2 text-xs">
                      <Badge>{s._count.pages} pages</Badge>
                      {s._count.tickets > 0 ? <Badge tone="warning">{s._count.tickets} open requests</Badge> : null}
                    </div>
                    <form action={openProjectAction} className="mt-auto pt-1">
                      <input type="hidden" name="siteId" value={s.id} />
                      <Button type="submit" aria-label={`${canEdit ? "Edit" : "Open"} ${s.name}`}>{canEdit ? "Edit" : "Open"}</Button>
                    </form>
                  </Card>
                </li>
              );
            })}
          </ul>
        )}
        <Pagination page={page} total={total} buildHref={(p) => buildHref(PATH, { page: p })} />
      </main>
    </div>
  );
}