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

import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
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';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';

type Categoria = { id: string; nome: string };
type Fornecedor = { id: string; nome: string };
type Despesa = {
  id: string;
  categoria_id: string;
  fornecedor_id: string | null;
  valor: number;
  data_servico: string;
  data_vencimento: string | null;
  status: string;
  descricao: string | null;
};

const STATUS_OPTIONS = [
  { value: 'pendente', label: 'Pendente' },
  { value: 'pago', label: 'Pago' },
  { value: 'protestar', label: 'A Protestar' },
  { value: 'protestado', label: 'Protestado' },
];

export default function EdicaoDeDespesaPage() {
  const router = useRouter();
  const params = useSearchParams();
  const id = params.get('id') || '';
  const supabase = createClientComponentClient();

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  const [categorias, setCategorias] = useState<Categoria[]>([]);
  const [fornecedores, setFornecedores] = useState<Fornecedor[]>([]);
  const [form, setForm] = useState({
    categoria_id: '',
    fornecedor_id: '',
    valor: '',
    data_servico: '',
    data_vencimento: '',
    status: '',
    descricao: '',
  });

  useEffect(() => {
    // carregar categorias e fornecedores
    supabase
      .from('expense_categories')
      .select('id, nome')
      .order('nome', { ascending: true })
      .then(({ data }) => data && setCategorias(data));

    supabase
      .from('suppliers')
      .select('id, nome')
      .order('nome', { ascending: true })
      .then(({ data }) => data && setFornecedores(data));
  }, []);

  useEffect(() => {
    if (!id) return;
    // buscar dados da despesa
    supabase
      .from<Despesa>('expenses')
      .select('*')
      .eq('id', id)
      .single()
      .then(({ data, error }) => {
        if (error) {
          console.error('Erro ao carregar despesa:', error);
        } else if (data) {
          setForm({
            categoria_id: data.categoria_id,
            fornecedor_id: data.fornecedor_id || '',
            valor: data.valor.toString(),
            data_servico: dayjs(data.data_servico).format('YYYY-MM-DD'),
            data_vencimento: data.data_vencimento
              ? dayjs(data.data_vencimento).format('YYYY-MM-DD')
              : '',
            status: data.status,
            descricao: data.descricao || '',
          });
        }
        setLoading(false);
      });
  }, [id]);

  function handleChange(e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) {
    const { name, value } = e.target;
    setForm((f) => ({ ...f, [name]: value }));
  }

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setSaving(true);

    const updateData: Partial<Despesa> = {
      categoria_id: form.categoria_id,
      fornecedor_id: form.fornecedor_id || null,
      valor: parseFloat(form.valor.replace(',', '.')) || 0,
      data_servico: form.data_servico,
      data_vencimento: form.data_vencimento || null,
      status: form.status,
      descricao: form.descricao || null,
    };

    const { error } = await supabase
      .from('expenses')
      .update(updateData)
      .eq('id', id);

    if (error) {
      console.error('Erro ao atualizar despesa:', error);
      alert('Falha ao salvar as alterações.');
    } else {
      router.push('/financeiro/listagem_de_despesa');
    }
    setSaving(false);
  }

  if (loading) {
    return <p className="p-6 text-center">Carregando dados...</p>;
  }

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <Card>
        <CardHeader>
          <CardTitle>Editar Despesa</CardTitle>
        </CardHeader>
        <CardContent>
          <form className="grid grid-cols-1 gap-4" onSubmit={handleSubmit}>
            <div>
              <Label htmlFor="categoria_id">Categoria</Label>
              <Select
                id="categoria_id"
                name="categoria_id"
                value={form.categoria_id}
                onValueChange={(v) => setForm((f) => ({ ...f, categoria_id: v }))}
              >
                <Select.Trigger className="w-full">
                  <Select.Value placeholder="Selecione..." />
                </Select.Trigger>
                <Select.Content>
                  {categorias.map((cat) => (
                    <Select.Item key={cat.id} value={cat.id}>
                      {cat.nome}
                    </Select.Item>
                  ))}
                </Select.Content>
              </Select>
            </div>

            <div>
              <Label htmlFor="fornecedor_id">Fornecedor</Label>
              <Select
                id="fornecedor_id"
                name="fornecedor_id"
                value={form.fornecedor_id}
                onValueChange={(v) => setForm((f) => ({ ...f, fornecedor_id: v }))}
              >
                <Select.Trigger className="w-full">
                  <Select.Value placeholder="Nenhum" />
                </Select.Trigger>
                <Select.Content>
                  <Select.Item value="">Nenhum</Select.Item>
                  {fornecedores.map((f) => (
                    <Select.Item key={f.id} value={f.id}>
                      {f.nome}
                    </Select.Item>
                  ))}
                </Select.Content>
              </Select>
            </div>

            <div>
              <Label htmlFor="valor">Valor (R$)</Label>
              <Input
                id="valor"
                name="valor"
                value={form.valor}
                onChange={handleChange}
                placeholder="0,00"
              />
            </div>

            <div>
              <Label htmlFor="data_servico">Data do Serviço</Label>
              <Input
                id="data_servico"
                name="data_servico"
                type="date"
                value={form.data_servico}
                onChange={handleChange}
              />
            </div>

            <div>
              <Label htmlFor="data_vencimento">Data de Vencimento</Label>
              <Input
                id="data_vencimento"
                name="data_vencimento"
                type="date"
                value={form.data_vencimento}
                onChange={handleChange}
              />
            </div>

            <div>
              <Label htmlFor="status">Status</Label>
              <Select
                id="status"
                name="status"
                value={form.status}
                onValueChange={(v) => setForm((f) => ({ ...f, status: v }))}
              >
                <Select.Trigger className="w-full">
                  <Select.Value placeholder="Selecione..." />
                </Select.Trigger>
                <Select.Content>
                  {STATUS_OPTIONS.map((opt) => (
                    <Select.Item key={opt.value} value={opt.value}>
                      {opt.label}
                    </Select.Item>
                  ))}
                </Select.Content>
              </Select>
            </div>

            <div className="md:col-span-2">
              <Label htmlFor="descricao">Descrição / Observações</Label>
              <Input
                id="descricao"
                name="descricao"
                value={form.descricao}
                onChange={handleChange}
                placeholder="Detalhes adicionais"
              />
            </div>

            <CardFooter className="flex justify-end space-x-2">
              <Button variant="outline" onClick={() => router.back()}>
                Cancelar
              </Button>
              <Button type="submit" disabled={saving}>
                {saving ? 'Salvando...' : 'Salvar Alterações'}
              </Button>
            </CardFooter>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
