import { getAllProjectsWithPayments } from "@/lib/admin-queries";
import { ProjectRow } from "@/components/admin/ProjectRow";
import Link from "next/link";
import { FolderOpen, Plus } from "lucide-react";
import { PageHeader } from "@/components/admin/PageHeader";
import { Button } from "@/components/ui/button";

export const revalidate = 0;

export default async function ProjectsPage() {
  const projects = await getAllProjectsWithPayments();

  const projectiAction = (
    <Button asChild className="self-start sm:self-auto">
      <Link href="/admin/projects/new">
        <Plus size={16} />
        Nuovo Progetto
      </Link>
    </Button>
  );

  return (
    <div className="space-y-6">
      <PageHeader
        title="Progetti"
        subtitle="Traccia le attività, monitora gli incassi e verifica la redditività oraria effettiva"
        action={projectiAction}
      />

      {projects.length === 0 ? (
        <div className="text-center py-20 border border-dashed border-border rounded-xl">
          <FolderOpen size={40} className="mx-auto text-muted-foreground mb-4" />
          <p className="text-muted-foreground text-sm">
            Nessun progetto ancora. Creane uno dal dettaglio di un cliente.
          </p>
        </div>
      ) : (
        <div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm border-collapse">
              <thead>
                <tr className="border-b border-border bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
                  <th className="py-4 px-6 w-1/4">Progetto</th>
                  <th className="py-4 px-6 text-right">Valore Totale</th>
                  <th className="py-4 px-6 text-center">Acconto</th>
                  <th className="py-4 px-6 text-center">Saldo</th>
                  <th className="py-4 px-6 text-center">Timer</th>
                  <th className="py-4 px-6 text-right">Redditività (€/H)</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {projects.map((project) => (
                  <ProjectRow key={project.id} project={project} />
                ))}
              </tbody>
            </table>
          </div>

          <div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
            Mostrando {projects.length} di {projects.length}{" "}
            {projects.length === 1 ? "progetto attivo" : "progetti attivi"}
          </div>
        </div>
      )}
    </div>
  );
}
