import { useEffect, useState } from 'react';
import { Button, Modal, toast } from '@heroui/react';
import { ShareIcon, ClipboardDocumentIcon, LockOpenIcon, EyeIcon } from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { MasterCrudPage } from '@/Components/MasterCrudPage';
import { DetailModal, DetailRow } from '@/Components/ui/DetailModal';
import { FilePreview } from '@/Components/ui/FilePreview';
import { api } from '@/lib/api';
import { useQueryClient } from '@tanstack/react-query';
import { formatDate } from '@/lib/formatDate';

interface Narasumber {
    id: number;
    nama: string;
    keahlian: string | null;
    instansi: string | null;
    nomor_hp: string | null;
    email: string | null;
    status: string;
    share_token: string;
    view_token: string;
    share_submitted_at: string | null;
}

async function copyText(text: string) {
    try {
        if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(text);
        } else {
            // ponytail: execCommand fallback for non-HTTPS/LAN access
            const ta = document.createElement('textarea');
            ta.value = text;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
        }
        toast.success('Link disalin');
    } catch {
        toast.danger('Gagal menyalin link');
    }
}

function LinkRow({ label, url }: { label: string; url: string }) {
    return (
        <div className="flex flex-col gap-1">
            <span className="text-xs font-medium text-gray-500">{label}</span>
            <div className="flex items-center gap-2">
                <input readOnly value={url} className="flex-1 min-w-0 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm" />
                <Button
                    variant="outline"
                    onPress={() => copyText(url)}
                    className="shrink-0"
                >
                    <ClipboardDocumentIcon className="w-4 h-4" />
                </Button>
            </div>
        </div>
    );
}

function ShareModal({ row, onClose }: { row: Narasumber; onClose: () => void }) {
    const qc = useQueryClient();
    const origin = window.location.origin;
    const [unlocking, setUnlocking] = useState(false);

    async function unlock() {
        setUnlocking(true);
        try {
            await api.post(`/master/narasumber/${row.id}/unlock`);
            qc.invalidateQueries({ queryKey: ['narasumber'] });
            toast.success('Formulir dibuka kembali');
            onClose();
        } finally {
            setUnlocking(false);
        }
    }

    return (
        <Modal isOpen onOpenChange={(open) => { if (!open) onClose(); }}>
            <Modal.Backdrop>
                <Modal.Container>
                    <Modal.Dialog className="max-w-lg w-full bg-white">
                        <Modal.Header>
                            <Modal.Heading>Bagikan - {row.nama}</Modal.Heading>
                        </Modal.Header>
                        <Modal.Body className="flex flex-col gap-4">
                            <LinkRow label="Link isi (untuk narasumber)" url={`${origin}/n/isi/${row.share_token}`} />
                            <LinkRow label="Link lihat saja" url={`${origin}/n/lihat/${row.view_token}`} />

                            {row.share_submitted_at ? (
                                <div className="flex items-center justify-between rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-sm text-amber-800">
                                    <span>Sudah diisi {formatDate(row.share_submitted_at)} - link terkunci</span>
                                    <Button variant="outline" onPress={unlock} isDisabled={unlocking} className="shrink-0">
                                        <LockOpenIcon className="w-4 h-4" /> Buka kunci
                                    </Button>
                                </div>
                            ) : (
                                <p className="text-sm text-gray-500">Belum diisi narasumber. Link isi akan terkunci otomatis setelah dikirim.</p>
                            )}
                        </Modal.Body>
                        <Modal.Footer>
                            <Button variant="outline" onPress={onClose}>Tutup</Button>
                        </Modal.Footer>
                    </Modal.Dialog>
                </Modal.Container>
            </Modal.Backdrop>
        </Modal>
    );
}

