// @ts-nocheck
// @ts-nocheck
import { Button } from "@/components/ui/button";
import { Building2, Plus } from "lucide-react";
import { useCompany } from "@/hooks/useCompany";

import CompanyForm from "../components/companies/CompanyForm";
import CompanyCard from "../components/companies/CompanyCard";

export default function CompaniesPage() {
  const {
    companies,
    showForm,
    editingCompany,
    isLoading,
    openCreateForm,
    openEditForm,
    closeForm,
    submitForm,
  } = useCompany();

  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-2 lg:grid-cols-3 gap-6">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="h-64 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">Gestión de Empresas</h1>
          <p className="text-gray-600 mt-1">Administra tus entidades empresariales y libros contables</p>
        </div>
        <Button
          onClick={openCreateForm}
          className="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700"
        >
          <Plus className="w-4 h-4 mr-2" />
          Nueva Empresa
        </Button>
      </div>

      {showForm && (
        <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-2xl w-full max-h-[90vh] overflow-y-auto">
            <CompanyForm company={editingCompany} onSave={submitForm} onCancel={closeForm} />
          </div>
        </div>
      )}

      {companies.length === 0 && !isLoading ? (
        <div className="text-center py-16">
          <Building2 className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Aún no hay empresas</h2>
          <p className="text-gray-500 mb-6">Crea tu primera empresa para comenzar a gestionar tus libros</p>
          <Button onClick={openCreateForm} className="bg-gradient-to-r from-emerald-500 to-emerald-600">
            <Plus className="w-4 h-4 mr-2" />
            Crear Empresa
          </Button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {companies.map((company) => (
            <CompanyCard key={company.id} company={company} onEdit={openEditForm} />
          ))}
        </div>
      )}
    </div>
  );
}