// @ts-nocheck
import { Button } from "@/components/ui/button";
import { Plus, Receipt, Building } from "lucide-react";
import { useTransaction } from "@/hooks/useTransaction";
import type { TransactionPayload } from "@/types/modules/finance";

import TransactionForm from "../components/transactions/TransactionForm";
import TransactionsTable from "../components/transactions/TransactionsTable";
import TransactionStats from "../components/transactions/TransactionStats";
import GenerateSampleTransactions from "../components/transactions/GenerateSampleTransactions";

export default function TransactionsPage() {
  const {
    selectedCompany,
    transactions,
    filteredTransactions,
    accounts,
    showForm,
    editingTransaction,
    filter,
    isLoading,
    setFilter,
    openCreateForm,
    openEditForm,
    closeForm,
    saveTransaction,
    generateSampleTransactions,
  } = useTransaction();

  const handleSave = async (transactionData: TransactionPayload) => {
    try {
      await saveTransaction(transactionData);
    } catch (error) {
      console.error("Error al guardar transaccion:", error);
    }
  };

  if (isLoading) {
    return (
      <div className="p-8">
        <div className="animate-pulse space-y-6">
          <div className="h-8 bg-gray-200 rounded w-1/4"></div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="h-24 bg-gray-200 rounded-xl"></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 lg:p-8 space-y-8">
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gradient">Transacciones</h1>
          <p className="text-gray-600 mt-1">
            {selectedCompany?.name} • {transactions.length} transacciones
          </p>
        </div>
        <Button
          onClick={openCreateForm}
          className="bg-gradient-to-r from-emerald-500 to-emerald-600"
          disabled={!selectedCompany || accounts.length === 0}
        >
          <Plus className="w-4 h-4 mr-2" />
          Nueva Transaccion
        </Button>
      </div>

      {showForm && selectedCompany && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <TransactionForm
              transaction={editingTransaction}
              accounts={accounts}
              onSave={handleSave}
              onCancel={closeForm}
            />
          </div>
        </div>
      )}

      {!selectedCompany ? (
        <div className="text-center py-16">
          <Building className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Ninguna Empresa Seleccionada</h2>
          <p className="text-gray-500">Por favor selecciona una empresa para gestionar transacciones</p>
        </div>
      ) : accounts.length === 0 ? (
        <div className="text-center py-16">
          <Receipt className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Configura Primero el Plan de Cuentas</h2>
          <p className="text-gray-500">Necesitas crear cuentas antes de registrar transacciones</p>
        </div>
      ) : transactions.length === 0 ? (
        <GenerateSampleTransactions
          companyId={selectedCompany.id}
          accounts={accounts}
          onGenerate={generateSampleTransactions}
        />
      ) : (
        <>
          <TransactionStats transactions={transactions} />

          <TransactionsTable
            transactions={filteredTransactions}
            onEdit={openEditForm}
            filter={filter}
            onFilterChange={setFilter}
          />
        </>
      )}
    </div>
  );
}