import { Head, Link, router, useForm } from '@inertiajs/react';
import { BadgePercent, CheckCircle, Pencil, Plus, Trash2, XCircle } from 'lucide-react';
import { useState } from 'react';
import { DataTable, type Column, type TableFilter } from '@/components/data-table';
import { DeleteConfirmModal } from '@/components/delete-confirm-modal';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type Course = { id: number; title: string };

type Coupon = {
    id: number;
    code: string;
    type: 'percentage' | 'fixed';
    value: number;
    scope: 'global' | 'course';
    is_active: boolean;
    starts_at: string | null;
    expires_at: string | null;
    usage_limit: number | null;
    used_count: number;
    min_purchase: number;
    orders_count: number;
};

type Props = { coupons: Coupon[]; courses: Course[] };

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'Kupon', href: '/admin/coupons' },
];

function formatPrice(price: number) {
    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price);
}

const selectCls =
    'border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]';

function CreateCouponModal({ courses }: { courses: Course[] }) {
    const [open, setOpen] = useState(false);

    const { data, setData, post, processing, errors, reset } = useForm({
        code: '',
        type: 'percentage' as 'percentage' | 'fixed',
        value: '',
        scope: 'global' as 'global' | 'course',
        is_active: true,
        starts_at: '',
        expires_at: '',
        usage_limit: '',
        per_user_limit: '',
        min_purchase: '',
        course_ids: [] as number[],
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post('/admin/coupons', {
            onSuccess: () => {
                reset();
                setOpen(false);
            },
        });
    }

    function toggleCourse(id: number) {
        setData(
            'course_ids',
            data.course_ids.includes(id) ? data.course_ids.filter((c) => c !== id) : [...data.course_ids, id],
        );
    }

    function handleClose(val: boolean) {
        if (!val) reset();
        setOpen(val);
    }

    return (
        <Dialog open={open} onOpenChange={handleClose}>
            <DialogTrigger asChild>
                <Button size="sm" className="gap-1.5 bg-blue-600 hover:bg-blue-700 shadow-sm">
                    <Plus className="h-4 w-4" />
                    Buat Kupon
                </Button>
            </DialogTrigger>
            <DialogContent className="max-h-[90vh] max-w-xl overflow-y-auto">
                <DialogTitle>Buat Kupon Baru</DialogTitle>
                <form onSubmit={submit} className="mt-2 flex flex-col gap-4">
                    {/* Kode */}
                    <div className="grid gap-2">
                        <Label htmlFor="code">
                            Kode Kupon <span className="text-destructive">*</span>
                        </Label>
                        <Input
                            id="code"
                            value={data.code}
                            onChange={(e) => setData('code', e.target.value.toUpperCase())}
                            placeholder="DISKON50"
                            className="font-mono uppercase"
                            autoFocus
                        />
                        {errors.code && <p className="text-xs text-destructive">{errors.code}</p>}
                    </div>

                    {/* Tipe + Nilai */}
                    <div className="grid grid-cols-2 gap-3">
                        <div className="grid gap-2">
                            <Label htmlFor="type">
                                Tipe Diskon <span className="text-destructive">*</span>
                            </Label>
                            <select
                                id="type"
                                value={data.type}
                                onChange={(e) => setData('type', e.target.value as 'percentage' | 'fixed')}
                                className={selectCls}
                            >
                                <option value="percentage">Persentase (%)</option>
                                <option value="fixed">Nominal (Rp)</option>
                            </select>
                            {errors.type && <p className="text-xs text-destructive">{errors.type}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="value">
                                Nilai {data.type === 'percentage' ? '(%)' : '(Rp)'} <span className="text-destructive">*</span>
                            </Label>
                            <Input
                                id="value"
                                type="number"
                                value={data.value}
                                onChange={(e) => setData('value', e.target.value)}
                                min="0"
                                max={data.type === 'percentage' ? 100 : undefined}
                            />
                            {errors.value && <p className="text-xs text-destructive">{errors.value}</p>}
                        </div>
                    </div>

                    {/* Min Purchase */}
                    <div className="grid gap-2">
                        <Label htmlFor="min_purchase">Minimum Pembelian (Rp)</Label>
                        <Input
                            id="min_purchase"
                            type="number"
                            value={data.min_purchase}
                            onChange={(e) => setData('min_purchase', e.target.value)}
                            min="0"
                            placeholder="0"
                        />
                        {errors.min_purchase && <p className="text-xs text-destructive">{errors.min_purchase}</p>}
                    </div>

                    {/* Batas penggunaan */}
                    <div className="grid grid-cols-2 gap-3">
                        <div className="grid gap-2">
                            <Label htmlFor="usage_limit">Batas Total Penggunaan</Label>
                            <Input
                                id="usage_limit"
                                type="number"
                                value={data.usage_limit}
                                onChange={(e) => setData('usage_limit', e.target.value)}
                                min="1"
                                placeholder="Tidak terbatas"
                            />
                            {errors.usage_limit && <p className="text-xs text-destructive">{errors.usage_limit}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="per_user_limit">Batas Per User</Label>
                            <Input
                                id="per_user_limit"
                                type="number"
                                value={data.per_user_limit}
                                onChange={(e) => setData('per_user_limit', e.target.value)}
                                min="1"
                                placeholder="Tidak terbatas"
                            />
                            {errors.per_user_limit && <p className="text-xs text-destructive">{errors.per_user_limit}</p>}
                        </div>
                    </div>

                    {/* Tanggal */}
                    <div className="grid grid-cols-2 gap-3">
                        <div className="grid gap-2">
                            <Label htmlFor="starts_at">Berlaku Mulai</Label>
                            <Input
                                id="starts_at"
                                type="datetime-local"
                                value={data.starts_at}
                                onChange={(e) => setData('starts_at', e.target.value)}
                            />
                            {errors.starts_at && <p className="text-xs text-destructive">{errors.starts_at}</p>}
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="expires_at">Berlaku Hingga</Label>
                            <Input
                                id="expires_at"
                                type="datetime-local"
                                value={data.expires_at}
                                onChange={(e) => setData('expires_at', e.target.value)}
                            />
                            {errors.expires_at && <p className="text-xs text-destructive">{errors.expires_at}</p>}
                        </div>
                    </div>

                    {/* Scope */}
                    <div className="grid gap-2">
                        <Label>Berlaku Untuk</Label>
                        <div className="flex gap-3">
                            {(['global', 'course'] as const).map((s) => (
                                <button
                                    key={s}
                                    type="button"
                                    onClick={() => setData('scope', s)}
                                    className={`flex-1 rounded-xl border-2 py-2 text-sm font-semibold transition-colors ${
                                        data.scope === s
                                            ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300'
                                            : 'border-input text-muted-foreground hover:border-blue-300'
                                    }`}
                                >
                                    {s === 'global' ? 'Semua Kelas' : 'Kelas Tertentu'}
                                </button>
                            ))}
                        </div>
                        {errors.scope && <p className="text-xs text-destructive">{errors.scope}</p>}
                    </div>

                    {/* Pilih kelas */}
                    {data.scope === 'course' && (
                        <div className="grid gap-2">
                            <Label>
                                Pilih Kelas <span className="text-destructive">*</span>
                            </Label>
                            <div className="max-h-48 overflow-y-auto space-y-1 rounded-xl border border-input p-3">
                                {courses.map((course) => (
                                    <label key={course.id} className="flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 hover:bg-muted/50">
                                        <input
                                            type="checkbox"
                                            checked={data.course_ids.includes(course.id)}
                                            onChange={() => toggleCourse(course.id)}
                                            className="h-4 w-4 rounded accent-blue-600"
                                        />
                                        <span className="text-sm">{course.title}</span>
                                    </label>
                                ))}
                                {courses.length === 0 && (
                                    <p className="py-2 text-center text-xs text-muted-foreground">Tidak ada kelas aktif.</p>
                                )}
                            </div>
                            {errors['course_ids'] && <p className="text-xs text-destructive">{errors['course_ids'] as string}</p>}
                        </div>
                    )}

                    {/* Aktif */}
                    <label className="flex cursor-pointer items-center gap-3">
                        <input
                            type="checkbox"
                            checked={data.is_active}
                            onChange={(e) => setData('is_active', e.target.checked)}
                            className="h-4 w-4 rounded accent-blue-600"
                        />
                        <span className="text-sm font-medium">Kupon aktif</span>
                    </label>

                    <div className="flex justify-end gap-2 pt-1">
                        <Button type="button" variant="outline" onClick={() => handleClose(false)}>
                            Batal
                        </Button>
                        <Button type="submit" disabled={processing} className="gap-1.5 bg-blue-600 hover:bg-blue-700">
                            {processing && <Spinner />}
                            Simpan Kupon
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

export default function AdminCouponsIndex({ coupons, courses }: Props) {
    const [deleteModal, setDeleteModal] = useState<{ open: boolean; id: number | null; code: string }>({
        open: false,
        id: null,
        code: '',
    });

    function confirmDelete() {
        if (!deleteModal.id) return;
        router.delete(`/admin/coupons/${deleteModal.id}`, {
            onSuccess: () => setDeleteModal({ open: false, id: null, code: '' }),
        });
    }

    const columns: Column<Coupon>[] = [
        {
            key: 'code',
            header: 'Kode',
            searchable: true,
            render: (c) => (
                <div className="flex items-center gap-2.5">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-900/30">
                        <BadgePercent className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                    </div>
                    <span className="font-mono font-bold">{c.code}</span>
                </div>
            ),
        },
        {
            key: 'value',
            header: 'Diskon',
            render: (c) => (
                <div>
                    <span className="font-semibold">{c.type === 'percentage' ? `${c.value}%` : formatPrice(c.value)}</span>
                    {c.min_purchase > 0 && <p className="text-xs text-muted-foreground">Min. {formatPrice(c.min_purchase)}</p>}
                </div>
            ),
        },
        {
            key: 'scope',
            header: 'Berlaku Untuk',
            headerClass: 'w-36',
            render: (c) => (
                <span
                    className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                        c.scope === 'global'
                            ? 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-400'
                            : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
                    }`}
                >
                    {c.scope === 'global' ? 'Semua Kelas' : 'Kelas Tertentu'}
                </span>
            ),
        },
        {
            key: 'used_count',
            header: 'Penggunaan',
            headerClass: 'w-28',
            render: (c) => (
                <span className="text-sm">
                    {c.used_count}
                    {c.usage_limit !== null && <span className="text-muted-foreground"> / {c.usage_limit}</span>}
                </span>
            ),
        },
        {
            key: 'expires_at',
            header: 'Berlaku Hingga',
            headerClass: 'w-36',
            render: (c) => (
                <span className="text-sm text-muted-foreground">
                    {c.expires_at ? (
                        new Date(c.expires_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })
                    ) : (
                        <span className="italic">Tidak terbatas</span>
                    )}
                </span>
            ),
        },
        {
            key: 'is_active',
            header: 'Status',
            headerClass: 'w-28',
            render: (c) =>
                c.is_active ? (
                    <span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                        <CheckCircle className="h-3 w-3" /> Aktif
                    </span>
                ) : (
                    <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
                        <XCircle className="h-3 w-3" /> Nonaktif
                    </span>
                ),
        },
        {
            key: 'id',
            header: 'Aksi',
            sortable: false,
            headerClass: 'w-20',
            render: (c) => (
                <div className="flex items-center gap-1.5">
                    <Link
                        href={`/admin/coupons/${c.id}/edit`}
                        className="flex h-8 w-8 items-center justify-center rounded-xl bg-amber-100 text-amber-700 hover:bg-amber-200 transition-colors dark:bg-amber-900/30 dark:text-amber-400"
                        title="Edit"
                    >
                        <Pencil className="h-3.5 w-3.5" />
                    </Link>
                    <button
                        onClick={() => setDeleteModal({ open: true, id: c.id, code: c.code })}
                        className="flex h-8 w-8 items-center justify-center rounded-xl bg-red-100 text-red-700 hover:bg-red-200 transition-colors dark:bg-red-900/30 dark:text-red-400"
                        title="Hapus"
                    >
                        <Trash2 className="h-3.5 w-3.5" />
                    </button>
                </div>
            ),
        },
    ];

    const filters: TableFilter[] = [
        {
            key: 'is_active',
            label: 'Status',
            options: [
                { label: 'Aktif', value: 'true' },
                { label: 'Nonaktif', value: 'false' },
            ],
        },
        {
            key: 'scope',
            label: 'Scope',
            options: [
                { label: 'Global', value: 'global' },
                { label: 'Kelas Tertentu', value: 'course' },
            ],
        },
        {
            key: 'type',
            label: 'Tipe',
            options: [
                { label: 'Persentase', value: 'percentage' },
                { label: 'Nominal', value: 'fixed' },
            ],
        },
    ];

    return (
        <>
            <Head title="Manajemen Kupon" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Header */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-5 shadow-sm dark:border-blue-800/30 dark:from-blue-950/40 dark:via-card dark:to-indigo-950/30">
                    <div className="relative z-10 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-800/60">
                                <BadgePercent className="h-5 w-5 text-blue-600 dark:text-blue-300" />
                            </div>
                            <div>
                                <h1 className="text-xl font-bold text-blue-900 dark:text-blue-100">Kupon Diskon</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{coupons.length}</span> kupon terdaftar
                                </p>
                            </div>
                        </div>
                        <CreateCouponModal courses={courses} />
                    </div>
                    <div className="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-blue-100/40 dark:bg-blue-700/10" />
                    <div className="absolute right-10 -bottom-6 h-28 w-28 rounded-full bg-indigo-100/30 dark:bg-indigo-700/10" />
                </div>

                <DataTable
                    data={coupons as unknown as Record<string, unknown>[]}
                    columns={columns as Column<Record<string, unknown>>[]}
                    filters={filters}
                    searchPlaceholder="Cari kode kupon..."
                    defaultPageSize={25}
                    emptyIcon={BadgePercent}
                    emptyMessage="Belum ada kupon"
                    emptyDescription="Buat kupon pertama untuk memberikan diskon kepada siswa."
                />
            </div>

            <DeleteConfirmModal
                open={deleteModal.open}
                onClose={() => setDeleteModal({ open: false, id: null, code: '' })}
                onConfirm={confirmDelete}
                title={`Hapus kupon "${deleteModal.code}"?`}
                description="Kupon yang dihapus tidak dapat dikembalikan."
            />
        </>
    );
}

AdminCouponsIndex.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;