function ViewModal({ row, onClose }: { row: Narasumber; onClose: () => void }) {
    const [data, setData] = useState<any>(null);

    useEffect(() => {
        api.get(`/public/narasumber/lihat/${row.view_token}`)
            .then(({ data }) => setData(data))
            .catch(() => { toast.danger('Gagal memuat data'); onClose(); });
    }, [row.view_token]);

    return (
        <DetailModal isOpen onOpenChange={(open) => { if (!open) onClose(); }} title={`Data Narasumber - ${row.nama}`}>
            {!data ? (
                <p className="text-sm text-gray-500 sm:col-span-2">Memuat...</p>
            ) : (
                <>
                    {data.submitted_at && (
                        <DetailRow span2 label="Diisi oleh narasumber lewat link" value={new Date(data.submitted_at).toLocaleString('id-ID', { dateStyle: 'long', timeStyle: 'short' })} />
                    )}
                    <DetailRow label="Nama" value={data.data.nama} />
                    <DetailRow label="Keahlian" value={data.data.keahlian} />
                    <DetailRow label="Instansi" value={data.data.instansi} />
                    <DetailRow label="Nomor HP" value={data.data.nomor_hp} />
                    <DetailRow label="Email" value={data.data.email} />
                    <div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-3">
                        {data.data.berkas.map((b: any) => (
                            <DetailRow key={b.col} label={b.label} value={b.url ? <FilePreview url={b.url} size={140} /> : <span className="italic text-gray-400">Belum diisi</span>} />
                        ))}
                    </div>
                </>
            )}
        </DetailModal>
    );
}

function StatusBadge({ status }: { status: string }) {
    const color = status === 'Aktif' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500';
    return <span className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${color}`}>{status}</span>;
}

export default function NarasumberPage() {
    const [shareRow, setShareRow] = useState<Narasumber | null>(null);
    const [viewRow, setViewRow] = useState<Narasumber | null>(null);

    return (
        <AppLayout>
            <MasterCrudPage<Narasumber>
                title="Master Narasumber"
                resourceKey="narasumber"
                apiPath="/master/narasumber"
                menuKey="narasumber"
                emptyForm={{ nama: '', keahlian: '', instansi: '', nomor_hp: '', email: '', status: 'Aktif' }}
                rowActionsExtra={(row) => (
                    <>
                        <button
                            type="button"
                            onClick={() => setViewRow(row)}
                            title="Lihat"
                            className="p-1.5 rounded-md bg-sky-500 text-white hover:bg-sky-600 cursor-pointer"
                        >
                            <EyeIcon className="w-4 h-4" />
                        </button>
                        <button
                            type="button"
                            onClick={() => setShareRow(row)}
                            title="Bagikan"
                            className="p-1.5 rounded-md bg-emerald-500 text-white hover:bg-emerald-600 cursor-pointer"
                        >
                            <ShareIcon className="w-4 h-4" />
                        </button>
                    </>
                )}
                columns={[
                    { header: 'Nama', cell: (r) => r.nama, sortKey: (r) => r.nama },
                    { header: 'Keahlian', cell: (r) => r.keahlian ?? '-', sortKey: (r) => r.keahlian },
                    { header: 'Instansi', cell: (r) => r.instansi ?? '-', sortKey: (r) => r.instansi },
                    { header: 'Berkas', cell: (r) => (r.share_submitted_at ? 'Sudah diisi' : 'Belum'), sortKey: (r) => r.share_submitted_at },
                    { header: 'Status', cell: (r) => <StatusBadge status={r.status} />, sortKey: (r) => r.status },
                ]}
                fields={[
                    { name: 'nama', label: 'Nama', required: true },
                    { name: 'keahlian', label: 'Keahlian', type: 'textarea' },
                    { name: 'instansi', label: 'Instansi' },
                    { name: 'nomor_hp', label: 'Nomor HP' },
                    { name: 'email', label: 'Email', type: 'email' },
                    {
                        name: 'status', label: 'Status', type: 'select',
                        options: ['Aktif', 'Tidak Aktif'].map((v) => ({ id: v, label: v })),
                    },
                    { name: 'berkas_ktp', label: 'KTP', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_npwp', label: 'NPWP', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_cv', label: 'CV', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_bnsp', label: 'BNSP', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_materi', label: 'Materi', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_cover_rekening', label: 'Cover Rekening', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_foto', label: 'Foto Diri (untuk Flyer Acara)', type: 'file', folder: 'narasumber' },
                    { name: 'berkas_pendukung', label: 'Berkas Pendukung', type: 'file', folder: 'narasumber' },
                ]}
            />

            {viewRow && <ViewModal row={viewRow} onClose={() => setViewRow(null)} />}
            {shareRow && <ShareModal row={shareRow} onClose={() => setShareRow(null)} />}
        </AppLayout>
    );
}