import { Dialog, DialogTrigger } from '@/views/components/ui/dialog';
import { useState } from 'react';

import type { Protocol } from '@/services/protocolService';
import { InfoIcon } from '@phosphor-icons/react';
import { ProtocolsTable } from '../components/protocols-table';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '../components/ui/card';

const statuses = ['Criado', 'Tramitado', 'Recebido', 'Finalizado', 'Cancelado'];

export function ProtocolsDashboard() {
  const [open, setOpen] = useState(false);
  const [paginatedItems] = useState<Protocol[]>([]);
  const [counts] = useState<Record<string, number>>({ Todos: 0 });

  return (
    <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5">
      {statuses.map((status) => (
        <Dialog
          open={open}
          onOpenChange={(v) => {
            setOpen(v);
          }}>
          <DialogTrigger asChild>
            <Card className="cursor-pointer hover:shadow-md transition-shadow bg-muted/50">
              <CardHeader className="pb-2">
                <CardDescription className="flex items-center gap-1">
                  {`Protocolos ${status.toLowerCase()}`}
                  <span title="Informações sobre os protocolos">
                    <InfoIcon size={14} />
                  </span>
                </CardDescription>
                <CardTitle className="text-3xl">
                  {counts[status] ?? 0}
                </CardTitle>
              </CardHeader>
              <CardContent></CardContent>
            </Card>
          </DialogTrigger>

          <ProtocolsTable
            tasks={paginatedItems}
            title={`Protocolos ${status.toLowerCase()}`}
            description={`Lista de protocolos com status ${status.toLowerCase()}.`}
          />
        </Dialog>
      ))}
    </div>
  );
}
