import { Head, router, usePage } from "@inertiajs/react";
import { useState } from "react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { StatChip } from "@/components/crm/global-card";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import {
    Pencil,
    Plus,
    Power,
    Trash2,
    Users,
    Building2,
    Package,
    ShoppingCart,
    MapPinned,
    CheckCircle2,
    XCircle,
    ShieldAlert,
} from "lucide-react";

type Plan = {
    id: number;
    name: string;
    slug: string;
    monthly_price: string | number;
    max_users: number | null;
    max_customers: number | null;
    max_products: number | null;
    max_orders_monthly: number | null;
    max_visits_monthly: number | null;
    features: string[] | null;
    is_active: boolean;
    perusahaan_count: number;
};

// Konfigurasi field untuk DynamicFormDialog
const planFields: FieldConfig[] = [
    {
        name: "name",
        label: "Nama Paket",
        type: "text",
        placeholder: "Contoh: Professional Enterprise",
        required: true,
        colSpan: 2,
    },
    {
        name: "slug",
        label: "Slug Identifiers",
        type: "text",
        placeholder: "professional-enterprise",
        required: true,
        colSpan: 2,
    },
    {
        name: "monthly_price",
        label: "Harga per Bulan (IDR)",
        type: "number",
        placeholder: "0",
        required: true,
        colSpan: 2,
    },
    {
        name: "is_active",
        label: "Status Aktif",
        type: "checkbox",
        placeholder: "Paket dapat dipilih saat registrasi tenant.",
        colSpan: 2,
    },
    {
        name: "max_users",
        label: "Maksimal Users",
        type: "number",
        placeholder: "Kosong = Unlimited",
        colSpan: 1,
    },
    {
        name: "max_customers",
        label: "Maksimal Customers",
        type: "number",
        placeholder: "Kosong = Unlimited",
        colSpan: 1,
    },
    {
        name: "max_products",
        label: "Maksimal Produk",
        type: "number",
        placeholder: "Kosong = Unlimited",
        colSpan: 1,
    },
    {
        name: "max_orders_monthly",
        label: "Order / Bulan",
        type: "number",
        placeholder: "Kosong = Unlimited",
        colSpan: 1,
    },
    {
        name: "max_visits_monthly",
        label: "Visit / Bulan",
        type: "number",
        placeholder: "Kosong = Unlimited",
        colSpan: 1,
    },
    {
        name: "features",
        label: "Fitur Akses",
        type: "textarea",
        placeholder: "dashboard, customers, products, orders, advanced_reports",
        description:
            "Pisahkan fitur menggunakan koma (misal: fitur A, fitur B, fitur C).",
        colSpan: 4,
    },
];

const emptyFormValues = {
    name: "",
    slug: "",
    monthly_price: "0",
    max_users: "",
    max_customers: "",
    max_products: "",
    max_orders_monthly: "",
    max_visits_monthly: "",
    features: "",
    is_active: true,
};

const money = (value: string | number) =>
    new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        maximumFractionDigits: 0,
    }).format(Number(value || 0));

const limit = (value: number | null) =>
    value === null ? "Unlimited" : value.toLocaleString("id-ID");

