// app/(dashboard)/alertas/page.tsx
'use client';

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

// Definindo tipo para o alerta
interface Alert {
  id: number;
  title: string;
  description: string;
}

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.' },
    { id: 2, title: 'Seguro Pás Carregadeira', description: 'Renovar apólice antes de 20/05/2025.' },
  ]);

  // Função para adicionar novo alerta
  const addAlert = (title: string, description: string) => {
    const newAlert: Alert = {
      id: alerts.length + 1,
      title,
      description,
    };
    setAlerts([...alerts, newAlert]);
  };

  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>

      {/* Modal de Cadastro */}
      <AlertModal open={openModal} setOpen={setOpenModal} onSave={addAlert} />

      {/* Tabela de Alertas */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[100px]">ID</TableHead>
              <TableHead>Título</TableHead>
              <TableHead>Descrição</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {alerts.map((alert) => (
              <TableRow key={alert.id}>
                <TableCell>{alert.id}</TableCell>
                <TableCell>{alert.title}</TableCell>
                <TableCell>{alert.description}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}
