"use client";

import { AppSidebar } from "@/components/app-sidebar";
import { Button } from "@/components/ui/button";
import { Edit, Plus } from "lucide-react";
import {
  Card,
  CardAction,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";
import { useSearchParams, useParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  const { client } = useParams();

  const clienti = [
    {
      name: "Savoldi Ettore",
      email: "savoldi.ettore@gmail.com",
      ragione_sociale: "Acconciature Uomo",
      p_iva: "13407520172",
      telefono: "0301547854",
      sede: "Via Umberto I 60/T, Flero (BS)",
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
      contratto: "https://google.com",
      registratori: [
        {
          seriale: "80E100548745",
          acquisto: "15/10/2019",
          ultima_verifica: "15/10/2025",
          prossima_verifica: "15/10/2026",
          interventi: [
            {
              id: "0001",
              data: "15/10/2025",
              lavoro: "VERIFICA FISCALE - AGGIORNAMENTO FIRMWARE",
              fattura: true,
            },
            {
              id: "0002",
              data: "28/05/2025",
              lavoro: "SOSTITUZIONE DGFE",
              fattura: false,
            },
            {
              id: "0003",
              data: "08/10/2024",
              lavoro: "VERIFICA FISCALE",
              fattura: true,
            },
          ],
        },
      ],
    },
    {
      name: "Forno Tagliaferri",
      email: "info@tagliaferri.it",
      ragione_sociale: "Forno Tagliaferri",
      p_iva: "12901475639",
      telefono: "0309183573",
      sede: "Via Corso dei Martiri 11, Brescia (BS)",
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
      contratto: "https://google.com",
      registratori: [
        {
          seriale: "80E1002587545",
          acquisto: "24/02/2020",
          ultima_verifica: "24/02/2025",
          prossima_verifica: "24/02/2026",
          interventi: [
            {
              id: "0004",
              data: "24/02/2025",
              lavoro: "VERIFICA FISCALE",
              fattura: true,
            },
            {
              id: "0005",
              data: "06/04/2025",
              lavoro: "SOSTITUZIONE DGFE",
              fattura: false,
            },
            {
              id: "0006",
              data: "24/02/2025",
              lavoro: "VERIFICA FISCALE - AGGIORNAMENTO FIRMWARE",
              fattura: true,
            },
          ],
        },
      ],
    },
  ];

  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "350px",
        } as React.CSSProperties
      }
    >
      <AppSidebar />
      <SidebarInset>
        {/*
          <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
            <SidebarTrigger className="-ml-1" />
            <Separator
              orientation="vertical"
              className="mr-2 data-[orientation=vertical]:h-4"
            />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>Inbox</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
              </Breadcrumb>
          </header>
        */}

        <div className="flex flex-1 flex-col gap-4 p-4">
          <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
            <Card className="@container/card">
              <CardHeader>
                <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
                  {client}
                </CardTitle>
                <CardAction className="flex items-center gap-4">
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline">
                        <Edit className="size-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Modifica dettagli</p>
                    </TooltipContent>
                  </Tooltip>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline">
                        <Plus className="size-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Aggiungi registratore</p>
                    </TooltipContent>
                  </Tooltip>
                </CardAction>
              </CardHeader>
              <CardFooter className="flex items-start gap-20 text-md">
                <div className="flex-col items-start gap-1.5 text-md">
                  <div className="text-muted-foreground">Ragione Sociale</div>
                  <div className="line-clamp-1 flex gap-2 font-medium">
                    Acconciature Uomo
                  </div>
                </div>
                <div className="flex-col items-start gap-1.5 text-md">
                  <div className="text-muted-foreground">Partita IVA</div>
                  <div className="line-clamp-1 flex gap-2 font-medium">
                    13407520172
                  </div>
                </div>
                <div className="flex-col items-start gap-1.5 text-md">
                  <div className="text-muted-foreground">
                    Numero di Telefono
                  </div>
                  <div className="line-clamp-1 flex gap-2 font-medium">
                    0301547854
                  </div>
                </div>
                <div className="flex-col items-start gap-1.5 text-md">
                  <div className="text-muted-foreground">Sede</div>
                  <div className="line-clamp-1 flex gap-2 font-medium">
                    <a
                      className="text-blue-700 italic underline"
                      target="blank"
                      href="https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7"
                    >
                      Via Umberto I 60/T, Flero (BS)
                    </a>
                  </div>
                </div>
                <div className="flex-col items-start gap-1.5 text-md">
                  <div className="text-muted-foreground">Contratto</div>
                  <div className="line-clamp-1 flex gap-2 font-medium">
                    <a
                      className="text-blue-700 italic underline"
                      target="blank"
                      href="https://google.com"
                    >
                      LINK
                    </a>
                  </div>
                </div>
              </CardFooter>
            </Card>

            <Card className="@container/card">
              <CardHeader>
                <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
                  FORM 100
                </CardTitle>
                <CardAction className="flex items-center gap-4">
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline">
                        <Edit className="size-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Modifica dettagli</p>
                    </TooltipContent>
                  </Tooltip>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline">
                        <Plus className="size-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Aggiungi intervento</p>
                    </TooltipContent>
                  </Tooltip>
                </CardAction>
              </CardHeader>
              <CardContent className="flex flex-col gap-5 text-md">
                <div className="flex items-start gap-20 text-md">
                  <div className="flex-col items-start gap-1.5 text-md">
                    <div className="text-muted-foreground">Seriale</div>
                    <div className="line-clamp-1 flex gap-2 font-medium">
                      80E100548745
                    </div>
                  </div>
                  <div className="flex-col items-start gap-1.5 text-md">
                    <div className="text-muted-foreground">Data acquisto</div>
                    <div className="line-clamp-1 flex gap-2 font-medium">
                      15/10/2019
                    </div>
                  </div>
                  <div className="flex-col items-start gap-1.5 text-md">
                    <div className="text-muted-foreground">Ultima verifica</div>
                    <div className="line-clamp-1 flex gap-2 font-medium">
                      15/10/2025
                    </div>
                  </div>
                  <div className="flex-col items-start gap-1.5 text-md">
                    <div className="text-muted-foreground">
                      Prossima verifica
                    </div>
                    <div className="line-clamp-1 flex gap-2 font-medium">
                      15/10/2026
                    </div>
                  </div>
                </div>
                <div className="flex flex-col">
                  <Table className={cn("caption-top")}>
                    <TableCaption className="text-lg text-start">
                      Lista interventi
                    </TableCaption>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-[100px]">Data</TableHead>
                        <TableHead>Lavoro</TableHead>
                        <TableHead className="text-right">Fattura</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {clienti
                        .find(
                          (cliente) =>
                            cliente.name == searchParams.get("cliente"),
                        )
                        ?.registratori[0].interventi.map((intervento) => (
                          <TableRow key={intervento.id}>
                            <TableCell className="font-medium">
                              {intervento.data}
                            </TableCell>
                            <TableCell>{intervento.lavoro}</TableCell>
                            <TableCell className="text-right">
                              <Checkbox checked={intervento.fattura} />
                            </TableCell>
                          </TableRow>
                        ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
              <CardFooter className="flex gap-5">
                <Button
                  variant="destructive"
                  className="hover:bg-red-800 transition-colors"
                >
                  DISMETTI
                </Button>
                <Button
                  variant="destructive"
                  className="hover:bg-red-800 transition-colors"
                >
                  ROTTAMA
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}