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

import WarehouseForm from "../components/warehouses/WarehouseForm";
import WarehouseList from "../components/warehouses/WarehouseList";

export default function WarehousesPage() {
    const {
        selectedCompany,
        warehouses,
        showForm,
        editingWarehouse,
        isLoading,
        openCreateForm,
        openEditForm,
        closeForm,
        submitForm,
    } = useWarehouse();

    if (isLoading) {
        return <div className="p-8">Loading...</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">Warehouses</h1>
                    <p className="text-gray-600 mt-1">{selectedCompany?.name} • {warehouses.length} warehouses</p>
                </div>
                <Button onClick={openCreateForm} className="bg-gradient-to-r from-emerald-500 to-emerald-600" disabled={!selectedCompany}>
                    <Plus className="w-4 h-4 mr-2" />
                    New Warehouse
                </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-lg w-full">
                        <WarehouseForm
                            warehouse={editingWarehouse}
                            onSave={submitForm}
                            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">No Company Selected</h2>
                    <p className="text-gray-500">Please select a company to manage warehouses.</p>
                </div>
            ) : (
                <WarehouseList warehouses={warehouses} onEdit={openEditForm} />
            )}
        </div>
    );
}