import Link from "next/link";
import { ArrowRight, FolderKanban } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { projectStatsByProject } from "@/lib/queries/account";
import { formatDateOnly, formatNumber, formatUsd, truncate } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { CreateProjectDialog } from "@/components/dashboard/projects/create-project-dialog";
import { SelectProjectButton } from "@/components/dashboard/projects/project-actions";

export const dynamic = "force-dynamic";

export const metadata = { title: "Projects · Fetcha" };

export default async function ProjectsPage({ searchParams }: { searchParams: Promise<{ new?: string }> }) {
  const sp = await searchParams;
  const ws = await getWorkspace();
  const stats = await projectStatsByProject(ws.organization.id);

  return (
    <div className="grid gap-6">
      <PageHeader
        title="Projects"
        description="Each project has its own API keys, request log, defaults and spending limits. Switch the current project from the top bar or here."
        actions={<CreateProjectDialog defaultOpen={sp.new === "1"} />}
      />

      {ws.projects.length === 0 ? (
        <EmptyState icon={FolderKanban} title="No projects" description="Create a project to start generating API keys." action={<CreateProjectDialog />} />
      ) : (
        <div className="overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-xs">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Project</TableHead>
                <TableHead>Environment</TableHead>
                <TableHead className="text-right">Requests · month</TableHead>
                <TableHead className="text-right">Spend · month</TableHead>
                <TableHead className="text-right">Keys</TableHead>
                <TableHead>Created</TableHead>
                <TableHead className="text-right">
                  <span className="sr-only">Actions</span>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {ws.projects.map((p) => {
                const s = stats.get(p.id) ?? { requests: 0, spendUsd: 0, activeKeys: 0 };
                const current = p.id === ws.project.id;
                return (
                  <TableRow key={p.id}>
                    <TableCell>
                      <div className="flex min-w-0 flex-col gap-0.5">
                        <div className="flex items-center gap-2">
                          <Link href={`/dashboard/projects/${p.id}`} className="font-medium text-fg underline-offset-4 hover:underline">
                            {p.name}
                          </Link>
                          {current ? (
                            <Badge variant="accent" dot>
                              Current
                            </Badge>
                          ) : null}
                        </div>
                        {p.description ? <span className="text-[12.5px] text-fg-muted">{truncate(p.description, 80)}</span> : <span className="font-mono text-[11.5px] text-fg-subtle">{p.id}</span>}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant={p.environment === "production" ? "success" : "warning"}>{p.environment}</Badge>
                    </TableCell>
                    <TableCell className="text-right font-mono tabular">{formatNumber(s.requests)}</TableCell>
                    <TableCell className="text-right font-mono tabular">{formatUsd(s.spendUsd)}</TableCell>
                    <TableCell className="text-right font-mono tabular">
                      <Link href={`/dashboard/api-keys?project=${p.id}`} className="underline-offset-4 hover:underline">
                        {s.activeKeys}
                      </Link>
                    </TableCell>
                    <TableCell className="whitespace-nowrap tabular text-fg-muted">{formatDateOnly(p.createdAt)}</TableCell>
                    <TableCell className="text-right">
                      <div className="flex items-center justify-end gap-1.5">
                        {!current ? <SelectProjectButton projectId={p.id} /> : null}
                        <Button asChild size="xs" variant="ghost">
                          <Link href={`/dashboard/projects/${p.id}`}>
                            Open <ArrowRight />
                          </Link>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  );
}