export default function Plans({
    plans,
    stats,
}: {
    plans: Plan[];
    stats: {
        total: number;
        active: number;
        inactive: number;
        companies: number;
    };
}) {
    const { props } = usePage<{
        flash?: { success?: string; error?: string };
    }>();

    const [open, setOpen] = useState(false);
    const [editing, setEditing] = useState<Plan | null>(null);

    const openCreate = () => {
        setEditing(null);
        setOpen(true);
    };

    const openEdit = (plan: Plan) => {
        setEditing(plan);
        setOpen(true);
    };

    const remove = (plan: Plan) => {
        if (!window.confirm(`Hapus paket ${plan.name}?`)) return;
        router.delete(`/platform/plans/${plan.id}`, { preserveScroll: true });
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Paket Langganan", href: "/platform/plans" },
            ]}
        >
            <Head title="Paket Langganan" />
            <div className="crm-page space-y-6 pb-10">
                {/* Header Section */}
                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div>
                        <div className="flex items-center gap-2 mb-1">
                            <span className="flex h-2 w-2 rounded-full bg-indigo-500 animate-pulse" />
                            <span className="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
                                SaaS Subscription Management
                            </span>
                        </div>
                        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50 sm:text-3xl">
                            Paket Langganan
                        </h1>
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Kelola tier paket SaaS, struktur harga, batas
                            resource, dan fitur unggulan perusahaan secara
                            terpusat.
                        </p>
                    </div>
                    <Button
                        onClick={openCreate}
                        className="rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs shadow-sm h-10 px-4 gap-2 self-start md:self-auto cursor-pointer"
                    >
                        <Plus className="size-4" /> Tambah Paket Baru
                    </Button>
                </div>

                {/* Flash Messages */}
                {props.flash?.success && (
                    <div className="flex items-center gap-2.5 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-xs font-medium text-emerald-800 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-300">
                        <CheckCircle2 className="size-4 shrink-0 text-emerald-600" />
                        <span>{props.flash.success}</span>
                    </div>
                )}
                {props.flash?.error && (
                    <div className="flex items-center gap-2.5 rounded-xl border border-rose-200 bg-rose-50 p-4 text-xs font-medium text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300">
                        <ShieldAlert className="size-4 shrink-0 text-rose-600" />
                        <span>{props.flash.error}</span>
                    </div>
                )}

                {/* Stat Cards */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatChip
                        label="Total Paket"
                        value={stats.total}
                        icon={Package}
                        tone="blue"
                        description="Keseluruhan tier paket SaaS"
                        variant="compact"
                    />
                    <StatChip
                        label="Paket Aktif"
                        value={stats.active}
                        icon={CheckCircle2}
                        tone="emerald"
                        description="Tersedia untuk dipilih tenant"
                        variant="compact"
                    />
                    <StatChip
                        label="Paket Nonaktif"
                        value={stats.inactive}
                        icon={XCircle}
                        tone="orange"
                        description="Dihentikan sementara"
                        variant="compact"
                    />
                    <StatChip
                        label="Perusahaan Berlangganan"
                        value={stats.companies}
                        icon={Building2}
                        tone="violet"
                        description="Tenant aktif menggunakan plan"
                        variant="compact"
                    />
                </div>

                {/* Grid Daftar Paket Langganan */}
                <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
                    {plans.map((plan) => (
                        <Card
                            key={plan.id}
                            className={`group relative overflow-hidden rounded-2xl border border-slate-200/80 bg-white transition-all duration-300 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900 flex flex-col ${
                                plan.is_active ? "" : "opacity-60 grayscale-20"
                            }`}
                        >
                            <CardHeader className="border-b border-slate-100 bg-slate-50/50 pb-4 dark:border-slate-800 dark:bg-slate-800/40">
                                <div className="flex items-start justify-between gap-3">
                                    <div>
                                        <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100 flex items-center gap-1.5">
                                            {plan.name}
                                        </CardTitle>
                                        <span className="inline-block mt-0.5 text-[11px] font-mono font-medium text-slate-400 bg-slate-200/60 dark:bg-slate-800 px-2 py-0.5 rounded-md">
                                            {plan.slug}
                                        </span>
                                    </div>
                                    <Badge
                                        variant={
                                            plan.is_active
                                                ? "default"
                                                : "secondary"
                                        }
                                        className={`rounded-lg px-2.5 py-0.5 text-[10px] font-bold ${
                                            plan.is_active
                                                ? "bg-emerald-500/10 text-emerald-600 border-emerald-200 hover:bg-emerald-500/20"
                                                : "bg-slate-100 text-slate-500 border-slate-200"
                                        }`}
                                    >
                                        {plan.is_active ? "Aktif" : "Nonaktif"}
                                    </Badge>
                                </div>
                                <div className="mt-3 flex items-baseline gap-1">
                                    <span className="text-xl font-extrabold text-slate-900 dark:text-slate-50 tracking-tight">
                                        {money(plan.monthly_price)}
                                    </span>
                                    <span className="text-xs font-medium text-slate-400">
                                        / bulan
                                    </span>
                                </div>
                            </CardHeader>

                            <CardContent className="space-y-4 p-5 text-xs flex-1 flex flex-col justify-between">
                                <div className="space-y-3">
                                    {/* Tenant Count Info */}
                                    <div className="flex items-center justify-between rounded-xl bg-slate-50 p-2.5 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800">
                                        <span className="text-slate-500 font-medium">
                                            Perusahaan Terdaftar
                                        </span>
                                        <span className="font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/50 px-2 py-0.5 rounded-md">
                                            {plan.perusahaan_count} Tenant
                                        </span>
                                    </div>

                                    {/* Batas Sumber Daya */}
                                    <div className="space-y-2 pt-1">
                                        <p className="font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider text-[10px]">
                                            Batas Penggunaan
                                        </p>
                                        <div className="grid gap-1.5 text-slate-600 dark:text-slate-400 font-medium">
                                            <div className="flex items-center justify-between border-b border-slate-100 pb-1.5 dark:border-slate-800">
                                                <span className="flex items-center gap-2">
                                                    <Users className="size-3.5 text-slate-400" />{" "}
                                                    Users
                                                </span>
                                                <span className="font-bold text-slate-900 dark:text-slate-100">
                                                    {limit(plan.max_users)}
                                                </span>
                                            </div>
                                            <div className="flex items-center justify-between border-b border-slate-100 pb-1.5 dark:border-slate-800">
                                                <span className="flex items-center gap-2">
                                                    <Building2 className="size-3.5 text-slate-400" />{" "}
                                                    Customers
                                                </span>
                                                <span className="font-bold text-slate-900 dark:text-slate-100">
                                                    {limit(plan.max_customers)}
                                                </span>
                                            </div>
                                            <div className="flex items-center justify-between border-b border-slate-100 pb-1.5 dark:border-slate-800">
                                                <span className="flex items-center gap-2">
                                                    <Package className="size-3.5 text-slate-400" />{" "}
                                                    Produk
                                                </span>
                                                <span className="font-bold text-slate-900 dark:text-slate-100">
                                                    {limit(plan.max_products)}
                                                </span>
                                            </div>
                                            <div className="flex items-center justify-between border-b border-slate-100 pb-1.5 dark:border-slate-800">
                                                <span className="flex items-center gap-2">
                                                    <ShoppingCart className="size-3.5 text-slate-400" />{" "}
                                                    Order / Bulan
                                                </span>
                                                <span className="font-bold text-slate-900 dark:text-slate-100">
                                                    {limit(
                                                        plan.max_orders_monthly,
                                                    )}
                                                </span>
                                            </div>
                                            <div className="flex items-center justify-between">
                                                <span className="flex items-center gap-2">
                                                    <MapPinned className="size-3.5 text-slate-400" />{" "}
                                                    Visit / Bulan
                                                </span>
                                                <span className="font-bold text-slate-900 dark:text-slate-100">
                                                    {limit(
                                                        plan.max_visits_monthly,
                                                    )}
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Fitur Akses */}
                                    <div className="pt-2">
                                        <p className="mb-2 font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider text-[10px]">
                                            Fitur Akses
                                        </p>
                                        <div className="flex min-h-12 flex-wrap gap-1">
                                            {plan.features &&
                                            plan.features.length > 0 ? (
                                                plan.features.map((feature) => (
                                                    <Badge
                                                        key={feature}
                                                        variant="outline"
                                                        className="rounded-lg border-slate-200 bg-slate-50/50 text-[10px] font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                                                    >
                                                        {feature.trim()}
                                                    </Badge>
                                                ))
                                            ) : (
                                                <span className="text-[11px] text-slate-400 italic">
                                                    Tidak ada fitur spesifik
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                </div>

                                {/* Tombol Aksi Kartu */}
                                <div className="flex gap-2 pt-4 border-t border-slate-100 dark:border-slate-800">
                                    <Button
                                        variant="outline"
                                        className="flex-1 rounded-xl border-slate-200 hover:bg-slate-50 text-xs font-bold dark:border-slate-700 dark:hover:bg-slate-800 h-9 cursor-pointer"
                                        onClick={() => openEdit(plan)}
                                    >
                                        <Pencil className="mr-1.5 size-3.5 text-slate-500" />{" "}
                                        Edit
                                    </Button>
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        className="rounded-xl border-slate-200 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800 size-9 shrink-0 cursor-pointer"
                                        onClick={() =>
                                            router.patch(
                                                `/platform/plans/${plan.id}/toggle`,
                                                {},
                                                { preserveScroll: true },
                                            )
                                        }
                                        title="Ubah Status Aktif/Nonaktif"
                                    >
                                        <Power className="size-3.5 text-slate-500" />
                                    </Button>
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        className="rounded-xl border-rose-200 hover:bg-rose-50 hover:text-rose-600 dark:border-rose-900/50 dark:hover:bg-rose-950/30 size-9 shrink-0 cursor-pointer"
                                        disabled={plan.perusahaan_count > 0}
                                        onClick={() => remove(plan)}
                                        title={
                                            plan.perusahaan_count > 0
                                                ? "Paket masih digunakan perusahaan"
                                                : "Hapus Paket"
                                        }
                                    >
                                        <Trash2 className="size-3.5 text-rose-500" />
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            </div>

            {/* Menggunakan Komponen Reusable DynamicFormDialog */}
            <DynamicFormDialog
                open={open}
                onOpenChange={setOpen}
                title="Paket Langganan"
                subtitle="Atur struktur harga, pembatasan resource sistem, dan daftar fitur unggulan untuk paket SaaS."
                endpoint="/platform/plans"
                fields={planFields}
                initialValues={emptyFormValues}
                itemToEdit={editing}
                dialogSize="lg"
                submitText="Buat Paket Baru"
                editText="Simpan Perubahan"
            />
        </AppLayout>
    );
}