import { Head, Link, router } from '@inertiajs/react';
import { CheckCircle, XCircle, CreditCard, Clock, CheckCircle2, BookOpen, X, Check, FileImage, Eye, ExternalLink } from 'lucide-react';
import { useState } from 'react';
import { DataTable, type Column, type TableFilter } from '@/components/data-table';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type PaymentEntry = {
    type: 'order' | 'payment';
    id: number;
    status: 'pending' | 'approved' | 'rejected';
    created_at: string;
    user: { id: number; name: string; email: string };
    courses: string[];
    amount: number;
    discount: number;
    proof_path: string | null;
    note: string | null;
};

type Props = {
    items: PaymentEntry[];
    pendingCount: number;
    filters: { status?: string; search?: string };
};

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

const STATUS_CONFIG = {
    pending:  { label: 'Menunggu',  badge: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',    icon: Clock },
    approved: { label: 'Disetujui', badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400', icon: CheckCircle2 },
    rejected: { label: 'Ditolak',   badge: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',            icon: XCircle },
};

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

function formatDate(dateStr: string) {
    return new Date(dateStr).toLocaleDateString('id-ID', {
        day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
    });
}

function getInitials(name: string) {
    return name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase();
}

function ProcessModal({ entry, onClose }: { entry: PaymentEntry; onClose: () => void }) {
    const [action, setAction] = useState<'approved' | 'rejected'>('approved');
    const [note, setNote] = useState('');
    const [processing, setProcessing] = useState(false);

    function submit(e: React.FormEvent) {
        e.preventDefault();
        setProcessing(true);
        if (action === 'approved') {
            const url = entry.type === 'order' ? `/admin/orders/${entry.id}/approve` : `/admin/payments/${entry.id}/approve`;
            const method = entry.type === 'order' ? router.post : router.patch;
            method(url, {}, { onFinish: () => { setProcessing(false); onClose(); } });
        } else {
            const url = entry.type === 'order' ? `/admin/orders/${entry.id}/reject` : `/admin/payments/${entry.id}/reject`;
            const payload = entry.type === 'order' ? { notes: note } : { note };
            const method = entry.type === 'order' ? router.post : router.patch;
            method(url, payload, { onFinish: () => { setProcessing(false); onClose(); } });
        }
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
            <form onSubmit={submit} className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-card space-y-4">
                <div className="flex items-start justify-between gap-3">
                    <div>
                        <h3 className="text-lg font-bold">Verifikasi Pembayaran</h3>
                        <p className="text-sm text-muted-foreground mt-0.5">{entry.user.name}</p>
                    </div>
                    <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
                        <X className="h-5 w-5" />
                    </button>
                </div>

                {/* Kelas */}
                <div className="rounded-xl border border-input bg-muted/30 p-3 space-y-1.5">
                    {entry.courses.map((title, i) => (
                        <div key={i} className="flex items-center gap-2 text-sm">
                            <BookOpen className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                            <span className="font-medium">{title}</span>
                        </div>
                    ))}
                    {entry.amount > 0 && (
                        <p className="text-xs text-muted-foreground pt-1 border-t border-input mt-1">
                            Total: <span className="font-semibold text-foreground">{formatPrice(entry.amount)}</span>
                            {entry.discount > 0 && <span className="ml-1 text-emerald-600">(Diskon {formatPrice(entry.discount)})</span>}
                        </p>
                    )}
                </div>

                {/* Bukti */}
                {entry.proof_path && (
                    <a
                        href={entry.type === 'order' ? `/admin/orders/${entry.id}/proof` : `/storage/${entry.proof_path}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-1.5 rounded-xl bg-blue-50 px-3 py-2 text-sm font-medium text-blue-600 hover:bg-blue-100 transition-colors dark:bg-blue-900/20 dark:text-blue-400"
                    >
                        <ExternalLink className="h-4 w-4" />
                        Lihat Bukti Transfer
                    </a>
                )}

                {/* Pilih tindakan */}
                <div>
                    <p className="mb-2 text-sm font-semibold">Tindakan</p>
                    <div className="flex gap-3">
                        {(['approved', 'rejected'] as const).map((s) => (
                            <button
                                key={s}
                                type="button"
                                onClick={() => setAction(s)}
                                className={`flex-1 rounded-xl border-2 py-2 text-sm font-semibold transition-colors ${
                                    action === s
                                        ? s === 'approved'
                                            ? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20'
                                            : 'border-red-400 bg-red-50 text-red-600 dark:bg-red-900/20'
                                        : 'border-input text-muted-foreground hover:border-blue-300'
                                }`}
                            >
                                {s === 'approved' ? 'Setujui' : 'Tolak'}
                            </button>
                        ))}
                    </div>
                </div>

                {action === 'rejected' && (
                    <div>
                        <label className="mb-1.5 block text-sm font-semibold">Alasan Penolakan</label>
                        <textarea
                            value={note}
                            onChange={(e) => setNote(e.target.value)}
                            rows={2}
                            placeholder="Contoh: Nominal tidak sesuai, bukti tidak terbaca..."
                            className="w-full rounded-xl border border-input bg-background px-4 py-2.5 text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 resize-none"
                        />
                    </div>
                )}

                <div className="flex justify-end gap-3 pt-1">
                    <Button type="button" variant="outline" size="sm" onClick={onClose} className="rounded-xl">Batal</Button>
                    <Button
                        type="submit"
                        size="sm"
                        disabled={processing}
                        className={`rounded-xl ${action === 'approved' ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-red-600 hover:bg-red-700'}`}
                    >
                        {processing ? 'Memproses...' : action === 'approved' ? 'Setujui & Aktivasi' : 'Tolak Pembayaran'}
                    </Button>
                </div>
            </form>
        </div>
    );
}

export default function AdminPaymentsIndex({ items, pendingCount }: Props) {
    const [selectedEntry, setSelectedEntry] = useState<PaymentEntry | null>(null);

    const columns: Column<PaymentEntry>[] = [
        {
            key: 'user.name',
            header: 'Pemesan',
            searchable: true,
            render: (e) => (
                <div className="flex items-center gap-2.5">
                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-700 text-xs font-bold dark:bg-blue-900/30 dark:text-blue-300">
                        {getInitials(e.user.name)}
                    </div>
                    <div>
                        <p className="font-medium">{e.user.name}</p>
                        <p className="text-xs text-muted-foreground">{e.user.email}</p>
                    </div>
                </div>
            ),
        },
        {
            key: 'courses',
            header: 'Kelas',
            searchable: false,
            render: (e) => (
                <div className="space-y-1">
                    {e.courses.map((title, i) => (
                        <div key={i} className="flex items-center gap-1.5 text-sm">
                            <BookOpen className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                            <span className="line-clamp-1">{title}</span>
                        </div>
                    ))}
                </div>
            ),
        },
        {
            key: 'amount',
            header: 'Jumlah',
            headerClass: 'w-36',
            render: (e) => (
                <div>
                    <p className="font-semibold">{e.amount > 0 ? formatPrice(e.amount) : 'Gratis'}</p>
                    {e.discount > 0 && (
                        <p className="text-xs text-emerald-600">Diskon {formatPrice(e.discount)}</p>
                    )}
                </div>
            ),
        },
        {
            key: 'created_at',
            header: 'Tanggal',
            headerClass: 'w-40',
            render: (e) => (
                <span className="text-xs text-muted-foreground">{formatDate(e.created_at)}</span>
            ),
        },
        {
            key: 'status',
            header: 'Status',
            headerClass: 'w-32',
            render: (e) => {
                const cfg = STATUS_CONFIG[e.status];
                const Icon = cfg.icon;
                return (
                    <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${cfg.badge}`}>
                        <Icon className="h-3 w-3" /> {cfg.label}
                    </span>
                );
            },
        },
        {
            key: 'id',
            header: 'Aksi',
            sortable: false,
            headerClass: 'w-28',
            render: (e) => (
                <div className="flex items-center gap-1.5">
                    {e.proof_path && (
                        <a
                            href={e.type === 'order' ? `/admin/orders/${e.id}/proof` : `/storage/${e.proof_path}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex h-8 w-8 items-center justify-center rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors dark:bg-blue-900/30 dark:text-blue-400"
                            title="Lihat Bukti Transfer"
                        >
                            <FileImage className="h-3.5 w-3.5" />
                        </a>
                    )}
                    {e.type === 'order' && (
                        <Link
                            href={`/admin/orders/${e.id}`}
                            className="flex h-8 w-8 items-center justify-center rounded-xl bg-zinc-100 text-zinc-600 hover:bg-zinc-200 transition-colors dark:bg-zinc-800 dark:text-zinc-400"
                            title="Detail Pesanan"
                        >
                            <Eye className="h-3.5 w-3.5" />
                        </Link>
                    )}
                    {e.status === 'pending' && (
                        <button
                            onClick={() => setSelectedEntry(e)}
                            className="flex h-8 items-center gap-1 rounded-xl bg-amber-100 px-2.5 text-xs font-semibold text-amber-700 hover:bg-amber-200 transition-colors dark:bg-amber-900/30 dark:text-amber-400"
                        >
                            <Check className="h-3.5 w-3.5" />
                            Proses
                        </button>
                    )}
                </div>
            ),
        },
    ];

    const filters: TableFilter[] = [
        {
            key: 'status',
            label: 'Status',
            options: [
                { label: 'Menunggu', value: 'pending' },
                { label: 'Disetujui', value: 'approved' },
                { label: 'Ditolak', value: 'rejected' },
            ],
        },
        {
            key: 'type',
            label: 'Tipe',
            options: [
                { label: 'Checkout', value: 'order' },
                { label: 'Langsung', value: 'payment' },
            ],
        },
    ];

    return (
        <>
            <Head title="Pembayaran" />

            {selectedEntry && (
                <ProcessModal entry={selectedEntry} onClose={() => setSelectedEntry(null)} />
            )}

            <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">
                                <CreditCard 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">Pembayaran</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{items.length}</span> transaksi pembayaran
                                </p>
                            </div>
                        </div>
                        {pendingCount > 0 && (
                            <span className="flex h-9 min-w-9 items-center justify-center rounded-xl bg-amber-100 px-2.5 text-sm font-bold text-amber-700 dark:bg-amber-950/50 dark:text-amber-400">
                                {pendingCount} menunggu
                            </span>
                        )}
                    </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={items as unknown as Record<string, unknown>[]}
                    columns={columns as Column<Record<string, unknown>>[]}
                    filters={filters}
                    searchPlaceholder="Cari nama, email..."
                    defaultPageSize={25}
                    emptyIcon={CreditCard}
                    emptyMessage="Belum ada transaksi"
                    emptyDescription="Semua pembayaran yang masuk akan muncul di sini."
                />
            </div>
        </>
    );
}

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