// pages/financeiro/consulta_despesas.tsx
'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import dayjs from 'dayjs';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from '@/components/ui/table';
import { Select } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

type Despesa = {
  id: string;
  valor: number;
  data_servico: string;
  data_vencimento: string | null;
  status: string;
  categoria: { nome: string };
  fornecedor: { nome: string } | null;
};

export default function ConsultaDespesasPage() {
  const supabase = createClientComponentClient();
  const [despesas, setDespesas] = useState<Despesa[]>([]);
  const [categorias, setCategorias] = useState<{ id: string; nome: string }[]>([]);
  const [filtroCat, setFiltroCat] = useState<string>('');
  const [fromDate, setFromDate] = useState<string>(dayjs().startOf('month').format('YYYY-MM-DD'));
  const [toDate, setToDate] = useState<string>(dayjs().format('YYYY-MM-DD'));

  // Carrega categorias para filtro
  useEffect(() => {
    supabase
      .from('categorias_despesas')
      .select('id, nome')
      .order('nome', { ascending: true })
      .then(({ data }) => {
        if (data) setCategorias(data);
      });
  }, []);

  // Busca despesas sempre que filtros mudam
  useEffect(() => {
    fetchDespesas();
  }, [filtroCat, fromDate, toDate]);

  async function fetchDespesas() {
    let query = supabase
      .from<Despesa>('despesas')
      .select(`
        id,
        valor,
        data_servico,
        data_vencimento,
        status,
        categoria:categorias_despesas(nome),
        fornecedor:fornecedores(nome)
      `)
      .gte('data_servico', fromDate)
      .lte('data_servico', toDate);

    if (filtroCat) {
      query = query.eq('categoria_id', filtroCat);
    }

    const { data, error } = await query.order('data_servico', { ascending: false });
    if (error) {
      console.error('Erro ao buscar despesas:', error);
    } else {
      setDespesas(data || []);
    }
  }

  return (
    <div className="p-6 max-w-6xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">Consulta de Despesas</h1>
        <Link href="/financeiro/cadastro_de_despesa">
          <Button>+ Nova Despesa</Button>
        </Link>
      </div>

      {/* Filtros */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Select value={filtroCat} onValueChange={setFiltroCat}>
          <Select.Trigger className="w-full">
            <Select.Value placeholder="Todas Categorias" />
          </Select.Trigger>
          <Select.Content>
            <Select.Item value="">Todas</Select.Item>
            {categorias.map((cat) => (
              <Select.Item key={cat.id} value={cat.id}>
                {cat.nome}
              </Select.Item>
            ))}
          </Select.Content>
        </Select>

        <Input
          type="date"
          value={fromDate}
          onChange={(e) => setFromDate(e.target.value)}
        />
        <Input
          type="date"
          value={toDate}
          onChange={(e) => setToDate(e.target.value)}
        />
        <Button onClick={fetchDespesas}>Filtrar</Button>
      </div>

      {/* Tabela de Despesas */}
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Categoria</TableHead>
            <TableHead>Fornecedor</TableHead>
            <TableHead>Valor (R$)</TableHead>
            <TableHead>Data Serviço</TableHead>
            <TableHead>Vencimento</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="text-right">Ações</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {despesas.map((d) => (
            <TableRow key={d.id}>
              <TableCell>{d.categoria.nome}</TableCell>
              <TableCell>{d.fornecedor?.nome ?? '—'}</TableCell>
              <TableCell>R$ {d.valor.toFixed(2)}</TableCell>
              <TableCell>{dayjs(d.data_servico).format('DD/MM/YYYY')}</TableCell>
              <TableCell>
                {d.data_vencimento
                  ? dayjs(d.data_vencimento).format('DD/MM/YYYY')
                  : '—'}
              </TableCell>
              <TableCell>{d.status}</TableCell>
              <TableCell className="text-right space-x-2">
                <Link href={`/financeiro/edicao_de_despesa?id=${d.id}`}>
                  <Button size="icon" variant="outline">✎</Button>
                </Link>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
