'use client';

import { useState } from 'react';
import { toast } from 'sonner';
import { AlertModal } from '@/components/alerts/AlertModal';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';

// Definição do tipo Alert
interface Alert {
  id: number;
  title: string;
  description: string;
  status: 'ativo' | 'pendente' | 'resolvido';
}

export default function AlertasPage() {
  const [openModal, setOpenModal] = useState(false);
  const [alerts, setAlerts] = useState<Alert[]>([
    { id: 1, title: 'Manutenção Caminhão CAM001', description: 'Troca de óleo agendada para 10/05/2025.', status: 'pendente' },
    { id: 2, title: 'Seguro Pás Carregadeira', description: 'Renovar apólice antes de 20/05/2025.', status: 'ativo' },
  ]);

  // Adicionar alerta
  const addAlert = (title: string, description: string) => {
    const newAlert: Alert = {
      id: alerts.length + 1,
      title,
      description,
      status: 'ativo',
    };
    setAlerts([...alerts, newAlert]);
    toast.success('Alerta cadastrado com sucesso!');
  };

  // Excluir alerta
  const deleteAlert = (id: number) => {
    setAlerts(alerts.filter((alert) => alert.id !== id));
    toast.error('Alerta excluído!');
  };

  // Trocar status
  const toggleStatus = (id: number) => {
    setAlerts(alerts.map((alert) =>
      alert.id === id
        ? {
            ...alert,
            status:
              alert.status === 'ativo'
                ? 'pendente'
                : alert.status === 'pendente'
                ? 'resolvido'
                : 'ativo',
          }
        : alert
    ));
    toast('Status do alerta atualizado.');
  };

  return (
    <div className="p-8">
      <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>

      <AlertModal open={openModal} setOpen={setOpenModal} onSave={addAlert} />

      <div className="rounded-md border overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>Título</TableHead>
              <TableHead>Descrição</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {alerts.map((alert) => (
              <TableRow key={alert.id}>
                <TableCell>{alert.id}</TableCell>
                <TableCell className="cursor-pointer hover:underline" onClick={() => {}}>
                  {alert.title}
                </TableCell>
                <TableCell>{alert.description}</TableCell>
                <TableCell>
                  <Badge
                    variant={
                      alert.status === 'ativo'
                        ? 'default'
                        : alert.status === 'pendente'
                        ? 'secondary'
                        : 'outline'
                    }
                  >
                    {alert.status}
                  </Badge>
                </TableCell>
                <TableCell className="space-x-2">
                  <Button variant="secondary" size="sm" onClick={() => toggleStatus(alert.id)}>
                    Mudar Status
                  </Button>
                  <Button variant="destructive" size="sm" onClick={() => deleteAlert(alert.id)}>
                    Excluir
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}
