import { useState } from "react";
import { Head, router } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Plus, MapPin, Sparkles } from "lucide-react";
import areasRoutes from "@/routes/crm/areas";

import {
    DataTable,
    Column,
    PaginatedData,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import {
    DynamicViewDialog,
    ViewDetailSchema,
} from "@/components/crm/global-viewdialog";
import { ConfirmDeleteDialog } from "@/components/crm/global-alertdialog";

type Area = {
    id: number;
    code: string;
    name: string;
    type: string;
    parent_id?: number | null;
    parent?: { id: number; name: string } | null;
    latitude?: string | number | null;
    longitude?: string | number | null;
    radius_meters?: number | null;
    is_active: boolean;
    children_count: number;
    teams_count: number;
    customers_count: number;
    sales_count: number;
};

type Option = { id: number; code: string; name: string };

type Props = {
    areas: PaginatedData<Area>;
    parents: Option[];
};

export default function AreasIndex({ areas, parents }: Props) {
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [isViewOpen, setIsViewOpen] = useState(false);
    const [isDeleteOpen, setIsDeleteOpen] = useState(false);

    const [selectedItem, setSelectedItem] = useState<Area | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    const initialValues = {
        code: "",
        name: "",
        type: "territory",
        parent_id: "",
        latitude: "",
        longitude: "",
        radius_meters: "",
        is_active: true,
    };

    const fields: FieldConfig[] = [
        {
            name: "code",
            label: "Kode Area",
            type: "text",
            placeholder: "JKT-SEL",
            required: true,
            colSpan: 2,
        },
        {
            name: "name",
            label: "Nama Area",
            type: "text",
            placeholder: "Jakarta Selatan",
            required: true,
            colSpan: 2,
        },
        {
            name: "type",
            label: "Tipe Area",
            type: "select",
            required: true,
            colSpan: 2,
            options: [
                { label: "Territory", value: "territory" },
                { label: "Provinsi", value: "province" },
                { label: "Kota/Kabupaten", value: "city" },
                { label: "Kecamatan", value: "district" },
                { label: "Custom", value: "custom" },
            ],
        },
        {
            name: "parent_id",
            label: "Parent Area",
            type: "select",
            colSpan: 2,
            options: [
                { label: "Tidak ada parent", value: "" },
                ...parents
                    .filter((p) => p.id !== selectedItem?.id)
                    .map((p) => ({
                        label: `${p.code} — ${p.name}`,
                        value: String(p.id),
                    })),
            ],
        },
        {
            name: "latitude",
            longitudeName: "longitude",
            radiusName: "radius_meters",
            label: "Lokasi & Pemetaan Area",
            type: "location",
            colSpan: 4,
        },
        {
            name: "radius_meters",
            label: "Radius Area (Meter)",
            type: "number",
            placeholder: "5000",
            colSpan: 4,
        },
        {
            name: "is_active",
            type: "checkbox",
            placeholder: "Area Aktif",
            colSpan: 4,
        },
    ];

    // Kolom bersih tanpa perlu menyusun manual "Aksi" atau "Nomor"
    const columns: Column<Area>[] = [
        {
            header: "KODE & NAMA AREA",
            headerClassName: "text-start font-bold text-foreground",
            className: "w-1/4",
            sortable: true,
            sortKey: "name",
            cell: (item) => (
                <div>
                    <div className="font-semibold text-foreground">
                        {item.name}
                    </div>
                    <div className="text-xs font-mono text-muted-foreground uppercase">
                        {item.code} {item.type ? `• ${item.type}` : ""}
                    </div>
                </div>
            ),
        },
        {
            header: "PARENT",
            className: "w-1/4 text-center",
            cell: (item) => (
                <span className="text-sm text-muted-foreground">
                    {item.parent?.name ?? "-"}
                </span>
            ),
        },
        {
            header: "JUMLAH PELANGGAN",
            className: "text-center",
            sortable: true,
            sortKey: "customers_count",
            cell: (item) => (
                <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 whitespace-nowrap">
                    <span className="size-1.5 rounded-full bg-emerald-500" />
                    {item.customers_count} Pelanggan
                </span>
            ),
        },
        {
            header: "STATUS",
            className: "text-center",
            sortable: true,
            sortKey: "is_active",
            cell: (item) => (
                <span
                    className={`inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                        item.is_active
                            ? "bg-indigo-50 text-indigo-700 border border-indigo-200"
                            : "bg-muted text-muted-foreground border border-border"
                    }`}
                >
                    {item.is_active ? "Aktif" : "Nonaktif"}
                </span>
            ),
        },
    ];

    const viewSchema: ViewDetailSchema<Area>[] = [
        { label: "Kode Area", render: (item) => item.code },
        { label: "Nama Area", render: (item) => item.name },
        {
            label: "Tipe",
            render: (item) => <span className="capitalize">{item.type}</span>,
        },
        { label: "Parent Area", render: (item) => item.parent?.name ?? "-" },
        { label: "Latitude", render: (item) => item.latitude ?? "-" },
        { label: "Longitude", render: (item) => item.longitude ?? "-" },
        {
            label: "Radius",
            render: (item) =>
                item.radius_meters ? `${item.radius_meters} Meter` : "-",
        },
        {
            label: "Status",
            render: (item) => (item.is_active ? "Aktif" : "Nonaktif"),
        },
        {
            label: "Jumlah Tim",
            render: (item) => `${item.teams_count} Team`,
        },
        {
            label: "Jumlah Pelanggan",
            render: (item) => `${item.customers_count} Customer`,
        },
        {
            label: "Jumlah Sales",
            render: (item) => `${item.sales_count} Sales`,
        },
    ];

    const handleDelete = () => {
        if (!selectedItem) return;

        setIsDeleting(true);
        router.delete(areasRoutes.destroy.url(selectedItem.id), {
            onFinish: () => {
                setIsDeleting(false);
                setIsDeleteOpen(false);
                setSelectedItem(null);
            },
        });
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Master Area", href: areasRoutes.index.url() },
            ]}
        >
            <Head title="Master Area" />

            <div className="crm-page space-y-6 pb-10">
                <div className="relative overflow-hidden rounded-2xl bg-[#0F172A] p-6 text-white shadow-xl md:p-8">
                    <div className="absolute -right-10 -top-10 h-64 w-64 rounded-full bg-indigo-500/20 blur-3xl" />
                    <div className="absolute right-40 -bottom-10 h-48 w-48 rounded-full bg-blue-500/20 blur-2xl" />

                    <div className="relative z-10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                        <div className="space-y-3 max-w-2xl">
                            <div className="inline-flex items-center gap-2 rounded-full bg-indigo-500/10 px-3 py-1 text-xs font-medium text-indigo-300 ring-1 ring-inset ring-indigo-500/30 backdrop-blur-sm">
                                <Sparkles className="size-3.5 text-indigo-400" />
                                <span>CRM Territory Engine</span>
                            </div>
                            <h1 className="text-3xl font-bold tracking-tight text-white md:text-4xl">
                                Master Area
                            </h1>
                            <p className="text-sm text-muted-foreground/60 leading-relaxed">
                                Kelompokkan dan atur wilayah operasional sales,
                                pelanggan, serta pemetaan koverasi area Anda
                                secara efisien untuk meningkatkan penargetan dan
                                retensi pasar.
                            </p>
                        </div>

                        <Button
                            onClick={() => {
                                setSelectedItem(null);
                                setIsFormOpen(true);
                            }}
                            className="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-600/30 hover:bg-indigo-500 transition-all duration-200"
                        >
                            <Plus className="size-4" /> Tambah Area
                        </Button>
                    </div>
                </div>

                <div className="rounded-2xl border border-border/80 bg-card p-6 shadow-sm">
                    <div className="mb-6 space-y-1">
                        <div className="flex items-center gap-2 text-foreground font-bold text-lg">
                            <MapPin className="size-5 text-indigo-600" />
                            <h2>Daftar Master Area</h2>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            Kelola master data klasifikasi dan cakupan wilayah
                            bisnis Anda
                        </p>
                    </div>

                    {/* Menggunakan Handler bawaan DataTable */}
                    <DataTable
                        data={areas}
                        columns={columns}
                        searchPlaceholder="Cari kode atau nama area..."
                        baseUrl={areasRoutes.index.url()}
                        showNumber
                        onView={(item) => {
                            setSelectedItem(item);
                            setIsViewOpen(true);
                        }}
                        onEdit={(item) => {
                            setSelectedItem(item);
                            setIsFormOpen(true);
                        }}
                        onDelete={(item) => {
                            setSelectedItem(item);
                            setIsDeleteOpen(true);
                        }}
                    />
                </div>
            </div>

            <DynamicFormDialog
                open={isFormOpen}
                onOpenChange={setIsFormOpen}
                title="Area"
                endpoint={areasRoutes.store.url()}
                fields={fields}
                initialValues={initialValues}
                itemToEdit={selectedItem}
                dialogSize="lg"
            />

            <DynamicViewDialog
                open={isViewOpen}
                onOpenChange={setIsViewOpen}
                title="Area"
                data={selectedItem}
                schema={viewSchema}
            />

            <ConfirmDeleteDialog
                open={isDeleteOpen}
                onOpenChange={setIsDeleteOpen}
                onConfirm={handleDelete}
                loading={isDeleting}
                title="Hapus Area?"
                description={`Apakah Anda yakin ingin menghapus area "${selectedItem?.name}"? Tindakan ini tidak dapat dibatalkan.`}
            />
        </AppLayout>
    );
}