import { Head, router, useForm } from '@inertiajs/react';
import { CheckCircle, Clock, Copy, Check, Link2, TrendingUp, Wallet, GraduationCap, Building2, BookOpen, Users, ArrowRight, ShieldCheck } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type AffiliateCodeData = {
    id: number;
    code: string;
    status: 'pending' | 'approved' | 'rejected';
    commission_rate: number;
    total_earnings: number;
    pending_earnings: number;
    bank_name: string | null;
    bank_account: string | null;
    bank_holder: string | null;
};

type Commission = {
    id: number;
    amount: number;
    status: 'pending' | 'paid';
    affiliate_type: 'alumni' | 'non_alumni' | null;
    paid_at: string | null;
    created_at: string;
    order: { id: number; total_amount: number; created_at: string } | null;
    course: { id: number; title: string; slug: string } | null;
};

type AffiliateCourse = {
    id: number;
    title: string;
    slug: string;
    thumbnail: string | null;
    alumni_commission_rate: number | null;
    non_alumni_commission_rate: number | null;
    is_alumni: boolean;
};

type AvailableCourse = {
    id: number;
    title: string;
    slug: string;
    thumbnail: string | null;
    alumni_commission_rate: number | null;
    non_alumni_commission_rate: number | null;
};

type Paginator<T> = {
    data: T[];
    current_page: number;
    last_page: number;
    links: { url: string | null; label: string; active: boolean }[];
};

type Props = {
    affiliateCode: AffiliateCodeData | null;
    commissions: Paginator<Commission>;
    affiliateCourses: AffiliateCourse[];
    availableCourses: AvailableCourse[];
};

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashboard', href: '/dashboard' },
    { title: 'Program Affiliate', href: '/affiliate' },
];

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

