import { useEffect, useState } from 'react';
import { Head, router } from '@inertiajs/react';
import { Button } from '@heroui/react';
import { useQueryClient } from '@tanstack/react-query';
import AppLayout from '@/Layouts/AppLayout';
import { api, getErrorMessage } from '@/lib/api';
import { formatDate } from '@/lib/formatDate';
import { useAuth } from '@/hooks/useAuth';
import { useConfirm } from '@/hooks/useConfirm';
import {
    ArrowLeftIcon,
    PencilSquareIcon,
    TrashIcon,
    SparklesIcon,
    CalendarDaysIcon,
    UserIcon,
    CheckIcon,
} from '@heroicons/react/24/solid';

interface PanduanDetail {
    id: number;
    title: string;
    slug: string;
    category: 'teknis' | 'sop' | 'pengumuman' | 'lainnya';
    excerpt?: string;
    content: string;
    cover_image?: string;
    is_active: boolean;
    show_on_login: boolean;
    priority: number;
    author?: { id: number; name: string };
    updater?: { id: number; name: string };
    created_at: string;
    updated_at: string;
    is_read?: boolean;
}

const CATEGORY_BADGES: Record<string, { label: string; cls: string }> = {
    teknis: { label: 'Panduan Teknis / Tutorial', cls: 'bg-sky-100 text-sky-700' },
    sop: { label: 'Standar Operasional (SOP)', cls: 'bg-emerald-100 text-emerald-700' },
    pengumuman: { label: 'Pengumuman', cls: 'bg-amber-100 text-amber-700' },
    lainnya: { label: 'Lainnya', cls: 'bg-gray-100 text-gray-600' },
};

