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

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

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 Receita = {
  id: string;
  tipo: string;
  descricao: string | null;
  valor: number;
  data_recebimento: string;
  status: string;
};

const TIPOS_RECEITA = [
  { value: '', label: 'Todos' },
  { value: 'locacao', label: 'Locação de Caçambas' },
  { value: 'venda_reciclaveis', label: 'Venda de Recicláveis' },
  { value: 'outros', label: 'Outros' },
];

export default function ReceitasPage() {
  const supabase = createClientComponentClient();
  const [receitas, setReceitas] = useState<Receita[]>([]);
  const [filtroTipo, setFiltroTipo] = useState<string>('');
  const [fromDate, setFromDate] = useState<string>(dayjs().startOf('month').format('YYYY-MM-DD'));
  const [toDate, setToDate] = useState<string>(dayjs().format('YYYY-MM-DD'));

  useEffect(() => {
    fetchReceitas();
  }, [filtroTipo, fromDate, toDate]);

  async function fetchReceitas() {
    let query = supabase
      .from<Receita>('revenues')
      .select('*')
      .gte('data_recebimento', fromDate)
      .lte('data_recebimento', toDate);

    if (filtroTipo) {
      query = query.eq('tipo', filtroTipo);
    }

    const { data, error } = await query.order('data_recebimento', { ascending: false });
    if (error) {
      console.error('Erro ao buscar receitas:', error);
    } else {
      setReceitas(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">Receitas</h1>
        <Link href="/financeiro/cadastro_receita">
          <Button>+ Nova Receita</Button>
        </Link>
      </div>

      {/* Filtros */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <Select value={filtroTipo} onValueChange={setFiltroTipo}>
            <Select.Trigger className="w-full">
              <Select.Value placeholder="Tipo de Receita" />
            </Select.Trigger>
            <Select.Content>
              {TIPOS_RECEITA.map((t) => (
                <Select.Item key={t.value} value={t.value}>
                  {t.label}
                </Select.Item>
              ))}
            </Select.Content>
          </Select>
        </div>
        <Input
          type="date"
          value={fromDate}
          onChange={(e) => setFromDate(e.target.value)}
        />
        <Input
          type="date"
          value={toDate}
          onChange={(e) => setToDate(e.target.value)}
        />
        <Button onClick={fetchReceitas}>Filtrar</Button>
      </div>

      {/* Tabela de Receitas */}
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Tipo</TableHead>
            <TableHead>Descrição</TableHead>
            <TableHead>Valor (R$)</TableHead>
            <TableHead>Data Recebimento</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="text-right">Ações</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {receitas.map((r) => (
            <TableRow key={r.id}>
              <TableCell>{r.tipo}</TableCell>
              <TableCell>{r.descricao ?? '—'}</TableCell>
              <TableCell>R$ {r.valor.toFixed(2)}</TableCell>
              <TableCell>{dayjs(r.data_recebimento).format('DD/MM/YYYY')}</TableCell>
              <TableCell>{r.status}</TableCell>
              <TableCell className="text-right space-x-2">
                <Link href={`/financeiro/edicao_receita?id=${r.id}`}>
                  <Button size="icon" variant="outline">✎</Button>
                </Link>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
