"use client";

import { AppSidebar } from "@/components/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import ClientCard from "@/components/client-card";
import DeviceCard from "@/components/device-card";
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>

        <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">
            <ClientCard client={client} />
            <DeviceCard clienti={clienti} />
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}