export default function PanduanShow({ id }: { id: number }) {
    const { canWrite, canDelete } = useAuth();
    const allowDelete = canDelete('panduan');
    const confirm = useConfirm();
    const queryClient = useQueryClient();

    const [data, setData] = useState<PanduanDetail | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [togglingRead, setTogglingRead] = useState(false);

    useEffect(() => {
        let isMounted = true;
        setLoading(true);
        api.get<PanduanDetail>(`/panduans/${id}`)
            .then((res) => {
                if (isMounted) setData(res.data);
            })
            .catch((err) => {
                if (isMounted) setError(getErrorMessage(err, 'Gagal memuat panduan.'));
            })
            .finally(() => {
                if (isMounted) setLoading(false);
            });

        return () => {
            isMounted = false;
        };
    }, [id]);

    async function handleToggleRead() {
        if (!data) return;
        setTogglingRead(true);
        try {
            const res = await api.post<{ success: boolean; is_read: boolean }>(`/panduans/${id}/toggle-read`);
            setData((prev) => prev ? { ...prev, is_read: res.data.is_read } : prev);
            queryClient.invalidateQueries({ queryKey: ['panduans'] });
            queryClient.invalidateQueries({ queryKey: ['sidebar-badges'] });
        } catch (err) {
            console.error('Failed to toggle read status:', err);
        } finally {
            setTogglingRead(false);
        }
    }

    async function handleDelete() {
        if (!data) return;
        if (
            await confirm({
                title: 'Hapus Panduan',
                description: `Apakah Anda yakin ingin menghapus panduan "${data.title}"? Tindakan ini tidak dapat dibatalkan.`,
                confirmLabel: 'Hapus',
            })
        ) {
            try {
                await api.delete(`/panduans/${id}`);
                router.visit('/panduan');
            } catch (err) {
                alert(getErrorMessage(err, 'Gagal menghapus panduan.'));
            }
        }
    }

    if (loading) {
        return (
            <AppLayout>
                <div className="py-20 text-center text-sm text-gray-400">
                    Memuat panduan...
                </div>
            </AppLayout>
        );
    }

    if (error || !data) {
        return (
            <AppLayout>
                <div className="flex flex-col items-center justify-center py-16 gap-3">
                    <p className="text-sm text-gray-500">{error || 'Data panduan tidak ditemukan.'}</p>
                    <Button variant="outline" onPress={() => router.visit('/panduan')}>
                        <ArrowLeftIcon className="w-4 h-4" /> <span>Kembali ke Panduan</span>
                    </Button>
                </div>
            </AppLayout>
        );
    }

    const badge = CATEGORY_BADGES[data.category] || CATEGORY_BADGES.lainnya;

    return (
        <AppLayout>
            <Head title={data.title} />

            <div className="flex flex-col gap-5">
                {/* Standard Top Bar Card */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm">
                    <div className="flex items-center gap-3 min-w-0">
                        <button
                            type="button"
                            onClick={() => router.visit('/panduan')}
                            className="p-1.5 rounded-lg border border-gray-200 hover:bg-gray-50 text-gray-600 transition shrink-0 cursor-pointer"
                            title="Kembali ke Daftar Panduan"
                        >
                            <ArrowLeftIcon className="w-4 h-4" />
                        </button>
                        <h1 className="text-lg sm:text-xl font-bold text-gray-900 truncate">
                            {data.title}
                        </h1>
                    </div>

                    <div className="flex items-center gap-2 shrink-0">
                        <Button
                            variant={data.is_read ? 'outline' : 'primary'}
                            onPress={handleToggleRead}
                            isDisabled={togglingRead}
                            className="shrink-0"
                        >
                            <CheckIcon className={`w-4 h-4 ${data.is_read ? 'text-emerald-600' : 'text-white'}`} />
                            <span>{data.is_read ? 'Sudah Dibaca' : 'Tandai Sudah Dibaca'}</span>
                        </Button>
                        {canWrite && (
                            <Button
                                variant="outline"
                                onPress={() => router.visit(`/panduan/${data.id}/edit`)}
                                className="shrink-0"
                            >
                                <PencilSquareIcon className="w-4 h-4 text-amber-500" />
                                <span>Edit</span>
                            </Button>
                        )}
                        {allowDelete && (
                            <Button
                                variant="danger"
                                onPress={handleDelete}
                                className="shrink-0"
                            >
                                <TrashIcon className="w-4 h-4" />
                                <span>Hapus</span>
                            </Button>
                        )}
                    </div>
                </div>

                {/* Main Content Article Card */}
                <div className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                    {data.cover_image && (
                        <div className="w-full aspect-[16/9] max-h-[440px] overflow-hidden bg-gray-100 border-b border-gray-100">
                            <img
                                src={data.cover_image}
                                alt={data.title}
                                className="w-full h-full object-cover object-center"
                            />
                        </div>
                    )}

                    <div className="p-5 sm:p-8 space-y-6">
                        {/* Meta information */}
                        <div className="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-gray-100">
                            <div className="flex flex-wrap items-center gap-2">
                                <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${badge.cls}`}>
                                    {badge.label}
                                </span>

                                {data.is_read ? (
                                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800">
                                        <CheckIcon className="w-3.5 h-3.5 text-emerald-600" />
                                        Sudah Dibaca
                                    </span>
                                ) : (
                                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-sky-100 text-sky-800">
                                        <span className="w-2 h-2 rounded-full bg-sky-500 animate-pulse" />
                                        Belum Dibaca
                                    </span>
                                )}

                                {data.show_on_login && (
                                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800">
                                        <SparklesIcon className="w-3.5 h-3.5 text-amber-600" />
                                        Pop-up Login Aktif
                                    </span>
                                )}

                                {!data.is_active && (
                                    <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                                        Status: Draft
                                    </span>
                                )}
                            </div>

                            <div className="flex items-center gap-4 text-sm text-gray-500">
                                <div className="flex items-center gap-1.5">
                                    <CalendarDaysIcon className="w-4 h-4 text-gray-400" />
                                    <span>{formatDate(data.created_at)}</span>
                                </div>
                                {data.author && (
                                    <div className="flex items-center gap-1.5">
                                        <UserIcon className="w-4 h-4 text-gray-400" />
                                        <span>{data.author.name}</span>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Excerpt if present */}
                        {data.excerpt && (
                            <div className="p-4 sm:p-5 rounded-xl bg-sky-50/80 border border-sky-100 text-base text-sky-950 leading-[1.5] font-medium">
                                {data.excerpt}
                            </div>
                        )}

                        {/* Rich HTML Content */}
                        <div
                            className="prose prose-sky sm:prose-base md:prose-lg max-w-none text-gray-800 leading-[1.5] [&_p]:leading-[1.5] [&_li]:leading-[1.5] prose-img:rounded-xl prose-img:shadow-sm prose-img:mx-auto prose-headings:font-bold prose-headings:text-gray-900 prose-a:text-sky-600"
                            dangerouslySetInnerHTML={{ __html: data.content }}
                        />
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}