'use client';

import { useState, useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import Link from 'next/link';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export default function ListagemManutencoes() {
  const supabase = createClientComponentClient();
  const [manutencoes, setManutencoes] = useState<any[]>([]);
  const [filtro, setFiltro] = useState('');

  useEffect(() => {
    fetchManutencoes();
  }, [filtro]);

  async function fetchManutencoes() {
    let query = supabase.from('manutencoes').select('id, tipo, descricao, valor_custo, data_manutencao, data_pagamento');
    if (filtro) {
      query = query.ilike('descricao', `%${filtro}%`);
    }
    const { data } = await query.order('data_manutencao', { ascending: false });
    setManutencoes(data || []);
  }

  async function handleDelete(id: string) {
    if (!confirm('Deseja excluir esta manutenção?')) return;
    await supabase.from('manutencoes').delete().eq('id', id);
    fetchManutencoes();
  }

  return (
    <div className="p-6 max-w-6xl mx-auto">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">Manutenções</h1>
        <Link href="/manutencoes/cadastro_manutencoes">
          <Button>+ Nova Manutenção</Button>
        </Link>
      </div>

      <div className="mb-4">
        <Input
          placeholder="Filtrar por descrição..."
          value={filtro}
          onChange={(e) => setFiltro(e.target.value)}
        />
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Tipo</TableHead>
            <TableHead>Descrição</TableHead>
            <TableHead>Valor (R$)</TableHead>
            <TableHead>Data Manutenção</TableHead>
            <TableHead>Data Pagamento</TableHead>
            <TableHead className="text-right">Ações</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {manutencoes.map((m) => (
            <TableRow key={m.id}>
              <TableCell>{m.tipo}</TableCell>
              <TableCell>{m.descricao}</TableCell>
              <TableCell>{m.valor_custo.toFixed(2)}</TableCell>
              <TableCell>{m.data_manutencao}</TableCell>
              <TableCell>{m.data_pagamento || '—'}</TableCell>
              <TableCell className="text-right space-x-1">
                <Link href={`/manutencoes/visualizacao_manutencoes?id=${m.id}`}>
                  <Button size="icon" variant="outline">Ver</Button>
                </Link>
                <Link href={`/manutencoes/edicao_manutencoes?id=${m.id}`}>
                  <Button size="icon" variant="secondary">✎</Button>
                </Link>
                <Button size="icon" variant="destructive" onClick={() => handleDelete(m.id)}>
                  🗑️
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
