import { Head, useForm } from '@inertiajs/react';
import {
    Award,
    CheckCircle2,
    Download,
    Palette,
    RefreshCw,
    User,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { DataTable, type Column, type TableFilter } from '@/components/data-table';
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 CertificateItem = {
    id: number;
    certificate_number: string;
    issued_at: string;
    user: { id: number; name: string; email: string };
    course: { id: number; title: string; slug: string };
};

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

type CertificateSettings = {
    cert_title: string;
    cert_subtitle: string;
    cert_completion: string;
    cert_border_color: string;
    cert_primary_color: string;
    cert_signer_name: string;
    cert_signer_title: string;
    cert_signature_image: string | null;
    cert_background_image: string | null;
};

type Props = {
    certificates: CertificateItem[];
    courses: CourseOption[];
    globalSettings: CertificateSettings;
};

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

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

export default function AdminCertificatesIndex({ certificates, courses, globalSettings }: Props) {
    const [activeTab, setActiveTab] = useState<'list' | 'design'>('list');
    const [selectedTarget, setSelectedTarget] = useState<string>('global');
    const [isLoadingSettings, setIsLoadingSettings] = useState(false);

    const { data, setData, post, processing, errors, wasSuccessful } = useForm({
        course_id: '' as string | number,
        cert_title: globalSettings.cert_title,
        cert_subtitle: globalSettings.cert_subtitle,
        cert_completion: globalSettings.cert_completion,
        cert_border_color: globalSettings.cert_border_color,
        cert_primary_color: globalSettings.cert_primary_color,
        cert_signer_name: globalSettings.cert_signer_name,
        cert_signer_title: globalSettings.cert_signer_title,
        existing_signature_image: globalSettings.cert_signature_image,
        existing_background_image: globalSettings.cert_background_image,
        signature_file: null as File | null,
        background_file: null as File | null,
    });

    useEffect(() => {
        if (selectedTarget === 'global') {
            setData({
                course_id: '',
                cert_title: globalSettings.cert_title,
                cert_subtitle: globalSettings.cert_subtitle,
                cert_completion: globalSettings.cert_completion,
                cert_border_color: globalSettings.cert_border_color,
                cert_primary_color: globalSettings.cert_primary_color,
                cert_signer_name: globalSettings.cert_signer_name,
                cert_signer_title: globalSettings.cert_signer_title,
                existing_signature_image: globalSettings.cert_signature_image,
                existing_background_image: globalSettings.cert_background_image,
                signature_file: null,
                background_file: null,
            });
            return;
        }

        const courseId = selectedTarget.replace('course_', '');
        setIsLoadingSettings(true);

        fetch(`/admin/certificates/courses/${courseId}`)
            .then((res) => res.json())
            .then((resData: Partial<CertificateSettings>) => {
                setData({
                    course_id: courseId,
                    cert_title: resData.cert_title || globalSettings.cert_title,
                    cert_subtitle: resData.cert_subtitle || globalSettings.cert_subtitle,
                    cert_completion: resData.cert_completion || globalSettings.cert_completion,
                    cert_border_color: resData.cert_border_color || globalSettings.cert_border_color,
                    cert_primary_color: resData.cert_primary_color || globalSettings.cert_primary_color,
                    cert_signer_name: resData.cert_signer_name || globalSettings.cert_signer_name,
                    cert_signer_title: resData.cert_signer_title || globalSettings.cert_signer_title,
                    existing_signature_image: resData.cert_signature_image || null,
                    existing_background_image: resData.cert_background_image || null,
                    signature_file: null,
                    background_file: null,
                });
            })
            .catch(console.error)
            .finally(() => setIsLoadingSettings(false));
    }, [selectedTarget]);

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        post('/admin/certificates/settings', { preserveScroll: true, forceFormData: true });
    }

    // ── DataTable config ────────────────────────────────────────────────
    const columns: Column<CertificateItem>[] = [
        {
            key: 'user.name',
            header: 'Siswa',
            searchable: true,
            render: (c) => (
                <div className="flex items-center gap-3">
                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-900/30">
                        <User className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                    </div>
                    <div className="min-w-0">
                        <p className="truncate font-medium">{c.user.name}</p>
                        <p className="truncate text-xs text-muted-foreground">{c.user.email}</p>
                    </div>
                </div>
            ),
        },
        {
            key: 'course.title',
            header: 'Kelas',
            searchable: true,
            render: (c) => (
                <span className="font-medium">{c.course.title}</span>
            ),
        },
        {
            key: 'certificate_number',
            header: 'Nomor Sertifikat',
            headerClass: 'w-52',
            searchable: true,
            render: (c) => (
                <span className="rounded-lg bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">
                    {c.certificate_number}
                </span>
            ),
        },
        {
            key: 'issued_at',
            header: 'Tanggal Terbit',
            headerClass: 'w-36',
            render: (c) => (
                <span className="text-sm text-muted-foreground">{formatDate(c.issued_at)}</span>
            ),
        },
        {
            key: 'id',
            header: 'Aksi',
            sortable: false,
            headerClass: 'w-16',
            render: (c) => (
                <a
                    href={`/certificates/${c.id}/download`}
                    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="Download PDF"
                >
                    <Download className="h-3.5 w-3.5" />
                </a>
            ),
        },
    ];

    const courseIds = [...new Set(certificates.map((c) => c.course.id))];
    const courseFilterOptions = courses
        .filter((c) => courseIds.includes(c.id))
        .map((c) => ({ label: c.title, value: String(c.id) }));

    const filters: TableFilter[] = courseFilterOptions.length > 0
        ? [{ key: 'course.id', label: 'Kelas', options: courseFilterOptions }]
        : [];

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

            <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">
                                <Award 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">Manajemen Sertifikat</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{certificates.length}</span> sertifikat terbit
                                </p>
                            </div>
                        </div>
                        {/* Tab switcher */}
                        <div className="flex items-center gap-1 rounded-xl bg-blue-100/60 p-1 dark:bg-blue-900/30">
                            {([['list', 'Daftar Penerbitan'], ['design', 'Desainer Template']] as const).map(([tab, label]) => (
                                <button
                                    key={tab}
                                    onClick={() => setActiveTab(tab)}
                                    className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
                                        activeTab === tab
                                            ? 'bg-white text-blue-800 shadow-sm dark:bg-blue-800 dark:text-blue-100'
                                            : 'text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200'
                                    }`}
                                >
                                    {label}
                                </button>
                            ))}
                        </div>
                    </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>

                {/* ── TAB: LIST ─────────────────────────────────────────── */}
                {activeTab === 'list' && (
                    <DataTable
                        data={certificates as unknown as Record<string, unknown>[]}
                        columns={columns as Column<Record<string, unknown>>[]}
                        filters={filters}
                        searchPlaceholder="Cari nama siswa, kelas, atau nomor sertifikat..."
                        defaultPageSize={25}
                        emptyIcon={Award}
                        emptyMessage="Belum ada sertifikat"
                        emptyDescription="Sertifikat muncul di sini setelah siswa menyelesaikan kelas."
                    />
                )}

                {/* ── TAB: DESIGN ───────────────────────────────────────── */}
                {activeTab === 'design' && (
                    <div className="grid gap-6 lg:grid-cols-[1.2fr_1.8fr]">
                        {/* Editor Controls */}
                        <div className="flex flex-col gap-5 rounded-2xl border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <div>
                                <h2 className="flex items-center gap-2 text-lg font-bold dark:text-foreground">
                                    <Palette className="h-5 w-5 text-blue-500" />
                                    Pengaturan Visual
                                </h2>
                                <p className="mt-0.5 text-xs text-muted-foreground">Edit teks, warna, dan tanda tangan sertifikat</p>
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="target-select" className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                    Cakupan Template
                                </Label>
                                <select
                                    id="target-select"
                                    value={selectedTarget}
                                    onChange={(e) => setSelectedTarget(e.target.value)}
                                    className="cursor-pointer rounded-xl border border-input bg-background px-3.5 py-2 text-sm font-medium outline-none transition-all focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                                >
                                    <option value="global">Default Global (Semua Kelas)</option>
                                    <optgroup label="Kustomisasi Per Kelas">
                                        {courses.map((course) => (
                                            <option key={course.id} value={`course_${course.id}`}>
                                                {course.title}
                                            </option>
                                        ))}
                                    </optgroup>
                                </select>
                            </div>

                            {isLoadingSettings ? (
                                <div className="flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground">
                                    <RefreshCw className="h-6 w-6 animate-spin text-blue-500" />
                                    <span className="text-xs font-medium">Memuat konfigurasi...</span>
                                </div>
                            ) : (
                                <form onSubmit={handleSubmit} className="flex flex-col gap-4">
                                    <input type="hidden" name="course_id" value={data.course_id} />

                                    <div className="grid gap-2">
                                        <Label htmlFor="cert_title" className="text-sm font-semibold">Label Atas</Label>
                                        <Input id="cert_title" value={data.cert_title} onChange={(e) => setData('cert_title', e.target.value)} placeholder="Sertifikat Kelulusan" className="rounded-xl" />
                                        {errors.cert_title && <p className="text-xs text-destructive">{errors.cert_title}</p>}
                                    </div>

                                    <div className="grid gap-2">
                                        <Label htmlFor="cert_subtitle" className="text-sm font-semibold">Sub-Label</Label>
                                        <Input id="cert_subtitle" value={data.cert_subtitle} onChange={(e) => setData('cert_subtitle', e.target.value)} placeholder="Dengan bangga diberikan kepada" className="rounded-xl" />
                                        {errors.cert_subtitle && <p className="text-xs text-destructive">{errors.cert_subtitle}</p>}
                                    </div>

                                    <div className="grid gap-2">
                                        <Label htmlFor="cert_completion" className="text-sm font-semibold">Teks Kelulusan</Label>
                                        <Input id="cert_completion" value={data.cert_completion} onChange={(e) => setData('cert_completion', e.target.value)} placeholder="yang telah berhasil menyelesaikan kursus" className="rounded-xl" />
                                        {errors.cert_completion && <p className="text-xs text-destructive">{errors.cert_completion}</p>}
                                    </div>

                                    <div className="grid grid-cols-2 gap-3 border-t border-blue-50 pt-4 dark:border-blue-900/20">
                                        <div className="grid gap-2">
                                            <Label htmlFor="cert_signer_name" className="text-sm font-semibold">Nama Penandatangan</Label>
                                            <Input id="cert_signer_name" value={data.cert_signer_name} onChange={(e) => setData('cert_signer_name', e.target.value)} placeholder="Budi Santoso" className="rounded-xl" />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="cert_signer_title" className="text-sm font-semibold">Jabatan</Label>
                                            <Input id="cert_signer_title" value={data.cert_signer_title} onChange={(e) => setData('cert_signer_title', e.target.value)} placeholder="CEO / Mentor" className="rounded-xl" />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-2 gap-3 border-t border-blue-50 pt-4 dark:border-blue-900/20">
                                        <div className="grid gap-2">
                                            <Label htmlFor="cert_border_color" className="text-sm font-semibold">Warna Border</Label>
                                            <div className="flex items-center gap-2">
                                                <input id="cert_border_color" type="color" value={data.cert_border_color} onChange={(e) => setData('cert_border_color', e.target.value)} className="h-9 w-10 cursor-pointer rounded-lg border border-input p-0.5" />
                                                <Input value={data.cert_border_color} onChange={(e) => setData('cert_border_color', e.target.value)} className="rounded-xl font-mono text-xs" />
                                            </div>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="cert_primary_color" className="text-sm font-semibold">Warna Teks Utama</Label>
                                            <div className="flex items-center gap-2">
                                                <input id="cert_primary_color" type="color" value={data.cert_primary_color} onChange={(e) => setData('cert_primary_color', e.target.value)} className="h-9 w-10 cursor-pointer rounded-lg border border-input p-0.5" />
                                                <Input value={data.cert_primary_color} onChange={(e) => setData('cert_primary_color', e.target.value)} className="rounded-xl font-mono text-xs" />
                                            </div>
                                        </div>
                                    </div>

                                    <div className="grid gap-3 border-t border-blue-50 pt-4 dark:border-blue-900/20">
                                        <div className="grid gap-2">
                                            <Label htmlFor="signature_file" className="text-sm font-semibold">Tanda Tangan Digital (PNG)</Label>
                                            <Input id="signature_file" type="file" accept="image/png, image/jpeg" onChange={(e) => setData('signature_file', e.target.files?.[0] || null)} className="cursor-pointer rounded-xl text-xs" />
                                            <p className="text-[10px] text-muted-foreground">Rekomendasi file gambar transparan (max 1MB).</p>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="background_file" className="text-sm font-semibold">Gambar Background (Opsional)</Label>
                                            <Input id="background_file" type="file" accept="image/*" onChange={(e) => setData('background_file', e.target.files?.[0] || null)} className="cursor-pointer rounded-xl text-xs" />
                                            <p className="text-[10px] text-muted-foreground">Rekomendasi rasio landscape A4 (max 2MB).</p>
                                        </div>
                                    </div>

                                    <div className="flex flex-col gap-3 border-t border-blue-50 pt-4 dark:border-blue-900/20">
                                        <Button type="submit" disabled={processing} className="w-full rounded-xl bg-blue-600 font-semibold hover:bg-blue-700">
                                            Simpan Desain Template
                                        </Button>
                                        {wasSuccessful && (
                                            <div className="flex items-center justify-center gap-1.5 rounded-xl bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400">
                                                <CheckCircle2 className="h-4 w-4 shrink-0" />
                                                Template berhasil diperbarui!
                                            </div>
                                        )}
                                    </div>
                                </form>
                            )}
                        </div>

                        {/* Live Preview */}
                        <div className="flex flex-col gap-4">
                            <div className="flex items-center justify-between px-2">
                                <span className="text-sm font-semibold">Pratinjau Langsung</span>
                                <span className="rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-medium text-sky-700 dark:bg-sky-900/30 dark:text-sky-400">Landscape A4</span>
                            </div>
                            <div className="relative w-full overflow-hidden rounded-2xl border border-blue-100 bg-slate-50/50 shadow-md dark:border-blue-900/30">
                                <div className="flex aspect-[297/210] w-full items-center justify-center p-6">
                                    <div
                                        className="relative flex h-full w-full flex-col justify-between rounded-xl p-8 text-center shadow-xl transition-all duration-300"
                                        style={{
                                            border: `8px solid ${data.cert_border_color}`,
                                            background: data.background_file
                                                ? `url(${URL.createObjectURL(data.background_file)}) no-repeat center center / cover`
                                                : data.existing_background_image
                                                ? `url(${data.existing_background_image}) no-repeat center center / cover`
                                                : 'linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #eff6ff 100%)',
                                        }}
                                    >
                                        <div className="absolute left-2 top-2 h-10 w-10 border-l-3 border-t-3" style={{ borderColor: data.cert_border_color }} />
                                        <div className="absolute right-2 top-2 h-10 w-10 border-r-3 border-t-3" style={{ borderColor: data.cert_border_color }} />
                                        <div className="absolute bottom-2 left-2 h-10 w-10 border-b-3 border-l-3" style={{ borderColor: data.cert_border_color }} />
                                        <div className="absolute bottom-2 right-2 h-10 w-10 border-b-3 border-r-3" style={{ borderColor: data.cert_border_color }} />

                                        <div>
                                            <p className="mb-1.5 text-[9px] font-bold uppercase leading-none tracking-widest" style={{ color: data.cert_primary_color }}>
                                                {data.cert_title || 'Sertifikat Kelulusan'}
                                            </p>
                                            <h3 className="mb-3 text-lg font-extrabold leading-none tracking-wide" style={{ color: data.cert_primary_color }}>
                                                CERTIFICATE OF COMPLETION
                                            </h3>
                                            <p className="mb-4 text-[9px] text-slate-400">{data.cert_subtitle || 'Dengan bangga diberikan kepada'}</p>
                                        </div>

                                        <div>
                                            <div className="mb-2 inline-block min-w-[180px] border-b border-slate-200 pb-1.5 text-xl font-bold leading-none" style={{ color: data.cert_primary_color }}>
                                                NUR HIDAYAT
                                            </div>
                                            <p className="mb-1 text-[9px] text-slate-500">{data.cert_completion || 'yang telah berhasil menyelesaikan kursus'}</p>
                                            <p className="text-xs font-bold leading-tight" style={{ color: data.cert_primary_color }}>
                                                {selectedTarget === 'global'
                                                    ? 'Strategi Digital Marketing untuk UMKM'
                                                    : courses.find((c) => `course_${c.id}` === selectedTarget)?.title || 'Judul Kelas Contoh'}
                                            </p>
                                        </div>

                                        <div className="mt-4 flex items-end justify-between">
                                            <div className="text-left">
                                                <div className="text-[8px] text-slate-400">Nomor Sertifikat</div>
                                                <div className="font-mono text-[9px] font-semibold text-slate-600">CERT-ABC123XY-2026</div>
                                                <div className="mt-1 text-[8px] text-slate-400">Tanggal Dikeluarkan</div>
                                                <div className="text-[9px] font-semibold text-slate-600">{formatDate(new Date().toISOString())}</div>
                                            </div>
                                            <div className="flex min-w-[120px] flex-col items-center">
                                                {data.signature_file ? (
                                                    <img src={URL.createObjectURL(data.signature_file)} alt="signature" className="mb-1 max-h-[35px] object-contain" />
                                                ) : data.existing_signature_image ? (
                                                    <img src={data.existing_signature_image} alt="signature" className="mb-1 max-h-[35px] object-contain" />
                                                ) : (
                                                    <div className="h-[35px]" />
                                                )}
                                                <div className="w-full border-t border-slate-200 pt-1 text-[9px] font-bold text-slate-700">
                                                    {data.cert_signer_name || 'Pakandi Team'}
                                                </div>
                                                <div className="text-[8px] text-slate-400">{data.cert_signer_title || 'Direktur Utama'}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}

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