'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ChevronRight, Pencil } from 'lucide-react';
import { ItemDialog } from '@/components/admin/list-manager';
import { Button } from '@/components/ui/button';
import type {
    ProductionItem,
    CustomerCategory,
    ItemGroup,
    ManagedUnit,
    Warehouse,
    ChartOfAccount,
    RealEstateProject,
} from '@/lib/types';

interface MaterialEditPageClientProps {
    item: ProductionItem;
    items: ProductionItem[];
    t: any;
    tGlobal: any;
    categories: CustomerCategory[];
    itemGroups: ItemGroup[];
    unitDefinitions: ManagedUnit[];
    warehouses: Warehouse[];
    productShapeDefinitions: Array<{ id: string; name: string }>;
    realEstateProjects: RealEstateProject[];
    chartOfAccounts: ChartOfAccount[];
    currencySymbol: string;
}

export default function MaterialEditPageClient({
    item,
    items,
    t,
    tGlobal,
    categories,
    itemGroups,
    unitDefinitions,
    warehouses,
    productShapeDefinitions,
    realEstateProjects,
    chartOfAccounts,
    currencySymbol,
}: MaterialEditPageClientProps) {
    const router = useRouter();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    const handleFinished = () => {
        router.push('/admin/data/materials');
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/20 to-indigo-50/30 dark:from-slate-950 dark:via-blue-950/15 dark:to-indigo-950/10">
            <div className="sticky top-0 z-50 border-b border-slate-200/80 dark:border-slate-700/60 bg-white/85 dark:bg-slate-900/85 backdrop-blur supports-[backdrop-filter]:bg-white/70 shadow-sm">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center gap-3">
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={handleFinished}
                        className="text-muted-foreground hover:text-foreground gap-1.5 rounded-lg"
                    >
                        <ChevronRight className="h-4 w-4" />
                        <span className="hidden sm:inline">{tGlobal?.back || 'العودة للقائمة'}</span>
                    </Button>
                    <div className="h-5 w-px bg-slate-200 dark:bg-slate-700" />
                    <div className="flex items-center gap-2.5">
                        <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-emerald-500 via-cyan-500 to-blue-600 flex items-center justify-center shadow-md shadow-cyan-200/50 dark:shadow-cyan-900/40">
                            <Pencil className="h-4 w-4 text-white" />
                        </div>
                        <div>
                            <h1 className="text-sm font-semibold text-foreground leading-tight">
                                {t?.editDialogTitle || 'تعديل الصنف'}
                            </h1>
                            <p className="text-xs text-muted-foreground leading-tight hidden sm:block">
                                {t?.editDialogDescription || 'قم بتعديل بيانات الصنف ثم احفظ التغييرات'}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div className="max-w-7xl mx-auto px-3 sm:px-6 py-5">
                <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/80 dark:border-slate-700/60 shadow-xl shadow-slate-200/40 dark:shadow-slate-950/60 overflow-hidden">
                    <div className="p-4 sm:p-6">
                        {mounted && (
                            <ItemDialog
                                item={item}
                                itemType="material"
                                items={items}
                                t={t}
                                tGlobal={tGlobal}
                                categories={categories}
                                itemGroups={itemGroups}
                                unitDefinitions={unitDefinitions}
                                warehouses={warehouses}
                                productShapeDefinitions={productShapeDefinitions}
                                realEstateProjects={realEstateProjects}
                                chartOfAccounts={chartOfAccounts}
                                currencySymbol={currencySymbol}
                                onFinished={handleFinished}
                                asPage={true}
                            />
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}