// ── Landing Page (belum daftar) ───────────────────────────────────────────────
function AffiliateLanding({ availableCourses }: { availableCourses: AvailableCourse[] }) {
    const [loading, setLoading] = useState(false);

    function daftar() {
        setLoading(true);
        router.post('/affiliate/register', {}, {
            onFinish: () => setLoading(false),
        });
    }

    return (
        <div className="mx-auto max-w-2xl space-y-6 pb-10">
            {/* Hero */}
            <div className="rounded-2xl bg-gradient-to-br from-blue-50 to-sky-50 p-8 text-center ring-1 ring-blue-100">
                <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100">
                    <Link2 className="h-7 w-7 text-blue-600" />
                </div>
                <h1 className="text-2xl font-bold text-gray-900">Program Affiliate</h1>
                <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                    Dapatkan komisi setiap ada pembelian kelas melalui link referralmu.
                    Daftarkan dirimu dan mulai berbagi.
                </p>

                <div className="mt-6 flex flex-col items-center gap-3">
                    <Button
                        onClick={daftar}
                        disabled={loading}
                        className="gap-2 rounded-xl bg-blue-100 text-blue-700 hover:bg-blue-200 border border-blue-200 shadow-xs px-6"
                    >
                        {loading ? 'Mendaftar...' : (
                            <><ArrowRight className="h-4 w-4" /> Daftar Sebagai Affiliator</>
                        )}
                    </Button>
                    <p className="text-xs text-gray-400">
                        Pendaftaran akan ditinjau oleh admin. Kamu akan diberitahu hasilnya.
                    </p>
                </div>
            </div>

            {/* How it works */}
            <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                <h2 className="mb-4 font-bold text-gray-900">Cara Kerja</h2>
                <div className="space-y-4">
                    {[
                        { step: '1', title: 'Daftar & Tunggu Persetujuan', desc: 'Submit pendaftaran, admin akan review dan memberi keputusan.' },
                        { step: '2', title: 'Bagikan Link Referral', desc: 'Setelah disetujui, kamu mendapat link unik untuk dibagikan.' },
                        { step: '3', title: 'Dapatkan Komisi', desc: 'Setiap pembelian melalui linkmu menghasilkan komisi untukmu.' },
                    ].map((item) => (
                        <div key={item.step} className="flex items-start gap-3">
                            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-black text-blue-700">{item.step}</span>
                            <div>
                                <p className="text-sm font-semibold text-gray-900">{item.title}</p>
                                <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Available courses */}
            {availableCourses.length > 0 && (
                <div className="rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
                    <div className="border-b border-gray-100 px-6 py-4 flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-gray-400" />
                        <h2 className="font-bold text-gray-900">Kelas yang Bisa Diafiliasi</h2>
                    </div>
                    <div className="divide-y divide-gray-50">
                        {availableCourses.map((course) => (
                            <div key={course.id} className="flex items-center gap-4 px-6 py-4">
                                <div className="h-12 w-16 shrink-0 overflow-hidden rounded-lg bg-gray-100">
                                    {course.thumbnail ? (
                                        <img src={course.thumbnail} alt={course.title} className="h-full w-full object-cover" />
                                    ) : (
                                        <div className="flex h-full items-center justify-center">
                                            <BookOpen className="h-5 w-5 text-gray-300" />
                                        </div>
                                    )}
                                </div>
                                <div className="flex-1 min-w-0">
                                    <p className="font-semibold text-sm text-gray-900 truncate">{course.title}</p>
                                    <div className="mt-1 flex items-center gap-3 text-xs text-gray-400">
                                        {course.alumni_commission_rate !== null && (
                                            <span className="flex items-center gap-1">
                                                <GraduationCap className="h-3 w-3" /> Alumni {course.alumni_commission_rate}%
                                            </span>
                                        )}
                                        {course.non_alumni_commission_rate !== null && (
                                            <span className="flex items-center gap-1">
                                                <Users className="h-3 w-3" /> Umum {course.non_alumni_commission_rate}%
                                            </span>
                                        )}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}

// ── Panel (sudah daftar) ──────────────────────────────────────────────────────
function AffiliatePanel({ affiliateCode, commissions, affiliateCourses }: {
    affiliateCode: AffiliateCodeData;
    commissions: Paginator<Commission>;
    affiliateCourses: AffiliateCourse[];
}) {
    const [copied, setCopied] = useState(false);
    const refLink = `${window.location.origin}/ref/${affiliateCode.code}`;

    const bankForm = useForm({
        bank_name: affiliateCode.bank_name ?? '',
        bank_account: affiliateCode.bank_account ?? '',
        bank_holder: affiliateCode.bank_holder ?? '',
    });

    const isPending = affiliateCode.status === 'pending';
    const isRejected = affiliateCode.status === 'rejected';
    const isApproved = affiliateCode.status === 'approved';

    function copyLink(suffix = '') {
        navigator.clipboard.writeText(refLink + suffix);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    }

    function submitBankInfo(e: React.FormEvent) {
        e.preventDefault();
        bankForm.patch('/affiliate/bank-info', { preserveScroll: true });
    }

    const hasBankInfo = affiliateCode.bank_name && affiliateCode.bank_account && affiliateCode.bank_holder;

    return (
        <div className="mx-auto max-w-3xl space-y-6 pb-10">
            <div>
                <h1 className="text-2xl font-bold text-gray-900">Program Affiliate</h1>
                <p className="mt-1 text-sm text-gray-500">
                    Bagikan link referral dan dapatkan komisi setiap ada pembelian melalui link kamu.
                </p>
            </div>

            {/* Status Banner */}
            {isPending && (
                <div className="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-5">
                    <Clock className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <p className="font-semibold text-amber-800">Pendaftaran sedang direview</p>
                        <p className="mt-0.5 text-sm text-amber-700">
                            Admin sedang memverifikasi pendaftaran affiliate kamu. Link referral aktif setelah disetujui.
                            Kamu tetap bisa membagikan kelas yang sudah kamu ikuti (rate alumni).
                        </p>
                    </div>
                </div>
            )}
            {isRejected && (
                <div className="flex items-start gap-3 rounded-2xl border border-red-200 bg-red-50 p-5">
                    <p className="font-semibold text-red-800">Pendaftaran affiliate ditolak oleh admin.</p>
                </div>
            )}
            {isApproved && (
                <div className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
                    <ShieldCheck className="h-5 w-5 shrink-0 text-emerald-500" />
                    <p className="text-sm font-semibold text-emerald-800">Affiliator aktif — kamu sudah disetujui.</p>
                </div>
            )}

            {/* Stats */}
            <div className="grid gap-4 sm:grid-cols-3">
                <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-black/5">
                    <div className="flex items-center gap-2.5 text-gray-400 mb-3">
                        <Link2 className="h-4 w-4" />
                        <span className="text-xs font-semibold uppercase tracking-wider">Kode Referral</span>
                    </div>
                    <p className="font-mono text-2xl font-black text-gray-900">{affiliateCode.code}</p>
                    {isApproved && (
                        <p className="mt-1 text-xs text-gray-400">Rate umum {affiliateCode.commission_rate}%</p>
                    )}
                </div>
                <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-black/5">
                    <div className="flex items-center gap-2.5 text-gray-400 mb-3">
                        <Wallet className="h-4 w-4" />
                        <span className="text-xs font-semibold uppercase tracking-wider">Komisi Dibayar</span>
                    </div>
                    <p className="text-2xl font-black text-emerald-600">{formatPrice(affiliateCode.total_earnings)}</p>
                </div>
                <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-black/5">
                    <div className="flex items-center gap-2.5 text-gray-400 mb-3">
                        <TrendingUp className="h-4 w-4" />
                        <span className="text-xs font-semibold uppercase tracking-wider">Menunggu</span>
                    </div>
                    <p className="text-2xl font-black text-amber-600">{formatPrice(affiliateCode.pending_earnings)}</p>
                </div>
            </div>

            {/* Referral Link */}
            {(isApproved || affiliateCourses.some((c) => c.is_alumni)) && (
                <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <h2 className="mb-4 font-bold text-gray-900">Link Referral</h2>
                    <div className="flex items-center gap-3 rounded-xl bg-gray-50 p-3">
                        <p className="flex-1 truncate font-mono text-sm text-gray-700">{refLink}</p>
                        <button
                            onClick={() => copyLink()}
                            className="flex shrink-0 items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition-colors"
                        >
                            {copied ? (
                                <><Check className="h-3.5 w-3.5 text-emerald-500" /><span className="text-emerald-600">Tersalin</span></>
                            ) : (
                                <><Copy className="h-3.5 w-3.5" />Salin</>
                            )}
                        </button>
                    </div>
                    <p className="mt-2.5 text-xs text-gray-400">
                        Gunakan <code className="rounded bg-gray-100 px-1 font-mono">/ref/{affiliateCode.code}?to=/courses/nama-kelas</code> untuk link langsung ke kelas tertentu.
                    </p>
                </div>
            )}

            {/* Affiliate Courses */}
            {affiliateCourses.length > 0 && (
                <div className="rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
                    <div className="border-b border-gray-100 px-6 py-4 flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-gray-400" />
                        <h2 className="font-bold text-gray-900">Kelas yang Bisa Kamu Bagikan</h2>
                    </div>
                    <div className="divide-y divide-gray-50">
                        {affiliateCourses.map((course) => (
                            <div key={`${course.id}-${course.is_alumni}`} className="flex items-center gap-4 px-6 py-4">
                                <div className="h-12 w-16 shrink-0 overflow-hidden rounded-lg bg-gray-100">
                                    {course.thumbnail ? (
                                        <img src={course.thumbnail} alt={course.title} className="h-full w-full object-cover" />
                                    ) : (
                                        <div className="flex h-full items-center justify-center">
                                            <BookOpen className="h-5 w-5 text-gray-300" />
                                        </div>
                                    )}
                                </div>
                                <div className="flex-1 min-w-0">
                                    <p className="font-semibold text-sm text-gray-900 truncate">{course.title}</p>
                                    <div className="mt-1 flex items-center gap-2 flex-wrap">
                                        {course.is_alumni && (
                                            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-700">
                                                <GraduationCap className="h-3 w-3" /> Alumni
                                            </span>
                                        )}
                                        {course.alumni_commission_rate !== null && (
                                            <span className="text-xs text-gray-400">Alumni {course.alumni_commission_rate}%</span>
                                        )}
                                        {course.non_alumni_commission_rate !== null && (
                                            <span className="text-xs text-gray-400">Umum {course.non_alumni_commission_rate}%</span>
                                        )}
                                    </div>
                                </div>
                                <button
                                    onClick={() => copyLink(`?to=/courses/${course.slug}`)}
                                    className="flex shrink-0 items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition-colors"
                                >
                                    <Copy className="h-3 w-3" />
                                    Salin Link
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Commission History */}
            <div className="rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
                <div className="border-b border-gray-100 px-6 py-4 flex items-center gap-2">
                    <TrendingUp className="h-4 w-4 text-gray-400" />
                    <h2 className="font-bold text-gray-900">Riwayat Komisi</h2>
                </div>
                {commissions.data.length > 0 ? (
                    <div className="divide-y divide-gray-50">
                        {commissions.data.map((commission) => (
                            <div key={commission.id} className="flex items-center justify-between px-6 py-4">
                                <div>
                                    <div className="flex items-center gap-2">
                                        <p className="font-semibold text-sm text-gray-900">
                                            {commission.course?.title ?? `Order #${commission.order?.id}`}
                                        </p>
                                        {commission.affiliate_type === 'alumni' && (
                                            <span className="rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700">Alumni</span>
                                        )}
                                        {commission.affiliate_type === 'non_alumni' && (
                                            <span className="rounded-full bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-700">Non-alumni</span>
                                        )}
                                    </div>
                                    <p className="text-xs text-gray-400 mt-0.5">
                                        {new Date(commission.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
                                    </p>
                                </div>
                                <div className="text-right">
                                    <p className="font-bold text-gray-900">{formatPrice(commission.amount)}</p>
                                    {commission.status === 'paid' ? (
                                        <span className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-600">
                                            <CheckCircle className="h-3 w-3" />Dibayar
                                        </span>
                                    ) : (
                                        <span className="inline-flex items-center gap-1 text-xs font-semibold text-amber-600">
                                            <Clock className="h-3 w-3" />Menunggu
                                        </span>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className="px-6 py-12 text-center">
                        <TrendingUp className="mx-auto mb-3 h-8 w-8 text-gray-200" />
                        <p className="text-sm text-gray-400">Belum ada komisi. Bagikan link referral kamu!</p>
                    </div>
                )}
            </div>

            {/* Bank Info */}
            <div className="rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
                <div className="border-b border-gray-100 px-6 py-4 flex items-center gap-2">
                    <Building2 className="h-4 w-4 text-gray-400" />
                    <h2 className="font-bold text-gray-900">Informasi Rekening Pembayaran</h2>
                    {hasBankInfo && (
                        <span className="ml-auto rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-700">Tersimpan</span>
                    )}
                </div>
                <form onSubmit={submitBankInfo} className="flex flex-col gap-4 p-6">
                    <p className="text-sm text-gray-500">
                        Isi rekening bank agar admin bisa mentransfer komisi langsung ke akunmu.
                    </p>
                    <div className="grid gap-2">
                        <Label htmlFor="bank_name" className="font-semibold text-sm">Nama Bank</Label>
                        <Input
                            id="bank_name"
                            value={bankForm.data.bank_name}
                            onChange={(e) => bankForm.setData('bank_name', e.target.value)}
                            placeholder="Contoh: BCA, Mandiri, BRI"
                            className="rounded-xl"
                        />
                        {bankForm.errors.bank_name && <p className="text-xs text-red-500">{bankForm.errors.bank_name}</p>}
                    </div>
                    <div className="grid gap-2">
                        <Label htmlFor="bank_account" className="font-semibold text-sm">Nomor Rekening</Label>
                        <Input
                            id="bank_account"
                            value={bankForm.data.bank_account}
                            onChange={(e) => bankForm.setData('bank_account', e.target.value)}
                            placeholder="Contoh: 1234567890"
                            className="rounded-xl"
                        />
                        {bankForm.errors.bank_account && <p className="text-xs text-red-500">{bankForm.errors.bank_account}</p>}
                    </div>
                    <div className="grid gap-2">
                        <Label htmlFor="bank_holder" className="font-semibold text-sm">Nama Pemilik Rekening</Label>
                        <Input
                            id="bank_holder"
                            value={bankForm.data.bank_holder}
                            onChange={(e) => bankForm.setData('bank_holder', e.target.value)}
                            placeholder="Nama sesuai buku tabungan"
                            className="rounded-xl"
                        />
                        {bankForm.errors.bank_holder && <p className="text-xs text-red-500">{bankForm.errors.bank_holder}</p>}
                    </div>
                    <div className="flex items-center gap-3">
                        <Button type="submit" disabled={bankForm.processing} className="rounded-xl bg-blue-100 text-blue-700 hover:bg-blue-200 border border-blue-200 shadow-xs">
                            Simpan Rekening
                        </Button>
                        {bankForm.wasSuccessful && (
                            <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
                                <CheckCircle className="h-4 w-4" />Tersimpan
                            </span>
                        )}
                    </div>
                </form>
            </div>
        </div>
    );
}

// ── Page ─────────────────────────────────────────────────────────────────────
export default function AffiliateIndex({ affiliateCode, commissions, affiliateCourses, availableCourses }: Props) {
    return (
        <>
            <Head title="Program Affiliate" />
            {affiliateCode === null ? (
                <AffiliateLanding availableCourses={availableCourses} />
            ) : (
                <AffiliatePanel
                    affiliateCode={affiliateCode}
                    commissions={commissions}
                    affiliateCourses={affiliateCourses}
                />
            )}
        </>
    );
}

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