import React, { useEffect, useMemo, useState } from "react";
import { Head, router } from "@inertiajs/react";
import {
    UserPlus,
    Building2,
    Users,
    UserCheck,
    UserX,
    Sparkles,
    Mail,
    Phone,
    MapPin,
    UsersRound,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
    DataTable,
    Column,
    PaginatedData,
    FilterConfig,
} 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";
import { StatChip } from "@/components/crm/global-card";
import AppLayout from "@/layouts/app-layout";

export interface Customer {
    id: number;
    customer_category_id?: number | null;
    team_id?: number | null;
    sales_id?: number | null;
    area_id?: number | null;
    code: string | null;
    name: string;
    address: string | null;
    latitude?: string | number | null;
    longitude?: string | number | null;
    phone: string | null;
    email: string | null;
    contact_person: string | null;
    type: "individual" | "company";
    credit_limit: string | number | null;
    status: "active" | "inactive";
    notes?: string | null;
    category?: { id: number; name: string } | null;
    team?: { id: number; name: string } | null;
    area?: { id: number; code?: string; name: string } | null;
    sales?: { id: number; name: string } | null;
    created_at?: string;
}

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

interface IndexProps {
    customers: PaginatedData<Customer>;
    categories: Option[];
    teams: Option[];
    salesUsers: Option[];
    areas: Option[];
    filters: {
        search: string;
        status: string;
        category_id: number | null;
        sales_id: number | null;
        area_id: number | null;
    };
    stats: {
        total: number;
        active: number;
        inactive: number;
        areas: number;
        categories: number;
    };
}

const getInitials = (name: string) =>
    name
        .trim()
        .split(/\s+/)
        .filter(Boolean)
        .map((n) => n[0])
        .join("")
        .substring(0, 2)
        .toUpperCase();

