import React from "react";
import { Link, router } from "@inertiajs/react";
import {
    ArrowLeft,
    CheckCircle2,
    Layers,
    ListChecks,
    Loader2,
    Plus,
    Save,
    Trash2,
} from "lucide-react";
import { Card, PageHeader, Button, Input } from "../../components/ui";

function EditableList({
    icon: Icon,
    title,
    description,
    items,
    onChange,
    placeholder,
}: {
    icon: any;
    title: string;
    description: string;
    items: string[];
    onChange: (next: string[]) => void;
    placeholder: string;
}) {
    const [draft, setDraft] = React.useState("");

    const add = () => {
        const value = draft.trim();
        if (!value) return;
        if (items.some((i) => i.toLowerCase() === value.toLowerCase())) {
            setDraft("");
            return;
        }
        onChange([...items, value]);
        setDraft("");
    };

    const remove = (index: number) => {
        onChange(items.filter((_, i) => i !== index));
    };

    const rename = (index: number, value: string) => {
        onChange(items.map((item, i) => (i === index ? value : item)));
    };

    return (
        <Card className="p-6">
            <div className="flex items-start gap-3">
                <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-[#e9fbf7] text-[#0b7668]">
                    <Icon size={18} />
                </div>
                <div>
                    <h2 className="font-black">{title}</h2>
                    <p className="mt-1 text-xs leading-5 text-slate-500">
                        {description}
                    </p>
                </div>
            </div>

            <div className="mt-5 space-y-2">
                {items.map((item, index) => (
                    <div key={index} className="flex items-center gap-2">
                        <Input
                            value={item}
                            onChange={(e) => rename(index, e.target.value)}
                        />
                        <button
                            type="button"
                            onClick={() => remove(index)}
                            aria-label={`Hapus ${item}`}
                            className="grid h-10 w-10 shrink-0 place-items-center rounded-xl text-slate-400 transition hover:bg-rose-50 hover:text-rose-500"
                        >
                            <Trash2 size={16} />
                        </button>
                    </div>
                ))}
                {items.length === 0 && (
                    <p className="py-3 text-center text-xs text-slate-400">
                        Belum ada item. Tambahkan minimal satu di bawah.
                    </p>
                )}
            </div>

            <div className="mt-4 flex items-center gap-2 border-t border-slate-100 pt-4">
                <Input
                    value={draft}
                    placeholder={placeholder}
                    onChange={(e) => setDraft(e.target.value)}
                    onKeyDown={(e) => {
                        if (e.key === "Enter") {
                            e.preventDefault();
                            add();
                        }
                    }}
                />
                <Button type="button" variant="outline" onClick={add}>
                    <Plus size={15} className="mr-1.5" />
                    Tambah
                </Button>
            </div>
        </Card>
    );
}

export default function CustomerConfig({
    categories,
    statuses,
}: {
    categories: string[];
    statuses: string[];
}) {
    const [categoryList, setCategoryList] = React.useState(categories);
    const [statusList, setStatusList] = React.useState(statuses);
    const [busy, setBusy] = React.useState(false);
    const [saved, setSaved] = React.useState(false);
    const [error, setError] = React.useState<string | null>(null);

    const markDirty = () => {
        setSaved(false);
        setError(null);
    };

    const submit = () => {
        const cleanCategories = categoryList
            .map((c) => c.trim())
            .filter(Boolean);
        const cleanStatuses = statusList.map((s) => s.trim()).filter(Boolean);

        if (!cleanCategories.length || !cleanStatuses.length) {
            setError(
                "Kategori dan status masing-masing minimal harus punya satu item.",
            );
            return;
        }

        setBusy(true);
        setSaved(false);
        setError(null);

        router.put(
            "/settings/customer-config",
            { categories: cleanCategories, statuses: cleanStatuses },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setBusy(false);
                    setSaved(true);
                    setCategoryList(cleanCategories);
                    setStatusList(cleanStatuses);
                },
                onError: (errors) => {
                    setBusy(false);
                    setError(
                        (Object.values(errors)[0] as string) ??
                            "Gagal menyimpan. Periksa kembali isian.",
                    );
                },
            },
        );
    };

    return (
        <div className="p-7">
            <PageHeader
                title="Customer Configuration"
                description="Atur daftar kategori dan status yang tersedia saat mengelola data customer."
                action={
                    <Link
                        href="/settings"
                        className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
                    >
                        <ArrowLeft size={15} />
                        Kembali ke Settings
                    </Link>
                }
            />

            <div className="grid gap-5 md:grid-cols-2">
                <EditableList
                    icon={Layers}
                    title="Kategori Customer"
                    description="Muncul sebagai pilihan kategori saat menambah/mengubah customer."
                    items={categoryList}
                    onChange={(next) => {
                        setCategoryList(next);
                        markDirty();
                    }}
                    placeholder="Nama kategori baru..."
                />
                <EditableList
                    icon={ListChecks}
                    title="Status Customer"
                    description="Muncul sebagai pilihan status saat menambah/mengubah customer."
                    items={statusList}
                    onChange={(next) => {
                        setStatusList(next);
                        markDirty();
                    }}
                    placeholder="Nama status baru..."
                />
            </div>

            <div className="mt-5 flex items-center gap-3">
                <Button onClick={submit} disabled={busy}>
                    {busy ? (
                        <Loader2 size={15} className="mr-2 animate-spin" />
                    ) : (
                        <Save size={15} className="mr-2" />
                    )}
                    Simpan Konfigurasi
                </Button>
                {saved && (
                    <span className="inline-flex items-center gap-1.5 text-xs font-bold text-emerald-600">
                        <CheckCircle2 size={15} />
                        Tersimpan.
                    </span>
                )}
                {error && (
                    <span className="text-xs font-semibold text-rose-500">
                        {error}
                    </span>
                )}
            </div>

            <p className="mt-4 max-w-2xl text-[11px] leading-5 text-slate-400">
                Menghapus kategori/status di sini tidak mengubah data customer
                yang sudah memakainya — data lama tetap tampil apa adanya, hanya
                saja pilihan tersebut tidak lagi muncul saat menambah/mengubah
                customer berikutnya.
            </p>
        </div>
    );
}