"use client";

import {
  Card,
  CardAction,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Edit, Plus } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";
import { useSearchParams } from "next/navigation";
import { Cliente, Registratore } from "@/generated/prisma";
import AddInterventoDialog from "./add-intervento";

const DeviceCard = ({ registratore }: { registratore: Registratore }) => {
  return (
    <Card className="@container/card">
      <CardHeader>
        <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
          {registratore.modello}
        </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>
          <AddInterventoDialog id={registratore.id} />
        </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">
              {registratore.id}
            </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">
              {registratore.data_acquisto
                ? new Date(registratore.data_acquisto).toLocaleDateString(
                    "it-IT",
                  )
                : "--"}
            </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">
              {registratore.ultima_verifica
                ? new Date(registratore.ultima_verifica).toLocaleDateString(
                    "it-IT",
                  )
                : "--"}
            </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">
              {registratore.prossima_verifica
                ? new Date(registratore.prossima_verifica).toLocaleDateString(
                    "it-IT",
                  )
                : "--"}
            </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>
              {registratore.interventi.map((intervento) => (
                <TableRow key={intervento.id}>
                  <TableCell className="font-medium">
                    {new Date(intervento.data).toLocaleDateString("it-IT")}
                  </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>
  );
};

export default DeviceCard;
