import { Head, Link, useForm } from '@inertiajs/react';
import { AlertCircle, CheckCircle, Clock, DollarSign, GraduationCap, Link2, Settings2, TrendingUp, Users, X } 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 CourseStat = {
    course_id: number;
    course: { id: number; title: string; slug: string } | null;
    affiliators_count: number;
    commissions_count: number;
    total_commission: number;
    pending_amount: number;
    paid_amount: number;
};

type Props = {
    affiliates: AffiliateCode[];
    courseStats: CourseStat[];
    pendingAffiliatesCount: number;
    pendingCommissionsCount: number;
    pendingCommissionsTotal: number;
};

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>
    );
}

function SummaryCards({ pendingAffiliatesCount, pendingCommissionsCount, pendingCommissionsTotal, affiliates }: {
    pendingAffiliatesCount: number;
    pendingCommissionsCount: number;
    pendingCommissionsTotal: number;
    affiliates: AffiliateCode[];
}) {
    const totalEarned = affiliates.reduce((sum, a) => sum + (a.total_earned ?? 0), 0);
    const activeCount = affiliates.filter((a) => a.status === 'approved').length;

    const cards = [
        {
            label: 'Menunggu Review',
            value: pendingAffiliatesCount,
            suffix: 'pendaftar',
            icon: AlertCircle,
            iconClass: 'bg-amber-100 text-amber-600 dark:bg-amber-800/40 dark:text-amber-400',
            valueClass: pendingAffiliatesCount > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-800 dark:text-gray-200',
            href: pendingAffiliatesCount > 0 ? undefined : undefined,
        },
        {
            label: 'Komisi Perlu Dibayar',
            value: formatPrice(pendingCommissionsTotal),
            suffix: `${pendingCommissionsCount} transaksi`,
            icon: DollarSign,
            iconClass: 'bg-orange-100 text-orange-600 dark:bg-orange-800/40 dark:text-orange-400',
            valueClass: pendingCommissionsTotal > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-gray-800 dark:text-gray-200',
        },
        {
            label: 'Affiliate Aktif',
            value: activeCount,
            suffix: `dari ${affiliates.length} total`,
            icon: Users,
            iconClass: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-800/40 dark:text-emerald-400',
            valueClass: 'text-emerald-600 dark:text-emerald-400',
        },
        {
            label: 'Total Komisi Dibayar',
            value: formatPrice(totalEarned),
            suffix: 'sepanjang waktu',
            icon: TrendingUp,
            iconClass: 'bg-blue-100 text-blue-600 dark:bg-blue-800/40 dark:text-blue-400',
            valueClass: 'text-blue-700 dark:text-blue-400',
        },
    ];

    return (
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            {cards.map((card) => {
                const Icon = card.icon;
                return (
                    <div key={card.label} className="rounded-2xl border border-border bg-card p-4 shadow-sm">
                        <div className={`mb-3 flex h-9 w-9 items-center justify-center rounded-xl ${card.iconClass}`}>
                            <Icon className="h-4.5 w-4.5" />
                        </div>
                        <p className={`text-xl font-bold ${card.valueClass}`}>{card.value}</p>
                        <p className="mt-0.5 text-xs font-medium text-muted-foreground">{card.label}</p>
                        <p className="text-[11px] text-muted-foreground/70">{card.suffix}</p>
                    </div>
                );
            })}
        </div>
    );
}

function CourseStatsSection({ courseStats }: { courseStats: CourseStat[] }) {
    if (courseStats.length === 0) {
        return null;
    }

    const columns: Column<CourseStat>[] = [
        {
            key: 'course.title',
            header: 'Kelas',
            searchable: true,
            render: (row) => (
                <div className="min-w-0">
                    <p className="truncate font-medium">{row.course?.title ?? '—'}</p>
                    <p className="text-xs text-muted-foreground font-mono">{row.course?.slug}</p>
                </div>
            ),
        },
        {
            key: 'affiliators_count',
            header: 'Affiliator',
            headerClass: 'w-28',
            render: (row) => (
                <span className="inline-flex items-center gap-1 font-semibold">
                    <Users className="h-3.5 w-3.5 text-muted-foreground" />
                    {row.affiliators_count}
                </span>
            ),
        },
        {
            key: 'commissions_count',
            header: 'Transaksi',
            headerClass: 'w-28',
            render: (row) => <span className="font-medium">{row.commissions_count}</span>,
        },
        {
            key: 'pending_amount',
            header: 'Perlu Dibayar',
            headerClass: 'w-40',
            render: (row) => (
                <div>
                    <p className={`font-semibold ${row.pending_amount > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-muted-foreground'}`}>
                        {formatPrice(row.pending_amount)}
                    </p>
                    {row.pending_amount > 0 && (
                        <p className="text-xs text-muted-foreground">belum dibayar</p>
                    )}
                </div>
            ),
        },
        {
            key: 'paid_amount',
            header: 'Sudah Dibayar',
            headerClass: 'w-40',
            render: (row) => (
                <p className="font-semibold text-emerald-600 dark:text-emerald-400">{formatPrice(row.paid_amount)}</p>
            ),
        },
        {
            key: 'course_id',
            header: 'Aksi',
            sortable: false,
            headerClass: 'w-32',
            render: (row) => row.course ? (
                <Link
                    href={`/admin/courses/${row.course.id}/affiliators`}
                    className="inline-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 whitespace-nowrap"
                >
                    Lihat Detail →
                </Link>
            ) : null,
        },
    ];

    return (
        <div className="rounded-2xl border border-border bg-card shadow-sm">
            <div className="flex items-center gap-3 border-b border-border px-5 py-4">
                <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-teal-100 dark:bg-teal-800/40">
                    <GraduationCap className="h-4 w-4 text-teal-600 dark:text-teal-400" />
                </div>
                <div>
                    <h2 className="text-sm font-bold">Komisi Per Kelas</h2>
                    <p className="text-xs text-muted-foreground">{courseStats.length} kelas dengan aktivitas affiliate</p>
                </div>
            </div>
            <div className="p-4">
                <DataTable
                    data={courseStats as unknown as Record<string, unknown>[]}
                    columns={columns as Column<Record<string, unknown>>[]}
                    searchPlaceholder="Cari nama kelas..."
                    defaultPageSize={10}
                    emptyIcon={GraduationCap}
                    emptyMessage="Belum ada data"
                    emptyDescription=""
                />
            </div>
        </div>
    );
}

export default function AdminAffiliatesIndex({ affiliates, courseStats, pendingAffiliatesCount, pendingCommissionsCount, pendingCommissionsTotal }: 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-36',
            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>

                {/* Summary cards */}
                <SummaryCards
                    pendingAffiliatesCount={pendingAffiliatesCount}
                    pendingCommissionsCount={pendingCommissionsCount}
                    pendingCommissionsTotal={pendingCommissionsTotal}
                    affiliates={affiliates}
                />

                {/* Per-course breakdown */}
                <CourseStatsSection courseStats={courseStats} />

                {/* Affiliators table */}
                <div className="rounded-2xl border border-border bg-card shadow-sm">
                    <div className="flex items-center gap-3 border-b border-border px-5 py-4">
                        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-800/40">
                            <Users className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                        </div>
                        <div>
                            <h2 className="text-sm font-bold">Daftar Affiliator</h2>
                            <p className="text-xs text-muted-foreground">Semua pengguna yang terdaftar program affiliate</p>
                        </div>
                    </div>
                    <div className="p-4">
                        <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>
                </div>
            </div>
        </>
    );
}

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