/* eslint-disable @typescript-eslint/no-explicit-any */
import { Dialog, DialogTrigger } from '@/views/components/ui/dialog';
import { useMemo, 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'];

const sampleProtocols: Protocol[] = [
  {
    id: 'P-2025-001',
    title: 'Solicitação de compra - materiais de escritório',
    date: '2025-11-01',
    sender: 'João Silva',
    location: 'Almoxarifado',
    status: 'Criado',
  },
  {
    id: 'P-2025-002',
    title: 'Requisição de manutenção - ar-condicionado',
    date: '2025-10-28',
    sender: 'Maria Oliveira',
    location: 'Prédio A',
    status: 'Tramitado',
  },
  {
    id: 'P-2025-003',
    title: 'Entrega de documento - processo X',
    date: '2025-11-10',
    sender: 'Gustavo Pereira',
    location: 'Protocolo Central',
    status: 'Recebido',
  },
  {
    id: 'P-2025-004',
    title: 'Encaminhamento para setor jurídico',
    date: '2025-09-15',
    sender: 'Setor RH',
    location: 'Jurídico',
    status: 'Finalizado',
  },
  {
    id: 'P-2025-005',
    title: 'Cancelamento de protocolo teste',
    date: '2025-08-20',
    sender: 'Teste',
    location: 'Arquivo',
    status: 'Cancelado',
  },
  {
    id: 'P-2025-006',
    title: 'Solicitação de acesso à sala de reunião',
    date: '2025-11-12',
    sender: 'Carla Dias',
    location: 'Recepção',
    status: 'Recebido',
  },
  {
    id: 'P-2025-007',
    title: 'Pedido de correção de dados cadastrais',
    date: '2025-11-20',
    sender: 'Paulo Costa',
    location: 'Cadastro',
    status: 'Finalizado',
  },
  {
    id: 'P-2025-008',
    title: 'Requisição de treinamento',
    date: '2025-11-22',
    sender: 'Equipe TI',
    location: 'Sala 3',
    status: 'Criado',
  },
];

export function ProtocolsDashboard() {
  const [openStatus, setOpenStatus] = useState<string | null>(null);
  const [paginatedItems] = useState<Protocol[]>(sampleProtocols);

  const counts = useMemo(() => {
    const acc: Record<string, number> = { Todos: paginatedItems.length };
    for (const s of statuses) acc[s] = 0;
    for (const p of paginatedItems) {
      const st = (p as any).status as string;
      if (st && acc[st] !== undefined) acc[st] += 1;
    }
    return acc;
  }, [paginatedItems]);

  return (
    <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5">
      {statuses.map((status) => {
        const itemsForStatus = paginatedItems.filter(
          (p) => (p as any).status === status,
        );

        return (
          <Dialog
            key={status}
            open={openStatus === status}
            onOpenChange={(v) => setOpenStatus(v ? status : null)}>
            <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={itemsForStatus}
              title={`Protocolos ${status.toLowerCase()}`}
              description={`Lista de protocolos com status ${status.toLowerCase()}.`}
            />
          </Dialog>
        );
      })}
    </div>
  );
}