import { Head, router, usePage } from "@inertiajs/react";
import { useState } from "react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { StatChip } from "@/components/crm/global-card";
import {
    DataTable,
    Column,
    FilterConfig,
} from "@/components/crm/global-datatable";
import {
    DynamicFormDialog,
    FieldConfig,
} from "@/components/crm/global-formdialog";
import {
    Building2,
    CalendarClock,
    CheckCircle2,
    Clock3,
    CreditCard,
    Pencil,
    XCircle,
} from "lucide-react";

type Plan = {
    id: number;
    name: string;
    slug: string;
    monthly_price: string | number;
    is_active: boolean;
};

type Company = {
    id: number;
    nama: string;
    kode_perusahaan: string;
    email?: string | null;
    subscription_status: "trial" | "active" | "past_due" | "cancelled";
    subscription_started_at?: string | null;
    subscription_expires_at?: string | null;
    subscription_grace_until?: string | null;
    subscription_plan?: Plan | null;
    subscription_invoices_count: number;
};

type Filters = {
    search: string;
    subscription_status: string;
    plan_id: number | null;
};

type Props = {
    companies: {
        data: Company[];
        current_page: number;
        last_page: number;
        per_page: number;
        total: number;
        from: number;
        to: number;
        links: { url: string | null; label: string; active: boolean }[];
    };
    plans: Plan[];
    filters: Filters;
    summary: Record<string, number>;
};

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

const statusLabel: Record<string, string> = {
    trial: "Trial",
    active: "Aktif",
    past_due: "Jatuh Tempo",
    cancelled: "Dibatalkan",
};

function date(value?: string | null) {
    return value
        ? new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
              new Date(value),
          )
        : "-";
}

function daysLeft(value?: string | null) {
    if (!value) return null;
    return Math.ceil((new Date(value).getTime() - Date.now()) / 86400000);
}

