import { Head, Link, useForm } from '@inertiajs/react';
import { CheckCircle, Clock, Link2, Settings2, X, Check } 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 AffiliateCode = {
    id: number;
    code: string;
    status: 'pending' | 'approved' | 'rejected';
    commission_rate: number;
    commissions_count: number;
    total_earned: number | null;
    user: { id: number; name: string; email: string };
    created_at: string;
};

type Props = { affiliates: AffiliateCode[] };

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

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

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: 'Aktif',    badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400', icon: CheckCircle },
    rejected: { label: 'Ditolak',  badge: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',          icon: X },
};

function ApproveModal({ affiliate, onClose }: { affiliate: AffiliateCode; onClose: () => void }) {
    const { data, setData, patch, processing } = useForm({
        status: 'approved' as 'approved' | 'rejected',
        commission_rate: String(affiliate.commission_rate),
        notes: '',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        patch(`/admin/affiliates/${affiliate.id}/status`, { onSuccess: 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">
                <h3 className="text-lg font-bold">Update Status Affiliate</h3>
                <p className="text-sm text-muted-foreground">
                    {affiliate.user.name} — <span className="font-mono font-bold">{affiliate.code}</span>
                </p>

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

                {data.status === 'approved' && (
                    <div>
                        <label className="mb-1.5 block text-sm font-semibold">Komisi (%)</label>
                        <input
                            type="number"
                            value={data.commission_rate}
                            onChange={(e) => setData('commission_rate', e.target.value)}
                            min="0"
                            max="100"
                            step="0.5"
                            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"
                        />
                    </div>
                )}

                <div>
                    <label className="mb-1.5 block text-sm font-semibold">Catatan (opsional)</label>
                    <textarea
                        value={data.notes}
                        onChange={(e) => setData('notes', e.target.value)}
                        rows={2}
                        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"
                    />
                </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 bg-blue-600 hover:bg-blue-700">
                        {processing ? 'Menyimpan...' : 'Simpan'}
                    </Button>
                </div>
            </form>
        </div>
    );
}

export default function AdminAffiliatesIndex({ affiliates }: Props) {
    const [selectedAffiliate, setSelectedAffiliate] = useState<AffiliateCode | null>(null);

    const columns: Column<AffiliateCode>[] = [
        {
            key: 'user.name',
            header: 'Pengguna',
            searchable: true,
            render: (a) => (
                <div>
                    <p className="font-medium">{a.user.name}</p>
                    <p className="text-xs text-muted-foreground">{a.user.email}</p>
                </div>
            ),
        },
        {
            key: 'code',
            header: 'Kode Referral',
            headerClass: 'w-36',
            searchable: true,
            render: (a) => (
                <span className="inline-flex items-center gap-1.5 font-mono font-bold">
                    <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
                    {a.code}
                </span>
            ),
        },
        {
            key: 'commission_rate',
            header: 'Komisi',
            headerClass: 'w-24',
            render: (a) => (
                <span className="font-semibold">{a.commission_rate}%</span>
            ),
        },
        {
            key: 'total_earned',
            header: 'Total Komisi',
            headerClass: 'w-36',
            render: (a) => (
                <div>
                    <p className="font-semibold text-emerald-600 dark:text-emerald-400">{formatPrice(a.total_earned ?? 0)}</p>
                    <p className="text-xs text-muted-foreground">{a.commissions_count} transaksi</p>
                </div>
            ),
        },
        {
            key: 'status',
            header: 'Status',
            headerClass: 'w-28',
            render: (a) => {
                const cfg = STATUS_CONFIG[a.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: (a) => (
                <div className="flex items-center gap-2">
                    <Link
                        href={`/admin/affiliates/${a.id}`}
                        className="flex h-8 items-center rounded-xl bg-blue-50 px-3 text-xs font-semibold text-blue-600 hover:bg-blue-100 transition-colors dark:bg-blue-900/30 dark:text-blue-400"
                    >
                        Detail
                    </Link>
                    <button
                        onClick={() => setSelectedAffiliate(a)}
                        className="flex h-8 items-center rounded-xl bg-amber-100 px-3 text-xs font-semibold text-amber-700 hover:bg-amber-200 transition-colors dark:bg-amber-900/30 dark:text-amber-400"
                    >
                        Update
                    </button>
                </div>
            ),
        },
    ];

    const filters: TableFilter[] = [
        {
            key: 'status',
            label: 'Status',
            options: [
                { label: 'Menunggu', value: 'pending' },
                { label: 'Aktif', value: 'approved' },
                { label: 'Ditolak', value: 'rejected' },
            ],
        },
    ];

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

            {selectedAffiliate && (
                <ApproveModal affiliate={selectedAffiliate} onClose={() => setSelectedAffiliate(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">
                                <Link2 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">Program Affiliate</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{affiliates.length}</span> pendaftar affiliate
                                </p>
                            </div>
                        </div>
                        <Link
                            href="/admin/settings"
                            className="flex items-center gap-1.5 rounded-xl border border-blue-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-blue-700 hover:bg-white transition-colors dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
                        >
                            <Settings2 className="h-3.5 w-3.5" />
                            Pengaturan
                        </Link>
                    </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={affiliates as unknown as Record<string, unknown>[]}
                    columns={columns as Column<Record<string, unknown>>[]}
                    filters={filters}
                    searchPlaceholder="Cari nama, email, atau kode referral..."
                    defaultPageSize={25}
                    emptyIcon={Link2}
                    emptyMessage="Belum ada affiliate"
                    emptyDescription="Pengguna yang mendaftar program affiliate akan muncul di sini."
                />
            </div>
        </>
    );
}

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