import { useEffect, useState, useMemo } from "react";
import { Head, router } from "@inertiajs/react";
import salesAreas from "@/routes/crm/sales-areas";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
    Search,
    MapPin,
    Users,
    Sparkles,
    CheckCircle2,
    Save,
    Loader2,
    CheckSquare,
    Square,
    AlertCircle,
} from "lucide-react";

type Area = {
    id: number;
    parent_id?: number | null;
    code: string;
    name: string;
    type: string;
    customers_count: number;
    is_active?: boolean;
    parent?: { id: number; name: string } | null;
};

type Sales = {
    id: number;
    name: string;
    email: string;
    employee_code?: string | null;
    areas: { id: number; code: string; name: string }[];
};

type Props = { sales: Sales[]; areas: Area[] };

export default function SalesAreasIndex({ sales = [], areas = [] }: Props) {
    const [selectedSalesId, setSelectedSalesId] = useState<number | null>(
        sales[0]?.id ?? null,
    );
    const [searchSales, setSearchSales] = useState("");
    const [searchArea, setSearchArea] = useState("");
    const [saving, setSaving] = useState(false);

    const selectedSales =
        sales.find((item) => item.id === selectedSalesId) ?? null;

    const initialAreaIds = useMemo(
        () => new Set(selectedSales?.areas.map((area) => area.id) ?? []),
        [selectedSales],
    );

    const [selectedAreaIds, setSelectedAreaIds] =
        useState<Set<number>>(initialAreaIds);

    useEffect(() => {
        setSelectedAreaIds(
            new Set(selectedSales?.areas.map((area) => area.id) ?? []),
        );
    }, [selectedSalesId]);

    // Deteksi Unsaved Changes
    const isDirty = useMemo(() => {
        if (selectedAreaIds.size !== initialAreaIds.size) return true;
        for (let id of selectedAreaIds) {
            if (!initialAreaIds.has(id)) return true;
        }
        return false;
    }, [selectedAreaIds, initialAreaIds]);

    const filteredSales = sales.filter((item) => {
        const keyword = searchSales.trim().toLowerCase();
        if (!keyword) return true;
        return `${item.name} ${item.email} ${item.employee_code ?? ""}`
            .toLowerCase()
            .includes(keyword);
    });

    const filteredAreas = areas.filter((area) => {
        const keyword = searchArea.trim().toLowerCase();
        if (!keyword) return true;
        return `${area.name} ${area.code} ${area.parent?.name ?? ""}`
            .toLowerCase()
            .includes(keyword);
    });

    const handleSelectSales = (id: number) => {
        if (isDirty) {
            if (
                !confirm(
                    "Ada perubahan yang belum disimpan. Yakin ingin pindah Sales?",
                )
            ) {
                return;
            }
        }
        setSelectedSalesId(id);
    };

    const toggleArea = (areaId: number) => {
        setSelectedAreaIds((previous) => {
            const next = new Set(previous);
            if (next.has(areaId)) next.delete(areaId);
            else next.add(areaId);
            return next;
        });
    };

    const handleSelectAllAreas = () => {
        if (selectedAreaIds.size === areas.length) {
            setSelectedAreaIds(new Set());
        } else {
            setSelectedAreaIds(new Set(areas.map((a) => a.id)));
        }
    };

    const save = () => {
        if (!selectedSales) return;
        setSaving(true);
        router.put(
            salesAreas.update.url(selectedSales.id),
            {
                area_ids: Array.from(selectedAreaIds),
            },
            {
                preserveScroll: true,
                onFinish: () => setSaving(false),
            },
        );
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Sales ↔ Area", href: salesAreas.index.url() },
            ]}
        >
            <Head title="Sales ↔ Area Mapping" />

            <div className="crm-page space-y-6 pb-12">
                {/* Hero / Premium Dark Gradient Banner */}
                <div className="relative overflow-hidden rounded-3xl bg-linear-to-br from-slate-950 via-slate-900 to-indigo-950 p-8 text-white shadow-xl border border-slate-800/80">
                    <div className="absolute -right-10 -top-10 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl pointer-events-none" />
                    <div className="absolute right-1/3 -bottom-10 h-48 w-48 rounded-full bg-violet-500/10 blur-2xl pointer-events-none" />

                    <div className="relative z-10 flex flex-col gap-3">
                        <div className="inline-flex items-center gap-2 rounded-full bg-indigo-500/15 px-3.5 py-1 text-xs font-semibold text-indigo-300 border border-indigo-400/20 w-fit backdrop-blur-md">
                            <Sparkles className="size-3.5 text-indigo-400 animate-pulse" />
                            <span>CRM Mapping Engine</span>
                        </div>
                        <h1 className="text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-linear-to-r from-white via-slate-100 to-indigo-200">
                            Sales ↔ Area Mapping
                        </h1>
                        <p className="text-sm text-muted-foreground/60/90 leading-relaxed max-w-2xl font-normal">
                            Kelola alokasi wilayah operasional Sales secara
                            terstruktur dan efisien dalam satu tempat.
                        </p>
                    </div>
                </div>

                {/* Content Grid */}
                <div className="grid gap-6 lg:grid-cols-12 items-start">
                    {/* Panel Kiri: Sales List */}
                    <div className="lg:col-span-4">
                        <div className="rounded-3xl border border-border/80 bg-card/90 backdrop-blur-xl p-5 shadow-sm space-y-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <div className="p-2 rounded-xl bg-indigo-50 text-indigo-600">
                                        <Users className="size-4" />
                                    </div>
                                    <h2 className="font-bold text-foreground text-base">
                                        Pilih Sales
                                    </h2>
                                </div>
                                <span className="text-xs font-medium text-muted-foreground/80">
                                    {filteredSales.length} Orang
                                </span>
                            </div>

                            {/* Search Sales */}
                            <div className="relative">
                                <Search className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/80" />
                                <Input
                                    id="sales-search"
                                    placeholder="Cari nama, email, kode..."
                                    value={searchSales}
                                    onChange={(e) =>
                                        setSearchSales(e.target.value)
                                    }
                                    className="pl-10 rounded-2xl border-border bg-muted/50/70 focus:bg-card focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all text-sm"
                                />
                            </div>

                            {/* Sales Item List (Custom Scrollbar Spacing) */}
                            <div className="space-y-2 max-h-125 overflow-y-auto pr-2 -mr-1">
                                {filteredSales.length > 0 ? (
                                    filteredSales.map((item) => {
                                        const isSelected =
                                            selectedSalesId === item.id;
                                        return (
                                            <div
                                                key={item.id}
                                                onClick={() =>
                                                    handleSelectSales(item.id)
                                                }
                                                className={`group relative flex items-center justify-between p-3.5 rounded-2xl cursor-pointer transition-all duration-200 border ${
                                                    isSelected
                                                        ? "border-indigo-600/80 bg-linear-to-r from-indigo-50/80 to-slate-50 text-indigo-950 shadow-sm ring-1 ring-indigo-500/20"
                                                        : "border-slate-100 bg-card hover:bg-muted/50/80 hover:border-border text-foreground/80"
                                                }`}
                                            >
                                                <div className="min-w-0 flex-1">
                                                    <div className="flex items-center gap-2">
                                                        <p
                                                            className={`font-semibold text-sm truncate ${isSelected ? "text-indigo-950" : "text-foreground"}`}
                                                        >
                                                            {item.name}
                                                        </p>
                                                        {item.employee_code && (
                                                            <span className="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded-md bg-muted text-muted-foreground border border-border/50">
                                                                {
                                                                    item.employee_code
                                                                }
                                                            </span>
                                                        )}
                                                    </div>
                                                    <p className="text-xs text-muted-foreground/80 truncate mt-0.5">
                                                        {item.email}
                                                    </p>
                                                </div>
                                                <div className="ml-3 shrink-0">
                                                    <Badge
                                                        variant="secondary"
                                                        className={`rounded-xl px-2.5 py-1 text-xs font-semibold transition-colors ${
                                                            isSelected
                                                                ? "bg-indigo-600 text-white hover:bg-indigo-600"
                                                                : "bg-muted text-muted-foreground group-hover:bg-slate-200/80"
                                                        }`}
                                                    >
                                                        {item.areas.length} Area
                                                    </Badge>
                                                </div>
                                            </div>
                                        );
                                    })
                                ) : (
                                    <div className="p-8 text-center text-xs text-muted-foreground/80 bg-muted/50/50 rounded-2xl border border-dashed border-border">
                                        Sales tidak ditemukan.
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Panel Kanan: Area Selection Grid */}
                    <div className="lg:col-span-8">
                        <div className="rounded-3xl border border-border/80 bg-card/90 backdrop-blur-xl p-6 shadow-sm space-y-6">
                            {selectedSales ? (
                                <>
                                    {/* Header Panel Kanan */}
                                    <div className="flex flex-col gap-4 pb-5 border-b border-slate-100 sm:flex-row sm:items-center sm:justify-between">
                                        <div className="space-y-1">
                                            <div className="flex items-center gap-2.5 flex-wrap">
                                                <div className="p-2 rounded-xl bg-indigo-50 text-indigo-600">
                                                    <MapPin className="size-4" />
                                                </div>
                                                <h2 className="text-lg font-bold text-foreground">
                                                    Area untuk{" "}
                                                    <span className="text-indigo-600">
                                                        {selectedSales.name}
                                                    </span>
                                                </h2>
                                                {isDirty && (
                                                    <span className="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-700 border border-amber-200/80 px-2.5 py-0.5 rounded-full animate-fade-in">
                                                        <AlertCircle className="size-3" />{" "}
                                                        Belum Disimpan
                                                    </span>
                                                )}
                                            </div>
                                            <p className="text-xs text-muted-foreground pl-1">
                                                Pilih wilayah tanggung jawab
                                                sales ini (
                                                {selectedAreaIds.size} dipilih).
                                            </p>
                                        </div>

                                        <div className="flex items-center gap-2 self-end sm:self-auto">
                                            <Button
                                                type="button"
                                                variant="outline"
                                                onClick={handleSelectAllAreas}
                                                className="rounded-xl border-border text-foreground/80 hover:bg-muted/50 text-xs font-semibold h-10 px-3.5"
                                            >
                                                {selectedAreaIds.size ===
                                                areas.length ? (
                                                    <>
                                                        <Square className="size-3.5 mr-1.5 text-muted-foreground/80" />{" "}
                                                        Batal Semua
                                                    </>
                                                ) : (
                                                    <>
                                                        <CheckSquare className="size-3.5 mr-1.5 text-indigo-600" />{" "}
                                                        Pilih Semua
                                                    </>
                                                )}
                                            </Button>

                                            <Button
                                                onClick={save}
                                                disabled={saving || !isDirty}
                                                className={`rounded-xl h-10 px-5 font-semibold text-xs shadow-md transition-all duration-200 ${
                                                    isDirty
                                                        ? "bg-indigo-600 hover:bg-indigo-500 text-white shadow-indigo-200"
                                                        : "bg-muted text-muted-foreground/80 shadow-none border border-border"
                                                }`}
                                            >
                                                {saving ? (
                                                    <>
                                                        <Loader2 className="size-3.5 animate-spin mr-1.5" />{" "}
                                                        Menyimpan...
                                                    </>
                                                ) : (
                                                    <>
                                                        <Save className="size-3.5 mr-1.5" />{" "}
                                                        Simpan Mapping
                                                    </>
                                                )}
                                            </Button>
                                        </div>
                                    </div>

                                    {/* Toolbar Filter Area */}
                                    <div className="relative">
                                        <Search className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/80" />
                                        <Input
                                            placeholder="Cari nama area, kode, atau parent area..."
                                            value={searchArea}
                                            onChange={(e) =>
                                                setSearchArea(e.target.value)
                                            }
                                            className="pl-10 rounded-xl border-border bg-muted/50/50 text-xs focus:bg-card"
                                        />
                                    </div>

                                    {/* Area Checkbox Grid */}
                                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 max-h-130 overflow-y-auto pr-1">
                                        {filteredAreas.map((area) => {
                                            const checked = selectedAreaIds.has(
                                                area.id,
                                            );
                                            return (
                                                <label
                                                    key={area.id}
                                                    className={`relative flex items-start gap-3 p-4 rounded-2xl border-2 cursor-pointer transition-all duration-200 select-none ${
                                                        checked
                                                            ? "border-indigo-600/80 bg-indigo-50/30 shadow-sm ring-1 ring-indigo-500/10"
                                                            : "border-slate-100 bg-muted/50/40 hover:bg-card hover:border-border"
                                                    }`}
                                                >
                                                    <Checkbox
                                                        checked={checked}
                                                        onCheckedChange={() =>
                                                            toggleArea(area.id)
                                                        }
                                                        className="mt-0.5 rounded-lg data-[state=checked]:bg-indigo-600 data-[state=checked]:border-indigo-600"
                                                    />

                                                    <div className="space-y-1 min-w-0 flex-1">
                                                        <div className="flex items-center justify-between gap-1">
                                                            <p className="font-bold text-sm text-foreground truncate">
                                                                {area.name}
                                                            </p>
                                                            {checked && (
                                                                <CheckCircle2 className="size-4 text-indigo-600 shrink-0" />
                                                            )}
                                                        </div>

                                                        <p className="text-[11px] text-muted-foreground flex flex-wrap items-center gap-1 font-medium">
                                                            <span className="text-foreground/80 bg-slate-200/60 px-1.5 py-0.5 rounded font-mono text-[10px]">
                                                                {area.code}
                                                            </span>
                                                            {area.parent
                                                                ?.name && (
                                                                <span className="truncate">
                                                                    •{" "}
                                                                    {
                                                                        area
                                                                            .parent
                                                                            .name
                                                                    }
                                                                </span>
                                                            )}
                                                            <span>
                                                                •{" "}
                                                                {
                                                                    area.customers_count
                                                                }{" "}
                                                                customer
                                                            </span>
                                                        </p>

                                                        {area.is_active ===
                                                            false && (
                                                            <span className="inline-block mt-1 rounded-full bg-rose-100 px-2 py-0.5 text-[10px] font-bold text-rose-600">
                                                                Nonaktif
                                                            </span>
                                                        )}
                                                    </div>
                                                </label>
                                            );
                                        })}
                                    </div>

                                    {/* Empty Area */}
                                    {filteredAreas.length === 0 && (
                                        <div className="py-16 text-center text-sm text-muted-foreground/80 space-y-2 bg-muted/50/50 rounded-2xl border border-dashed border-border">
                                            <MapPin className="size-8 mx-auto text-muted-foreground/60" />
                                            <p className="font-medium text-muted-foreground">
                                                Tidak ada area yang cocok.
                                            </p>
                                        </div>
                                    )}
                                </>
                            ) : (
                                <div className="py-24 text-center text-muted-foreground/80 space-y-3 bg-muted/50/50 rounded-2xl border border-dashed border-border">
                                    <Users className="size-10 mx-auto text-muted-foreground/60" />
                                    <p className="text-sm font-semibold text-muted-foreground">
                                        Pilih Sales di sebelah kiri untuk
                                        mengatur wilayah area.
                                    </p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}