export default function Subscriptions({
    companies,
    plans,
    filters,
    summary,
}: Props) {
    const { props } = usePage<{
        flash?: { success?: string; error?: string };
    }>();

    const [editing, setEditing] = useState<Company | null>(null);
    const [extendCompany, setExtendCompany] = useState<Company | null>(null);

    // Konfigurasi Filter untuk DataTable
    const filterConfigs: FilterConfig[] = [
        {
            key: "subscription_status",
            label: "Status",
            value: filters.subscription_status || "",
            onChange: () => {},
            options: [
                { label: "Trial", value: "trial" },
                { label: "Aktif", value: "active" },
                { label: "Jatuh Tempo", value: "past_due" },
                { label: "Dibatalkan", value: "cancelled" },
            ],
        },
        {
            key: "plan_id",
            label: "Paket",
            value: filters.plan_id ? String(filters.plan_id) : "",
            onChange: () => {},
            options: plans.map((p) => ({
                label: p.name,
                value: p.id,
            })),
        },
    ];

    // Konfigurasi Kolom Profesional untuk DataTable
    const columns: Column<Company>[] = [
        {
            header: "PERUSAHAAN",
            headerClassName:
                "text-xs font-bold text-slate-500 uppercase tracking-wider py-3",
            cell: (company) => (
                <div className="py-1">
                    <div className="font-semibold text-slate-900 dark:text-slate-100 text-sm hover:text-indigo-600 transition-colors">
                        {company.nama}
                    </div>
                    <div className="flex items-center gap-1.5 text-xs text-slate-400 mt-0.5">
                        <span className="font-medium text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded text-[10px]">
                            {company.kode_perusahaan}
                        </span>
                        <span>·</span>
                        <span className="truncate max-w-45">
                            {company.email || "-"}
                        </span>
                    </div>
                </div>
            ),
        },
        {
            header: "PAKET",
            headerClassName:
                "text-xs font-bold text-slate-500 uppercase tracking-wider py-3",
            cell: (company) => (
                <div className="py-1">
                    <div className="font-medium text-slate-800 dark:text-slate-200 text-sm">
                        {company.subscription_plan?.name || "-"}
                    </div>
                    <div className="text-xs font-medium text-indigo-600 dark:text-indigo-400 mt-0.5">
                        {company.subscription_plan
                            ? money(company.subscription_plan.monthly_price) +
                              " /bln"
                            : "Belum dipilih"}
                    </div>
                </div>
            ),
        },
        {
            header: "STATUS",
            headerClassName:
                "text-xs font-bold text-slate-500 uppercase tracking-wider py-3",
            cell: (company) => {
                const status = company.subscription_status;
                return (
                    <span
                        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold shadow-2xs ${
                            status === "active"
                                ? "bg-emerald-50 text-emerald-700 border border-emerald-200/60 dark:bg-emerald-950/40 dark:text-emerald-400 dark:border-emerald-900"
                                : status === "trial"
                                  ? "bg-violet-50 text-violet-700 border border-violet-200/60 dark:bg-violet-950/40 dark:text-violet-400 dark:border-violet-900"
                                  : status === "past_due"
                                    ? "bg-amber-50 text-amber-700 border border-amber-200/60 dark:bg-amber-950/40 dark:text-amber-400 dark:border-amber-900"
                                    : "bg-rose-50 text-rose-700 border border-rose-200/60 dark:bg-rose-950/40 dark:text-rose-400 dark:border-rose-900"
                        }`}
                    >
                        <span
                            className={`size-1.5 rounded-full ${
                                status === "active"
                                    ? "bg-emerald-500 animate-pulse"
                                    : status === "trial"
                                      ? "bg-violet-500"
                                      : status === "past_due"
                                        ? "bg-amber-500"
                                        : "bg-rose-500"
                            }`}
                        />
                        {statusLabel[status] || status}
                    </span>
                );
            },
        },
        {
            header: "BERAKHIR",
            headerClassName:
                "text-xs font-bold text-slate-500 uppercase tracking-wider py-3",
            cell: (company) => {
                const left = daysLeft(company.subscription_expires_at);
                return (
                    <div className="py-1">
                        <div className="text-slate-800 dark:text-slate-200 text-sm font-medium">
                            {date(company.subscription_expires_at)}
                        </div>
                        {left !== null && (
                            <div
                                className={`text-[11px] font-medium mt-0.5 ${
                                    left <= 7
                                        ? "text-amber-600 dark:text-amber-400 flex items-center gap-1"
                                        : "text-slate-400"
                                }`}
                            >
                                {left < 0
                                    ? `Terlambat ${Math.abs(left)} hari`
                                    : `${left} hari lagi`}
                            </div>
                        )}
                    </div>
                );
            },
        },
        {
            header: "INVOICE",
            headerClassName:
                "text-xs font-bold text-slate-500 uppercase tracking-wider py-3",
            cell: (company) => (
                <span className="inline-flex items-center justify-center size-7 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold">
                    {company.subscription_invoices_count}
                </span>
            ),
        },
        {
            header: "AKSI",
            headerClassName:
                "text-xs font-bold text-slate-500 uppercase tracking-wider text-right py-3 pr-4",
            className: "text-right pr-4",
            cell: (company) => (
                <div className="flex items-center justify-end gap-2">
                    <Button
                        variant="outline"
                        size="sm"
                        className="h-8 rounded-lg text-xs font-semibold border-slate-200 hover:bg-slate-50 hover:text-indigo-600 transition-all shadow-2xs"
                        onClick={() => setExtendCompany(company)}
                    >
                        Perpanjang
                    </Button>
                    <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 rounded-lg text-xs font-semibold text-slate-600 hover:bg-indigo-50 hover:text-indigo-600 transition-all"
                        onClick={() => setEditing(company)}
                    >
                        <Pencil className="mr-1.5 size-3.5" /> Kelola
                    </Button>
                </div>
            ),
        },
    ];

    // Konfigurasi Field untuk Edit Langganan
    const editFields: FieldConfig[] = [
        {
            name: "subscription_plan_id",
            label: "Paket",
            type: "select",
            required: true,
            options: plans.map((p) => ({
                label: `${p.name} — ${money(p.monthly_price)}`,
                value: p.id,
            })),
            colSpan: 2,
            className: "w-full",
        },
        {
            name: "subscription_status",
            label: "Status",
            type: "select",
            required: true,
            options: [
                { label: "Trial", value: "trial" },
                { label: "Aktif", value: "active" },
                { label: "Jatuh Tempo", value: "past_due" },
                { label: "Dibatalkan", value: "cancelled" },
            ],
            colSpan: 2,
            className: "w-full",
        },
        {
            name: "subscription_expires_at",
            label: "Tanggal berakhir",
            type: "date",
            colSpan: 2,
            className: "w-auto max-w-xs",
        },
        {
            name: "subscription_grace_until",
            label: "Grace period sampai",
            type: "date",
            colSpan: 2,
            className: "w-auto max-w-xs",
        },
    ];

    // Konfigurasi Field untuk Perpanjang Langganan
    const extendFields: FieldConfig[] = [
        {
            name: "days",
            label: "Tambahkan hari",
            type: "number",
            required: true,
        },
    ];

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Langganan", href: "/platform/subscriptions" },
            ]}
        >
            <Head title="Langganan Platform" />
            <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">
                            <span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
                            <span className="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
                                Subscription Management
                            </span>
                        </div>
                        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50 sm:text-3xl mt-1">
                            Langganan
                        </h1>
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Pantau dan kelola masa berlangganan seluruh
                            perusahaan tenant secara real-time.
                        </p>
                    </div>
                </div>

                {/* Flash Messages */}
                {props.flash?.success && (
                    <div className="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-xs font-medium text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-300">
                        {props.flash.success}
                    </div>
                )}
                {props.flash?.error && (
                    <div className="rounded-2xl border border-rose-200 bg-rose-50 p-4 text-xs font-medium text-rose-800 dark:border-rose-900 dark:bg-rose-950/50 dark:text-rose-300">
                        {props.flash.error}
                    </div>
                )}

                {/* Metrics Grid using StatChip */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
                    <StatChip
                        icon={Building2}
                        label="Total"
                        value={summary.total}
                        tone="blue"
                        variant="compact"
                        description="Seluruh tenant"
                    />
                    <StatChip
                        icon={CheckCircle2}
                        label="Aktif"
                        value={summary.active}
                        tone="emerald"
                        variant="compact"
                        description="Langganan aktif"
                    />
                    <StatChip
                        icon={Clock3}
                        label="Trial"
                        value={summary.trial}
                        tone="violet"
                        variant="compact"
                        description="Masa percobaan"
                    />
                    <StatChip
                        icon={CreditCard}
                        label="Jatuh Tempo"
                        value={summary.past_due}
                        tone="orange"
                        variant="compact"
                        description="Menunggu pembayaran"
                    />
                    <StatChip
                        icon={XCircle}
                        label="Dibatalkan"
                        value={summary.cancelled}
                        tone="rose"
                        variant="compact"
                        description="Berhenti langganan"
                    />
                    <StatChip
                        icon={CalendarClock}
                        label="≤ 7 Hari Lagi"
                        value={summary.expiring_soon}
                        tone="cyan"
                        variant="compact"
                        description="Segera berakhir"
                    />
                </div>

                {/* Global DataTable Integration */}
                <DataTable
                    data={companies}
                    columns={columns}
                    filters={filterConfigs}
                    searchValue={filters.search}
                    searchPlaceholder="Cari perusahaan, kode, atau email..."
                    showNumber
                    baseUrl="/platform/subscriptions"
                />
            </div>

            {/* Global DynamicFormDialog untuk Kelola/Edit Langganan */}
            <DynamicFormDialog
                open={!!editing}
                onOpenChange={(open) => !open && setEditing(null)}
                title="Langganan"
                subtitle={editing?.nama}
                endpoint="/platform/subscriptions"
                fields={editFields}
                dialogSize="md"
                initialValues={{
                    subscription_plan_id: editing?.subscription_plan?.id ?? "",
                    subscription_status:
                        editing?.subscription_status ?? "active",
                    subscription_expires_at:
                        editing?.subscription_expires_at?.slice(0, 10) ?? "",
                    subscription_grace_until:
                        editing?.subscription_grace_until?.slice(0, 10) ?? "",
                }}
                itemToEdit={editing}
                submitText="Simpan Perubahan"
                editText="Simpan Perubahan"
            />

            {/* Global DynamicFormDialog untuk Perpanjang Langganan */}
            <DynamicFormDialog
                open={!!extendCompany}
                onOpenChange={(open) => !open && setExtendCompany(null)}
                title="Perpanjang Langganan"
                subtitle={extendCompany?.nama}
                endpoint={`/platform/subscriptions/${extendCompany?.id}/extend`}
                fields={extendFields}
                dialogSize="md"
                initialValues={{
                    days: "30",
                }}
                itemToEdit={extendCompany}
                primaryKey="id"
                submitText="Perpanjang Sekarang"
                editText="Perpanjang Sekarang"
            />
        </AppLayout>
    );
}