// @ts-nocheck
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Plus, Building } from "lucide-react";
import { useAccount } from "@/hooks/useAccount";
import type { AccountRecord } from "@/types/modules/finance";

import AccountForm from "../components/accounts/AccountForm";
import AccountsTable from "../components/accounts/AccountsTable";
import AccountTypeChart from "../components/accounts/AccountTypeChart";
import SetupChartOfAccounts from "../components/accounts/SetupChartOfAccounts";

export default function AccountsPage() {
  const {
    selectedCompany,
    accounts,
    filteredAccounts,
    accountsByType,
    totalBalance,
    showForm,
    editingAccount,
    filter,
    isLoading,
    setFilter,
    setShowForm,
    setEditingAccount,
    saveAccount,
    generateStandardAccounts,
  } = useAccount();

  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-4 gap-6">
            {[...Array(4)].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">Plan de Cuentas</h1>
          <p className="text-gray-600 mt-1">
            {selectedCompany?.name} • {accounts.length} cuentas
          </p>
        </div>
        <Button
          onClick={() => setShowForm(true)}
          className="bg-gradient-to-r from-blue-500 to-blue-600"
          disabled={!selectedCompany}
        >
          <Plus className="w-4 h-4 mr-2" />
          Nueva Cuenta
        </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-lg w-full max-h-[90vh] overflow-y-auto">
            <AccountForm
              account={editingAccount}
              onSave={saveAccount}
              onCancel={() => {
                setShowForm(false);
                setEditingAccount(null);
              }}
            />
          </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 cuentas</p>
        </div>
      ) : accounts.length === 0 ? (
        <SetupChartOfAccounts onGenerateStandardAccounts={generateStandardAccounts} />
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <Card className="glass-card border-white/20">
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-gray-600">Total de Cuentas</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-gradient">{accounts.length}</div>
              </CardContent>
            </Card>
            <Card className="glass-card border-white/20">
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-gray-600">Activos</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">{accountsByType.Activos || 0}</div>
              </CardContent>
            </Card>
            <Card className="glass-card border-white/20">
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-gray-600">Pasivos</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-rose-600">{accountsByType.Pasivos || 0}</div>
              </CardContent>
            </Card>
            <Card className="glass-card border-white/20">
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-gray-600">Balance Total</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">${totalBalance.toLocaleString()}</div>
              </CardContent>
            </Card>
          </div>

          <div className="grid lg:grid-cols-4 gap-6">
            <div className="lg:col-span-3">
              <AccountsTable
                accounts={filteredAccounts}
                onEdit={(account: AccountRecord) => {
                  setEditingAccount(account);
                  setShowForm(true);
                }}
                filter={filter}
                onFilterChange={setFilter}
              />
            </div>
            <div>
              <AccountTypeChart accounts={accounts} />
            </div>
          </div>
        </>
      )}
    </div>
  );
}