'use client';

import { useState } from 'react';
import { toast } from 'sonner';

import { AlertModal } from '@/components/alerts/AlertModal';
import { AlertViewModal } from '@/components/alerts/AlertViewModal';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { AlertFilters } from '@/components/alerts/AlertFilters';

// Tipo do Alerta
interface Alert {
  id: number;
  title: string;
  description: string;
  status: 'ativo' | 'pendente' | 'resolvido';
}

export default function AlertasPage() {
  const [alerts, setAlerts] = useState<Alert[]>([
    { id: 1, title: 'Troca de óleo', description: 'Trocar óleo da pá carregadeira', status: 'pendente' },
    { id: 2, title: 'Seguro Vencendo', description: 'Seguro do caminhão vencerá em breve', status: 'ativo' },
  ]);

  const [openModal, setOpenModal] = useState(false);
  const [openViewModal, setOpenViewModal] = useState(false);
  const [selectedAlert, setSelectedAlert] = useState<Alert | null>(null);

  function handleAddAlert(alert: Alert) {
    setAlerts((prev) => [...prev, { ...alert, id: Date.now() }]);
    toast.success('Alerta criado com sucesso!');
  }

  return (
    <div className="p-8">
      {/* Cabeçalho */}
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold">Gerenciamento de Alertas</h1>
        <Button variant="default" onClick={() => setOpenModal(true)}>+ Novo Alerta</Button>
      </div>

      {/* Filtros */}
      <AlertFilters />

      {/* Tabela */}
      <div className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>Título</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {alerts.map((alert) => (
              <TableRow key={alert.id}>
                <TableCell>{alert.id}</TableCell>
                <TableCell
                  className="cursor-pointer hover:underline"
                  onClick={() => {
                    setSelectedAlert(alert);
                    setOpenViewModal(true);
                  }}
                >
                  {alert.title}
                </TableCell>
                <TableCell>
                  <Badge
                    variant={
                      alert.status === 'ativo'
                        ? 'default'
                        : alert.status === 'pendente'
                        ? 'secondary'
                        : 'outline'
                    }
                  >
                    {alert.status}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* Modais */}
      <AlertModal open={openModal} setOpen={setOpenModal} onSave={handleAddAlert} />
      <AlertViewModal open={openViewModal} setOpen={setOpenViewModal} alert={selectedAlert} />
    </div>
  );
}
