import { useState, useEffect } from "react";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/Components/ui/alert-dialog";
import { router, useForm } from "@inertiajs/react";
import { toast } from "sonner";
import { Trash2, Edit2, Check, X, Plus, Loader2 } from "lucide-react";

export interface Unit {
    id: string;
    name: string;
    code: string | null;
}

interface UnitManagerDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    units: Unit[];
}

export default function UnitManagerDialog({
    open,
    onOpenChange,
    units,
}: UnitManagerDialogProps) {
    const [editingId, setEditingId] = useState<string | null>(null);
    const [editName, setEditName] = useState("");
    const [editCode, setEditCode] = useState("");

    const { data, setData, post, processing, reset, errors, clearErrors } = useForm({
        name: "",
        code: "",
    });

    useEffect(() => {
        if (!open) {
            reset();
            clearErrors();
            setEditingId(null);
        }
    }, [open]);

    const handleAdd = (e: React.FormEvent) => {
        e.preventDefault();
        if (!data.name.trim()) return;

        post(route("units.store"), {
            onSuccess: () => {
                reset();
            },
            onError: (errors) => {
                toast.error("新增失敗: " + (errors.name || errors.code || "未知錯誤"));
            }
        });
    };

    const startEdit = (unit: Unit) => {
        setEditingId(unit.id);
        setEditName(unit.name);
        setEditCode(unit.code || "");
    };

    const cancelEdit = () => {
        setEditingId(null);
        setEditName("");
        setEditCode("");
    };

    const saveEdit = (id: string) => {
        if (!editName.trim()) return;

        router.put(route("units.update", id), { name: editName, code: editCode }, {
            onSuccess: () => {
                setEditingId(null);
            },
            onError: (errors) => {
                toast.error("更新失敗: " + (errors.name || errors.code || "未知錯誤"));
            }
        });
    };

    const handleDelete = (id: string) => {
        router.delete(route("units.destroy", id), {
            onSuccess: () => {
                // 由全域 flash 處理
            },
            onError: () => {
                toast.error("刪除失敗，請確認該單位無關聯商品");
            }
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
                <DialogHeader>
                    <DialogTitle>管理單位</DialogTitle>
                    <DialogDescription>
                        在此新增、修改或刪除常用單位。刪除前請確認無關聯商品。
                    </DialogDescription>
                </DialogHeader>

                <div className="flex-1 overflow-y-auto py-4 space-y-6">
                    {/* Add New Section */}
                    <div className="space-y-4">
                        <h3 className="text-sm font-medium border-l-4 border-primary pl-2">快速新增</h3>
                        <form onSubmit={handleAdd} className="flex items-end gap-3 p-4 bg-white border rounded-lg shadow-sm">
                            <div className="flex-1 grid grid-cols-2 gap-3">
                                <div className="space-y-2">
                                    <Label htmlFor="new-unit-name" className="text-xs text-gray-500">單位名稱</Label>
                                    <Input
                                        id="new-unit-name"
                                        placeholder="例如: 箱, 包"
                                        value={data.name}
                                        onChange={(e) => setData("name", e.target.value)}
                                        className={errors.name ? "border-red-500" : ""}
                                    />
                                    {errors.name && <p className="text-xs text-red-500 mt-1">{errors.name}</p>}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="new-unit-code" className="text-xs text-gray-500">代碼 (選填)</Label>
                                    <Input
                                        id="new-unit-code"
                                        placeholder="例如: box, kg"
                                        value={data.code}
                                        onChange={(e) => setData("code", e.target.value)}
                                        className={errors.code ? "border-red-500" : ""}
                                    />
                                    {errors.code && <p className="text-xs text-red-500 mt-1">{errors.code}</p>}
                                </div>
                            </div>
                            <Button type="submit" disabled={processing} className="button-filled-primary h-10 px-6">
                                {processing ? (
                                    <Loader2 className="w-4 h-4 animate-spin mr-2" />
                                ) : (
                                    <Plus className="w-4 h-4 mr-2" />
                                )}
                                新增
                            </Button>
                        </form>
                    </div>

                    {/* List Section */}
                    <div className="space-y-4">
                        <div className="flex justify-between items-center">
                            <h3 className="text-sm font-medium border-l-4 border-primary pl-2">現有單位</h3>
                            <span className="text-xs text-gray-400">共 {units.length} 個項目</span>
                        </div>

                        <div className="bg-white border rounded-lg shadow-sm overflow-hidden">
                            <Table>
                                <TableHeader className="bg-gray-50">
                                    <TableRow>
                                        <TableHead className="w-[50px] font-medium text-gray-700">#</TableHead>
                                        <TableHead className="font-medium text-gray-700">單位名稱</TableHead>
                                        <TableHead className="font-medium text-gray-700">代碼</TableHead>
                                        <TableHead className="w-[140px] text-right font-medium text-gray-700">操作</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {units.length === 0 ? (
                                        <TableRow>
                                            <TableCell colSpan={4} className="text-center py-12 text-gray-400">
                                                目前尚無單位，請從上方新增。
                                            </TableCell>
                                        </TableRow>
                                    ) : (
                                        units.map((unit, index) => (
                                            <TableRow key={unit.id}>
                                                <TableCell className="py-3 text-center text-gray-500 font-medium">
                                                    {index + 1}
                                                </TableCell>
                                                <TableCell className="py-3">
                                                    {editingId === unit.id ? (
                                                        <Input
                                                            value={editName}
                                                            onChange={(e) => setEditName(e.target.value)}
                                                            className="h-9 focus-visible:ring-1"
                                                            autoFocus
                                                            placeholder="單位名稱"
                                                            onKeyDown={(e) => {
                                                                if (e.key === 'Enter') saveEdit(unit.id);
                                                                if (e.key === 'Escape') cancelEdit();
                                                            }}
                                                        />
                                                    ) : (
                                                        <span className="font-medium text-gray-700">{unit.name}</span>
                                                    )}
                                                </TableCell>
                                                <TableCell className="py-3">
                                                    {editingId === unit.id ? (
                                                        <Input
                                                            value={editCode}
                                                            onChange={(e) => setEditCode(e.target.value)}
                                                            className="h-9 focus-visible:ring-1"
                                                            placeholder="代碼"
                                                            onKeyDown={(e) => {
                                                                if (e.key === 'Enter') saveEdit(unit.id);
                                                                if (e.key === 'Escape') cancelEdit();
                                                            }}
                                                        />
                                                    ) : (
                                                        <span className="text-gray-500">{unit.code || '-'}</span>
                                                    )}
                                                </TableCell>
                                                <TableCell className="text-right py-3">
                                                    {editingId === unit.id ? (
                                                        <div className="flex justify-end gap-1">
                                                            <Button
                                                                size="sm"
                                                                variant="ghost"
                                                                className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
                                                                onClick={() => saveEdit(unit.id)}
                                                            >
                                                                <Check className="h-4 w-4" />
                                                            </Button>
                                                            <Button
                                                                size="sm"
                                                                variant="ghost"
                                                                className="h-8 w-8 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
                                                                onClick={cancelEdit}
                                                            >
                                                                <X className="h-4 w-4" />
                                                            </Button>
                                                        </div>
                                                    ) : (
                                                        <div className="flex justify-end gap-1">
                                                            <Button
                                                                variant="outline"
                                                                size="sm"
                                                                className="h-8 w-8 p-0 button-outlined-primary"
                                                                onClick={() => startEdit(unit)}
                                                            >
                                                                <Edit2 className="h-4 w-4" />
                                                            </Button>

                                                            <AlertDialog>
                                                                <AlertDialogTrigger asChild>
                                                                    <Button
                                                                        variant="outline"
                                                                        size="sm"
                                                                        className="h-8 w-8 p-0 button-outlined-error"
                                                                    >
                                                                        <Trash2 className="h-4 w-4" />
                                                                    </Button>
                                                                </AlertDialogTrigger>
                                                                <AlertDialogContent>
                                                                    <AlertDialogHeader>
                                                                        <AlertDialogTitle>確認刪除單位</AlertDialogTitle>
                                                                        <AlertDialogDescription>
                                                                            確定要刪除「{unit.name}」嗎？<br />
                                                                            若該單位下仍有商品，系統將會拒絕刪除。
                                                                        </AlertDialogDescription>
                                                                    </AlertDialogHeader>
                                                                    <AlertDialogFooter>
                                                                        <AlertDialogCancel>取消</AlertDialogCancel>
                                                                        <AlertDialogAction
                                                                            onClick={() => handleDelete(unit.id)}
                                                                            className="bg-red-600 hover:bg-red-700"
                                                                        >
                                                                            確認刪除
                                                                        </AlertDialogAction>
                                                                    </AlertDialogFooter>
                                                                </AlertDialogContent>
                                                            </AlertDialog>
                                                        </div>
                                                    )}
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </div>
                    </div>
                </div>

                <div className="flex justify-end gap-2 pt-4 border-t mt-auto">
                    <Button
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                        className="button-outlined-primary px-8"
                    >
                        關閉
                    </Button>
                </div>
            </DialogContent>
        </Dialog>
    );
}