import { 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 { DataTable, Column } from '@/Components/ui/DataTable';
import { SearchInput } from '@/Components/ui/SearchInput';
import { FilterSelect } from '@/Components/ui/FilterSelect';
import { RowActions } from '@/Components/ui/RowActions';
import { useList, useDelete } from '@/hooks/useResource';
import { useAuth } from '@/hooks/useAuth';
import { useConfirm } from '@/hooks/useConfirm';
import { formatDate } from '@/lib/formatDate';
import { api, getErrorMessage } from '@/lib/api';
import {
    PlusIcon,
    BookOpenIcon,
    TableCellsIcon,
    Squares2X2Icon,
    CheckCircleIcon,
    XCircleIcon,
    SparklesIcon,
    CheckIcon,
    EyeIcon,
} from '@heroicons/react/24/solid';

interface PanduanItem {
    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;
    is_read?: boolean;
    author?: { id: number; name: string };
    created_at: string;
    updated_at: string;
}

const CATEGORY_OPTIONS = [
    { id: 'teknis', label: 'Panduan Teknis / Tutorial' },
    { id: 'sop', label: 'Standar Operasional (SOP)' },
    { id: 'pengumuman', label: 'Pengumuman' },
    { id: 'lainnya', label: 'Lainnya' },
];

const STATUS_OPTIONS = [
    { id: '1', label: 'Aktif' },
    { id: '0', label: 'Draft' },
];

const POPUP_OPTIONS = [
    { id: '1', label: 'Pop-up Login: Aktif' },
    { id: '0', label: 'Pop-up Login: Tidak' },
];

const READ_STATUS_OPTIONS = [
    { id: 'unread', label: 'Belum Dibaca' },
    { id: 'read', label: 'Sudah Dibaca' },
];

const CATEGORY_BADGES: Record<string, { label: string; cls: string }> = {
    teknis: { label: 'Teknis / Tutorial', cls: 'bg-sky-100 text-sky-700' },
    sop: { label: '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 PanduanIndex() {
    const { canWrite, canDelete } = useAuth();
    const allowDelete = canDelete('panduan');
    const confirm = useConfirm();
    const queryClient = useQueryClient();

    const [search, setSearch] = useState('');
    const [category, setCategory] = useState('');
    const [readStatus, setReadStatus] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [popupFilter, setPopupFilter] = useState('');
    const [viewMode, setViewMode] = useState<'table' | 'grid'>('table');
    const [togglingId, setTogglingId] = useState<number | null>(null);

    const { data: paginated, isLoading } = useList<PanduanItem>(
        'panduans',
        '/panduans',
        {
            search: search || undefined,
            category: category || undefined,
            read_status: readStatus || undefined,
            is_active: statusFilter !== '' ? statusFilter === '1' : undefined,
            per_page: viewMode === 'grid' ? 12 : 50,
        }
    );

    const remove = useDelete('panduans', '/panduans');
    const items = paginated?.data ?? [];

    const filteredItems = popupFilter === ''
        ? items
        : items.filter((item) => (popupFilter === '1' ? item.show_on_login : !item.show_on_login));

    async function handleToggleRead(e: React.MouseEvent, item: PanduanItem) {
        e.stopPropagation();
        setTogglingId(item.id);
        try {
            await api.post(`/panduans/${item.id}/toggle-read`);
            queryClient.invalidateQueries({ queryKey: ['panduans'] });
            queryClient.invalidateQueries({ queryKey: ['sidebar-badges'] });
        } catch (err) {
            console.error('Failed to toggle read status:', err);
        } finally {
            setTogglingId(null);
        }
    }

    async function handleDelete(item: PanduanItem) {
        if (
            await confirm({
                title: 'Hapus Panduan',
                description: `Apakah Anda yakin ingin menghapus panduan "${item.title}"? Tindakan ini tidak dapat dibatalkan.`,
                confirmLabel: 'Hapus',
            })
        ) {
            remove.mutate(item.id);
        }
    }

    const columns: Column<PanduanItem>[] = [
        {
            header: 'Judul Panduan & Ringkasan',
            cell: (row) => (
                <div
                    className="flex items-start gap-3 cursor-pointer py-1 group"
                    onClick={() => router.visit(`/panduan/${row.id}`)}
                >
                    {row.cover_image ? (
                        <img
                            src={row.cover_image}
                            alt=""
                            className="w-14 aspect-[16/9] rounded-lg object-cover object-center shrink-0 border border-gray-200 mt-0.5 bg-gray-100"
                        />
                    ) : (
                        <div className="w-14 aspect-[16/9] rounded-lg bg-sky-50 border border-sky-100 flex items-center justify-center shrink-0 text-sky-600 mt-0.5">
                            <BookOpenIcon className="w-4 h-4" />
                        </div>
                    )}
                    <div className="min-w-0">
                        <div className="font-semibold text-sm text-gray-900 group-hover:text-sky-600 transition truncate max-w-md">
                            {row.title}
                        </div>
                        {row.excerpt && (
                            <p className="text-sm text-gray-500 line-clamp-1 max-w-md">
                                {row.excerpt}
                            </p>
                        )}
                    </div>
                </div>
            ),
            sortKey: (row) => row.title,
        },
        {
            header: 'Kategori',
            cell: (row) => {
                const info = CATEGORY_BADGES[row.category] || CATEGORY_BADGES.lainnya;
                return (
                    <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${info.cls}`}>
                        {info.label}
                    </span>
                );
            },
            sortKey: (row) => row.category,
        },
        {
            header: 'Pop-up Login',
            cell: (row) => (
                row.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" />
                        Aktif
                    </span>
                ) : (
                    <span className="text-sm text-gray-400">-</span>
                )
            ),
            sortKey: (row) => (row.show_on_login ? 1 : 0),
        },
        {
            header: 'Status',
            cell: (row) => (
                row.is_active ? (
                    <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">
                        <CheckCircleIcon className="w-3.5 h-3.5" />
                        Aktif
                    </span>
                ) : (
                    <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                        <XCircleIcon className="w-3.5 h-3.5" />
                        Draft
                    </span>
                )
            ),
            sortKey: (row) => (row.is_active ? 1 : 0),
        },
        {
            header: 'Status Baca',
            cell: (row) => (
                <button
                    type="button"
                    onClick={(e) => handleToggleRead(e, row)}
                    disabled={togglingId === row.id}
                    title={row.is_read ? 'Klik untuk tandai belum dibaca' : 'Klik untuk tandai sudah dibaca'}
                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold transition cursor-pointer border ${
                        row.is_read
                            ? 'bg-slate-50 text-slate-600 border-slate-200 hover:bg-slate-100'
                            : 'bg-sky-50 text-sky-700 border-sky-200 hover:bg-sky-100'
                    }`}
                >
                    {row.is_read ? (
                        <>
                            <CheckIcon className="w-3.5 h-3.5 text-slate-500" />
                            <span>Sudah Dibaca</span>
                        </>
                    ) : (
                        <>
                            <span className="w-2 h-2 rounded-full bg-sky-500 animate-pulse shrink-0" />
                            <span>Belum Dibaca</span>
                        </>
                    )}
                </button>
            ),
            sortKey: (row) => (row.is_read ? 1 : 0),
        },
        {
            header: 'Penulis',
            cell: (row) => (
                <span className="text-sm text-gray-700">
                    {row.author?.name || '-'}
                </span>
            ),
            sortKey: (row) => row.author?.name || '',
        },
        {
            header: 'Tanggal',
            cell: (row) => (
                <span className="text-sm text-gray-600 whitespace-nowrap">
                    {formatDate(row.created_at)}
                </span>
            ),
            sortKey: (row) => row.created_at,
        },
        {
            header: 'Aksi',
            cell: (row) => (
                <RowActions
                    onView={() => router.visit(`/panduan/${row.id}`)}
                    onEdit={canWrite ? () => router.visit(`/panduan/${row.id}/edit`) : undefined}
                    onDelete={allowDelete ? () => handleDelete(row) : undefined}
                />
            ),
        },
    ];

    return (
        <AppLayout>
            <Head title="Panduan & Teknis" />

            <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">
                    <h1 className="text-lg sm:text-xl font-bold text-gray-900">Panduan & Teknis</h1>
                    {canWrite && (
                        <Button
                            variant="primary"
                            onPress={() => router.visit('/panduan/create')}
                            className="shrink-0"
                        >
                            <PlusIcon className="w-4 h-4" /> <span>Panduan Baru</span>
                        </Button>
                    )}
                </div>

                {/* Filter & Content Card */}
                <div className="rounded-2xl border border-gray-200 bg-white shadow-sm p-4 sm:p-5 flex flex-col gap-4">
                    {/* Filters bar */}
                    <div className="flex flex-wrap items-center justify-between gap-3 pb-2 border-b border-gray-100">
                        <div className="flex flex-wrap items-center gap-2.5 flex-1 min-w-0">
                            <SearchInput
                                value={search}
                                onChange={setSearch}
                                placeholder="Cari panduan, SOP, tutorial..."
                            />
                            <FilterSelect
                                value={category}
                                onChange={setCategory}
                                items={CATEGORY_OPTIONS}
                                placeholder="Semua Kategori"
                            />
                            <FilterSelect
                                value={readStatus}
                                onChange={setReadStatus}
                                items={READ_STATUS_OPTIONS}
                                placeholder="Semua Status Baca"
                            />
                            {canWrite && (
                                <>
                                    <FilterSelect
                                        value={statusFilter}
                                        onChange={setStatusFilter}
                                        items={STATUS_OPTIONS}
                                        placeholder="Semua Status"
                                    />
                                    <FilterSelect
                                        value={popupFilter}
                                        onChange={setPopupFilter}
                                        items={POPUP_OPTIONS}
                                        placeholder="Semua Pop-up"
                                    />
                                </>
                            )}
                        </div>

                        {/* View Switcher (Table / Cards) */}
                        <div className="flex items-center gap-1 bg-gray-100/80 p-1 rounded-xl shrink-0">
                            <button
                                type="button"
                                onClick={() => setViewMode('table')}
                                title="Tampilan Tabel"
                                className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                                    viewMode === 'table'
                                        ? 'bg-white text-sky-600 shadow-xs'
                                        : 'text-gray-500 hover:text-gray-800'
                                }`}
                            >
                                <TableCellsIcon className="w-4 h-4" />
                            </button>
                            <button
                                type="button"
                                onClick={() => setViewMode('grid')}
                                title="Tampilan Kartu"
                                className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                                    viewMode === 'grid'
                                        ? 'bg-white text-sky-600 shadow-xs'
                                        : 'text-gray-500 hover:text-gray-800'
                                }`}
                            >
                                <Squares2X2Icon className="w-4 h-4" />
                            </button>
                        </div>
                    </div>

                    {/* View: Table */}
                    {viewMode === 'table' ? (
                        <DataTable
                            columns={columns}
                            rows={filteredItems}
                            rowKey={(row) => row.id}
                            isLoading={isLoading}
                            emptyText="Tidak ada panduan atau tutorial teknis yang ditemukan"
                            onRowClick={(row) => router.visit(`/panduan/${row.id}`)}
                        />
                    ) : (
                        /* View: Grid Cards */
                        isLoading ? (
                            <div className="py-12 text-center text-sm text-gray-400">
                                Memuat...
                            </div>
                        ) : filteredItems.length === 0 ? (
                            <div className="py-12 text-center text-sm text-gray-400">
                                Tidak ada panduan atau tutorial teknis yang ditemukan
                            </div>
                        ) : (
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                {filteredItems.map((item) => {
                                    const badge = CATEGORY_BADGES[item.category] || CATEGORY_BADGES.lainnya;

                                    return (
                                        <div
                                            key={item.id}
                                            className="rounded-xl border border-gray-200 bg-white hover:border-sky-300 hover:shadow-md transition flex flex-col justify-between overflow-hidden cursor-pointer group"
                                            onClick={() => router.visit(`/panduan/${item.id}`)}
                                        >
                                            {item.cover_image ? (
                                                <div className="w-full aspect-[16/9] overflow-hidden bg-gray-100 border-b border-gray-100">
                                                    <img
                                                        src={item.cover_image}
                                                        alt={item.title}
                                                        className="w-full h-full object-cover object-center group-hover:scale-105 transition duration-300"
                                                    />
                                                </div>
                                            ) : (
                                                <div className="w-full aspect-[16/9] bg-gradient-to-tr from-sky-50 to-slate-50 flex items-center justify-center border-b border-gray-100 text-sky-400">
                                                    <BookOpenIcon className="w-10 h-10" />
                                                </div>
                                            )}

                                            <div className="p-4 sm:p-5 flex-1 flex flex-col justify-between space-y-3.5">
                                                <div className="space-y-2">
                                                    <div className="flex flex-wrap items-center justify-between gap-1.5">
                                                        <div className="flex flex-wrap items-center gap-1.5">
                                                            <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${badge.cls}`}>
                                                                {badge.label}
                                                            </span>
                                                            {item.show_on_login && (
                                                                <span className="inline-flex items-center gap-1 px-2.5 py-0.5 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
                                                                </span>
                                                            )}
                                                            {!item.is_active && (
                                                                <span className="px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                                                                    Draft
                                                                </span>
                                                            )}
                                                        </div>

                                                        <button
                                                            type="button"
                                                            onClick={(e) => handleToggleRead(e, item)}
                                                            disabled={togglingId === item.id}
                                                            title={item.is_read ? 'Klik untuk tandai belum dibaca' : 'Klik untuk tandai sudah dibaca'}
                                                            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold transition cursor-pointer border ${
                                                                item.is_read
                                                                    ? 'bg-slate-50 text-slate-600 border-slate-200 hover:bg-slate-100'
                                                                    : 'bg-sky-50 text-sky-700 border-sky-200 hover:bg-sky-100'
                                                            }`}
                                                        >
                                                            {item.is_read ? (
                                                                <>
                                                                    <CheckIcon className="w-3 h-3 text-slate-500" />
                                                                    <span>Dibaca</span>
                                                                </>
                                                            ) : (
                                                                <>
                                                                    <span className="w-1.5 h-1.5 rounded-full bg-sky-500 animate-pulse shrink-0" />
                                                                    <span>Belum dibaca</span>
                                                                </>
                                                            )}
                                                        </button>
                                                    </div>

                                                    <h3 className="font-bold text-gray-900 text-base group-hover:text-sky-600 transition line-clamp-2 leading-snug">
                                                        {item.title}
                                                    </h3>

                                                    {item.excerpt && (
                                                        <p className="text-sm text-gray-600 line-clamp-2 leading-relaxed">
                                                            {item.excerpt}
                                                        </p>
                                                    )}
                                                </div>

                                                <div
                                                    className="pt-2.5 border-t border-gray-100 flex items-center justify-between text-sm text-gray-500"
                                                    onClick={(e) => e.stopPropagation()}
                                                >
                                                    <span>{formatDate(item.created_at)}</span>
                                                    <RowActions
                                                        onView={() => router.visit(`/panduan/${item.id}`)}
                                                        onEdit={canWrite ? () => router.visit(`/panduan/${item.id}/edit`) : undefined}
                                                        onDelete={allowDelete ? () => handleDelete(item) : undefined}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        )
                    )}
                </div>
            </div>
        </AppLayout>
    );
}