'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function ContasBancariasPage() {
  const supabase = createClientComponentClient();
  const [contas, setContas] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchContas();
  }, []);

  async function fetchContas() {
    setLoading(true);
    const { data, error } = await supabase.from('bank_accounts').select('*');
    if (!error && data) setContas(data);
    setLoading(false);
  }

  return (
    <div className="p-6 max-w-5xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">Contas Bancárias</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {contas.map((conta) => (
          <Card key={conta.id}>
            <CardHeader>
              <CardTitle>{conta.nome_banco}</CardTitle>
            </CardHeader>
            <CardContent>
              <p>Agência: {conta.agencia}</p>
              <p>Conta: {conta.numero_conta}</p>
              <p>Tipo: {conta.tipo_conta}</p>
              <p>Titular: {conta.titular}</p>
              <p className="font-bold mt-2">Saldo Atual: R$ {Number(conta.saldo_atual).toFixed(2)}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="mt-6">
        <Link href="/financeiro/cadastro_de_conta_bancaria">
          <Button>+ Nova Conta</Button>
        </Link>
      </div>
    </div>
  );
}