export default function CustomerIndex({
    customers,
    categories,
    teams,
    salesUsers,
    areas,
    filters: serverFilters,
    stats,
}: IndexProps) {
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [isViewOpen, setIsViewOpen] = useState(false);
    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
    const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(
        null,
    );
    const [isDeleting, setIsDeleting] = useState(false);

    const [statusFilter, setStatusFilter] = useState(
        serverFilters.status ?? "",
    );
    const [categoryFilter, setCategoryFilter] = useState(
        serverFilters.category_id ? String(serverFilters.category_id) : "",
    );
    const [salesFilter, setSalesFilter] = useState(
        serverFilters.sales_id ? String(serverFilters.sales_id) : "",
    );
    const [areaFilter, setAreaFilter] = useState(
        serverFilters.area_id ? String(serverFilters.area_id) : "",
    );

    useEffect(() => {
        setStatusFilter(serverFilters.status ?? "");
        setCategoryFilter(
            serverFilters.category_id ? String(serverFilters.category_id) : "",
        );
        setSalesFilter(
            serverFilters.sales_id ? String(serverFilters.sales_id) : "",
        );
        setAreaFilter(
            serverFilters.area_id ? String(serverFilters.area_id) : "",
        );
    }, [serverFilters]);

    const handleCreate = () => {
        setSelectedCustomer(null);
        setIsFormOpen(true);
    };

    const handleEdit = (customer: Customer) => {
        setSelectedCustomer(customer);
        setIsFormOpen(true);
    };

    const handleView = (customer: Customer) => {
        setSelectedCustomer(customer);
        setIsViewOpen(true);
    };

    const handleDeleteClick = (customer: Customer) => {
        setSelectedCustomer(customer);
        setIsDeleteOpen(true);
    };

    const handleConfirmDelete = () => {
        if (!selectedCustomer) return;
        setIsDeleting(true);

        router.delete(`/crm/customers/${selectedCustomer.id}`, {
            preserveScroll: true,
            onSuccess: () => {
                setIsDeleteOpen(false);
                setSelectedCustomer(null);
            },
            onFinish: () => setIsDeleting(false),
        });
    };

    const formFields: FieldConfig[] = useMemo(
        () => [
            {
                name: "name",
                label: "Nama Customer",
                type: "text",
                placeholder: "Masukkan nama customer",
                required: true,
                colSpan: 2,
            },
            {
                name: "code",
                label: "Kode Customer",
                type: "text",
                placeholder: "CUS-0001",
                colSpan: 2,
            },
            {
                name: "customer_category_id",
                label: "Kategori",
                type: "select",
                colSpan: 2,
                options: categories.map((x) => ({
                    label: x.name,
                    value: x.id,
                })),
            },
            {
                name: "type",
                label: "Tipe Customer",
                type: "select",
                required: true,
                colSpan: 2,
                options: [
                    { label: "Perusahaan", value: "company" },
                    { label: "Individual", value: "individual" },
                ],
            },
            {
                name: "phone",
                label: "Nomor Telepon",
                type: "text",
                placeholder: "+62 812-3456-7890",
                colSpan: 2,
            },
            {
                name: "email",
                label: "Email",
                type: "email",
                placeholder: "customer@domain.com",
                colSpan: 2,
            },
            {
                name: "contact_person",
                label: "Contact Person",
                type: "text",
                placeholder: "Nama PIC",
                colSpan: 2,
            },
            {
                name: "status",
                label: "Status",
                type: "select",
                required: true,
                colSpan: 2,
                options: [
                    { label: "Aktif", value: "active" },
                    { label: "Tidak Aktif", value: "inactive" },
                ],
            },
            {
                name: "team_id",
                label: "Team",
                type: "select",
                colSpan: 2,
                options: teams.map((x) => ({ label: x.name, value: x.id })),
            },
            {
                name: "sales_id",
                label: "Sales",
                type: "combobox",
                colSpan: 2,
                options: salesUsers.map((x) => ({
                    label: x.name,
                    value: x.id,
                })),
            },
            {
                name: "area_id",
                label: "Area",
                type: "select",
                colSpan: 2,
                options: areas.map((x) => ({
                    label: `${x.code ? `${x.code} - ` : ""}${x.name}`,
                    value: x.id,
                })),
            },
            {
                name: "credit_limit",
                label: "Limit Kredit",
                type: "number",
                colSpan: 2,
                placeholder: "0",
            },
            {
                name: "address",
                label: "Alamat",
                type: "textarea",
                rows: 3,
                colSpan: 4,
                placeholder: "Alamat lengkap customer",
            },
            {
                name: "notes",
                label: "Catatan",
                type: "textarea",
                rows: 3,
                colSpan: 4,
                placeholder: "Catatan tambahan",
            },
            {
                name: "location",
                label: "Lokasi Customer",
                type: "location",
                longitudeName: "longitude",
                colSpan: 4,
                description:
                    "Opsional. Area akan diisi otomatis berdasarkan koordinat jika area belum dipilih.",
            },
        ],
        [categories, teams, salesUsers, areas],
    );

    const initialFormValues = {
        customer_category_id: "",
        team_id: "",
        sales_id: "",
        area_id: "",
        code: "",
        name: "",
        address: "",
        latitude: "",
        longitude: "",
        phone: "",
        email: "",
        contact_person: "",
        type: "company",
        credit_limit: "0",
        status: "active",
        notes: "",
    };

    const viewSchema: ViewDetailSchema<Customer>[] = [
        {
            label: "Nama",
            render: (item) => (
                <span className="font-semibold">{item.name}</span>
            ),
        },
        { label: "Kode", render: (item) => item.code || "-" },
        {
            label: "Tipe",
            render: (item) =>
                item.type === "company" ? "Perusahaan" : "Individual",
        },
        {
            label: "Email",
            render: (item) => (
                <div className="flex items-center gap-2">
                    <Mail className="size-4 text-muted-foreground/80" />
                    {item.email || "-"}
                </div>
            ),
        },
        {
            label: "Telepon",
            render: (item) => (
                <div className="flex items-center gap-2">
                    <Phone className="size-4 text-muted-foreground/80" />
                    {item.phone || "-"}
                </div>
            ),
        },
        { label: "PIC", render: (item) => item.contact_person || "-" },
        { label: "Kategori", render: (item) => item.category?.name || "-" },
        { label: "Team", render: (item) => item.team?.name || "-" },
        { label: "Sales", render: (item) => item.sales?.name || "-" },
        {
            label: "Area",
            render: (item) => (
                <div className="flex items-center gap-2">
                    <MapPin className="size-4 text-muted-foreground/80" />
                    {item.area?.name || "-"}
                </div>
            ),
        },
        {
            label: "Status",
            render: (item) => (
                <span
                    className={
                        item.status === "active"
                            ? "text-emerald-700"
                            : "text-muted-foreground"
                    }
                >
                    {item.status === "active" ? "Aktif" : "Tidak Aktif"}
                </span>
            ),
        },
    ];

    const columns: Column<Customer>[] = [
        {
            header: "Nama Pelanggan",
            accessor: "name",
            sortable: true,
            cell: (item) => (
                <div className="flex items-center gap-3">
                    <div className="flex size-10 items-center justify-center rounded-xl bg-indigo-600 text-xs font-bold text-white shadow-sm">
                        {getInitials(item.name)}
                    </div>
                    <div className="min-w-0">
                        <div className="truncate font-semibold text-foreground">
                            {item.name}
                        </div>
                        <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
                            <Building2 className="size-3 text-muted-foreground/80" />
                            {item.code || "Tanpa kode"}
                        </div>
                    </div>
                </div>
            ),
        },
        {
            header: "Kontak",
            cell: (item) => (
                <div className="space-y-1 text-xs">
                    <div className="flex items-center gap-1.5 text-foreground/80">
                        <Mail className="size-3.5 text-muted-foreground/80" />
                        <span className="max-w-48 truncate">
                            {item.email || "-"}
                        </span>
                    </div>
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                        <Phone className="size-3.5 text-muted-foreground/80" />
                        <span>{item.phone || "-"}</span>
                    </div>
                </div>
            ),
        },
        {
            header: "Segmentasi",
            cell: (item) => (
                <div className="space-y-1 text-xs">
                    <div className="font-medium text-foreground/80">
                        {item.category?.name || "Tanpa kategori"}
                    </div>
                    <div className="flex items-center gap-1.5 text-muted-foreground">
                        <MapPin className="size-3.5 text-muted-foreground/80" />
                        {item.area?.name || "Tanpa area"}
                    </div>
                </div>
            ),
        },
        {
            header: "Sales / Team",
            cell: (item) => (
                <div className="space-y-1 text-xs">
                    <div className="font-medium text-foreground/80">
                        {item.sales?.name || "Belum ditugaskan"}
                    </div>
                    <div className="text-muted-foreground/80">
                        {item.team?.name || "Tanpa team"}
                    </div>
                </div>
            ),
        },
        {
            header: "Status",
            accessor: "status",
            sortable: true,
            className: "text-center",
            cell: (item) => (
                <span
                    className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold ${item.status === "active" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-border bg-muted text-muted-foreground"}`}
                >
                    <span
                        className={`size-1.5 rounded-full ${item.status === "active" ? "bg-emerald-500" : "bg-slate-400"}`}
                    />
                    {item.status === "active" ? "Aktif" : "Tidak Aktif"}
                </span>
            ),
        },
    ];

    const filters: FilterConfig[] = [
        {
            key: "status",
            label: "Status",
            type: "select",
            value: statusFilter,
            onChange: setStatusFilter,
            options: [
                { label: "Semua Status", value: "" },
                { label: "Aktif", value: "active" },
                { label: "Tidak Aktif", value: "inactive" },
            ],
        },
        {
            key: "category_id",
            label: "Kategori",
            type: "select",
            value: categoryFilter,
            onChange: setCategoryFilter,
            options: [
                { label: "Semua Kategori", value: "" },
                ...categories.map((x) => ({ label: x.name, value: x.id })),
            ],
        },
        {
            key: "sales_id",
            label: "Sales",
            type: "select",
            value: salesFilter,
            onChange: setSalesFilter,
            options: [
                { label: "Semua Sales", value: "" },
                ...salesUsers.map((x) => ({ label: x.name, value: x.id })),
            ],
        },
        {
            key: "area_id",
            label: "Area",
            type: "select",
            value: areaFilter,
            onChange: setAreaFilter,
            options: [
                { label: "Semua Area", value: "" },
                ...areas.map((x) => ({ label: x.name, value: x.id })),
            ],
        },
    ];

    const totalCustomers = stats.total ?? customers.total;
    const activeCustomers = stats.active ?? 0;
    const inactiveCustomers = stats.inactive ?? 0;

    return (
        <AppLayout
            breadcrumbs={[{ title: "Customers", href: "/crm/customers" }]}
        >
            <Head title="Kelola Pelanggan (CRM)" />

            <div className="crm-page space-y-6 pb-10">
                <section className="relative overflow-hidden rounded-2xl bg-linear-to-r from-slate-900 via-indigo-950 to-slate-900 p-6 text-white shadow-xl md:p-8">
                    <div className="pointer-events-none absolute -bottom-10 -right-10 size-64 rounded-full bg-indigo-500/10 blur-3xl" />
                    <div className="relative z-10 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                        <div className="space-y-2">
                            <div className="inline-flex items-center gap-2 rounded-full border border-indigo-400/30 bg-indigo-500/20 px-3 py-1 text-xs font-medium text-indigo-300">
                                <Sparkles className="size-3.5" /> Customer
                                Relationship Management
                            </div>
                            <h1 className="text-2xl font-extrabold tracking-tight md:text-3xl">
                                Manajemen Pelanggan
                            </h1>
                            <p className="max-w-xl text-sm leading-relaxed text-muted-foreground/60">
                                Kelola pelanggan, kontak, segmentasi, sales,
                                team, dan area dari satu tempat.
                            </p>
                        </div>
                        <Button
                            onClick={handleCreate}
                            className="gap-2 self-start rounded-xl border border-indigo-400/30 bg-indigo-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-indigo-500/30 hover:bg-indigo-600 sm:self-auto"
                        >
                            <UserPlus className="size-4" /> Tambah Pelanggan
                        </Button>
                    </div>
                </section>

                <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    <StatChip
                        icon={Users}
                        label="Total Pelanggan"
                        value={totalCustomers}
                        tone="violet"
                        description="Seluruh pelanggan tenant"
                    />
                    <StatChip
                        icon={UserCheck}
                        label="Pelanggan Aktif"
                        value={activeCustomers}
                        tone="emerald"
                        trend={
                            <span className="text-muted-foreground">
                                {totalCustomers
                                    ? Math.round(
                                          (activeCustomers / totalCustomers) *
                                              100,
                                      )
                                    : 0}
                                %
                            </span>
                        }
                        description="Status aktif"
                    />
                    <StatChip
                        icon={UserX}
                        label="Tidak Aktif"
                        value={inactiveCustomers}
                        tone="rose"
                        description="Status tidak aktif"
                    />
                    <StatChip
                        icon={UsersRound}
                        label="Kategori / Area"
                        value={`${stats.categories} / ${stats.areas}`}
                        tone="blue"
                        description="Master data aktif"
                    />
                </div>

                <section className="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-xs">
                    <div className="border-b border-slate-100 p-5">
                        <h2 className="text-base font-bold text-foreground">
                            Daftar Pelanggan
                        </h2>
                        <p className="text-xs text-muted-foreground">
                            Pencarian dan filter menggunakan data yang sama
                            dengan backend.
                        </p>
                    </div>
                    <div className="p-5">
                        <DataTable
                            data={customers}
                            columns={columns}
                            filters={filters}
                            showNumber
                            useSkeleton={true}
                            searchPlaceholder="Cari nama, kode, email, atau telepon..."
                            searchValue={serverFilters.search}
                            baseUrl="/crm/customers"
                            primaryKey="id"
                            onView={handleView}
                            onEdit={handleEdit}
                            onDelete={handleDeleteClick}
                        />
                    </div>
                </section>

                <DynamicFormDialog
                    open={isFormOpen}
                    onOpenChange={setIsFormOpen}
                    title="Pelanggan"
                    subtitle="Lengkapi data customer. Field yang tersedia mengikuti kontrak backend CRM."
                    endpoint="/crm/customers"
                    fields={formFields}
                    initialValues={initialFormValues}
                    itemToEdit={selectedCustomer}
                    primaryKey="id"
                    dialogSize="xl"
                    icon={<Building2 className="size-5 text-indigo-600" />}
                />

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

                <ConfirmDeleteDialog
                    open={isDeleteOpen}
                    onOpenChange={setIsDeleteOpen}
                    onConfirm={handleConfirmDelete}
                    loading={isDeleting}
                    title="Hapus Pelanggan?"
                    itemName={selectedCustomer?.name}
                />
            </div>
        </AppLayout>
    );
}