import { useEffect, useRef, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { fetchLinks, fetchFiltersMeta, postAction } from './api';
import { LinkCard } from './LinkCard';
import type { Filters, FiltersMeta, Link, ReadingStatus, ViewMode } from './types';

const KANBAN_COLS: Array<{ status: ReadingStatus; label: string; color: string }> = [
    { status: 'unread',        label: 'Sin leer',  color: 'border-sky-400' },
    { status: 'reading',       label: 'Leyendo',   color: 'border-amber-400' },
    { status: 'read',          label: 'Leído',     color: 'border-green-400' },
    { status: 'pending_review',label: 'Pendiente', color: 'border-violet-400' },
];

const DEFAULT_FILTERS: Filters = {
    search:         '',
    project_id:     '',
    category_id:    '',
    tag_id:         '',
    reading_status: '',
    is_favorite:    false,
    sort:           'created_at_desc',
};

interface Props {
    apiUrl:      string;
    metaUrl:     string;
    initialView: ViewMode;
    readUrl:     string;   // template: /enlaces/:id/leer
    editUrl:     string;   // template: /enlaces/:id/editar
}

export function LinksLibrary({ apiUrl, metaUrl, initialView, readUrl, editUrl }: Props) {
    const [view, setView]         = useState<ViewMode>(initialView);
    const [filters, setFilters]   = useState<Filters>(DEFAULT_FILTERS);
    const [search, setSearch]     = useState('');
    const [page, setPage]         = useState(1);
    const [showFilters, setShowFilters] = useState(false);
    const searchTimeout           = useRef<ReturnType<typeof setTimeout>>();
    const qc                      = useQueryClient();

    // Debounce search
    useEffect(() => {
        clearTimeout(searchTimeout.current);
        searchTimeout.current = setTimeout(() => {
            setFilters((f) => ({ ...f, search }));
            setPage(1);
        }, 350);
        return () => clearTimeout(searchTimeout.current);
    }, [search]);

    const queryKey = ['links', filters, page] as const;

    const { data, isFetching, isLoading, isError } = useQuery({
        queryKey,
        queryFn: () => fetchLinks(filters, page, apiUrl),
        placeholderData: (prev) => prev,
    });

    const { data: meta } = useQuery<FiltersMeta>({
        queryKey: ['links-meta'],
        queryFn: () => fetchFiltersMeta(metaUrl),
        staleTime: 60_000,
    });

    function refresh() {
        void qc.invalidateQueries({ queryKey: ['links'] });
    }

    function setFilter<K extends keyof Filters>(key: K, value: Filters[K]) {
        setFilters((f) => ({ ...f, [key]: value }));
        setPage(1);
    }

    function clearFilters() {
        setFilters(DEFAULT_FILTERS);
        setSearch('');
        setPage(1);
    }

    function resolveUrl(template: string, id: number) {
        return template.replace(':id', String(id));
    }

    const activeFilterCount = [
        filters.project_id, filters.category_id, filters.tag_id, filters.reading_status,
    ].filter(Boolean).length + (filters.is_favorite ? 1 : 0);

    const links = data?.data ?? [];
    const pagination = data?.meta;

    return (
        <div className="flex flex-col gap-4">
            {/* Barra de herramientas */}
            <div className="flex flex-wrap items-center gap-3">
                {/* Búsqueda */}
                <div className="relative flex-1 min-w-48">
                    <i className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none" />
                    <input
                        type="search"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        placeholder="Buscar por título, dominio, descripción..."
                        className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-white/10 bg-white dark:bg-white/5 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary"
                    />
                </div>

                {/* Filtros btn */}
                <button
                    onClick={() => setShowFilters((s) => !s)}
                    className={`inline-flex items-center gap-2 px-3 py-2 text-sm rounded-lg border transition-colors ${
                        showFilters || activeFilterCount > 0
                            ? 'bg-primary text-white border-primary'
                            : 'bg-white dark:bg-white/5 border-gray-300 dark:border-white/10 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/10'
                    }`}
                >
                    <i className="fa-solid fa-sliders" />
                    Filtros
                    {activeFilterCount > 0 && (
                        <span className="bg-white text-primary text-xs font-bold rounded-full w-4 h-4 flex items-center justify-center">
                            {activeFilterCount}
                        </span>
                    )}
                </button>

                {/* Sort */}
                <select
                    value={filters.sort}
                    onChange={(e) => setFilter('sort', e.target.value)}
                    className="text-sm border border-gray-300 dark:border-white/10 bg-white dark:bg-white/5 text-gray-700 dark:text-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                >
                    <option value="created_at_desc">Más recientes</option>
                    <option value="created_at_asc">Más antiguos</option>
                    <option value="title_asc">Título A–Z</option>
                    <option value="domain_asc">Dominio A–Z</option>
                </select>

                {/* View toggle */}
                <div className="flex rounded-lg border border-gray-300 dark:border-white/10 overflow-hidden">
                    {(['biblioteca', 'kanban'] as ViewMode[]).map((v) => (
                        <button
                            key={v}
                            onClick={() => setView(v)}
                            className={`px-3 py-2 text-sm transition-colors ${
                                view === v
                                    ? 'bg-primary text-white'
                                    : 'bg-white dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/10'
                            }`}
                            aria-label={v === 'biblioteca' ? 'Vista cuadrícula' : 'Vista kanban'}
                        >
                            <i className={`fa-solid ${v === 'biblioteca' ? 'fa-grip' : 'fa-columns'}`} />
                        </button>
                    ))}
                </div>

                {/* Contador */}
                {pagination && (
                    <span className="text-xs text-gray-500 dark:text-gray-400 ml-auto">
                        {isFetching && !isLoading ? <i className="fa-solid fa-spinner fa-spin mr-1" /> : null}
                        {pagination.total} enlace{pagination.total !== 1 ? 's' : ''}
                    </span>
                )}
            </div>

            {/* Panel de filtros */}
            {showFilters && (
                <div className="bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-4 flex flex-wrap gap-4">
                    {/* Proyecto */}
                    <div className="min-w-40">
                        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Proyecto</label>
                        <select
                            value={filters.project_id}
                            onChange={(e) => setFilter('project_id', e.target.value ? Number(e.target.value) : '')}
                            className="w-full text-sm border border-gray-300 dark:border-white/10 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary"
                        >
                            <option value="">Todos</option>
                            {meta?.projects.map((p) => (
                                <option key={p.id} value={p.id}>{p.name}</option>
                            ))}
                        </select>
                    </div>

                    {/* Categoría */}
                    <div className="min-w-40">
                        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Categoría</label>
                        <select
                            value={filters.category_id}
                            onChange={(e) => setFilter('category_id', e.target.value ? Number(e.target.value) : '')}
                            className="w-full text-sm border border-gray-300 dark:border-white/10 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary"
                        >
                            <option value="">Todas</option>
                            {meta?.categories.map((c) => (
                                <option key={c.id} value={c.id}>{c.name}</option>
                            ))}
                        </select>
                    </div>

                    {/* Etiqueta */}
                    <div className="min-w-40">
                        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Etiqueta</label>
                        <select
                            value={filters.tag_id}
                            onChange={(e) => setFilter('tag_id', e.target.value ? Number(e.target.value) : '')}
                            className="w-full text-sm border border-gray-300 dark:border-white/10 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary"
                        >
                            <option value="">Todas</option>
                            {meta?.tags.map((t) => (
                                <option key={t.id} value={t.id}>{t.name}</option>
                            ))}
                        </select>
                    </div>

                    {/* Estado lectura */}
                    <div className="min-w-40">
                        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Estado</label>
                        <select
                            value={filters.reading_status}
                            onChange={(e) => setFilter('reading_status', e.target.value as ReadingStatus | '')}
                            className="w-full text-sm border border-gray-300 dark:border-white/10 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary"
                        >
                            <option value="">Todos</option>
                            <option value="unread">Sin leer</option>
                            <option value="reading">Leyendo</option>
                            <option value="read">Leído</option>
                            <option value="pending_review">Pendiente</option>
                            <option value="archived">Archivado</option>
                        </select>
                    </div>

                    {/* Favoritos */}
                    <div className="flex items-end">
                        <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={filters.is_favorite}
                                onChange={(e) => setFilter('is_favorite', e.target.checked)}
                                className="rounded border-gray-300 text-amber-400 focus:ring-amber-400"
                            />
                            <i className="fa-solid fa-star text-amber-400" /> Solo favoritos
                        </label>
                    </div>

                    {activeFilterCount > 0 && (
                        <div className="flex items-end ml-auto">
                            <button
                                onClick={clearFilters}
                                className="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 flex items-center gap-1"
                            >
                                <i className="fa-solid fa-xmark" /> Limpiar filtros
                            </button>
                        </div>
                    )}
                </div>
            )}

            {/* Error */}
            {isError && (
                <div className="rounded-xl border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 p-8 text-center text-red-600 dark:text-red-400">
                    <i className="fa-solid fa-triangle-exclamation text-2xl mb-2 block" />
                    No se pudieron cargar los enlaces. Verifica tu conexión.
                </div>
            )}

            {/* Loading skeleton */}
            {isLoading && (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    {Array.from({ length: 8 }).map((_, i) => (
                        <div key={i} className="rounded-2xl border border-gray-100 dark:border-white/10 bg-white dark:bg-white/5 h-52 animate-pulse" />
                    ))}
                </div>
            )}

            {/* Vista biblioteca */}
            {!isLoading && view === 'biblioteca' && (
                <>
                    {links.length === 0 ? (
                        <div className="text-center py-16 text-gray-400 dark:text-gray-500">
                            <i className="fa-solid fa-link-slash text-4xl mb-3 block opacity-40" />
                            <p className="font-medium">No hay enlaces que coincidan.</p>
                            {activeFilterCount > 0 && (
                                <button onClick={clearFilters} className="mt-2 text-sm text-primary hover:underline">
                                    Limpiar filtros
                                </button>
                            )}
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                            {links.map((link) => (
                                <LinkCard
                                    key={link.id}
                                    link={link}
                                    onRefresh={refresh}
                                    readUrl={(id) => resolveUrl(readUrl, id)}
                                    editUrl={(id) => resolveUrl(editUrl, id)}
                                />
                            ))}
                        </div>
                    )}
                </>
            )}

            {/* Vista kanban */}
            {!isLoading && view === 'kanban' && (
                <KanbanView links={links} onRefresh={refresh} readUrl={(id) => resolveUrl(readUrl, id)} />
            )}

            {/* Paginación */}
            {pagination && pagination.last_page > 1 && view === 'biblioteca' && (
                <nav className="flex flex-wrap items-center justify-between gap-3 pt-2">
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                        Página {pagination.current_page} de {pagination.last_page}
                        {pagination.from && pagination.to ? ` · mostrando ${pagination.from}–${pagination.to} de ${pagination.total}` : ''}
                    </p>
                    <div className="flex items-center gap-1">
                        <button
                            onClick={() => setPage((p) => Math.max(1, p - 1))}
                            disabled={pagination.current_page <= 1}
                            className="w-9 h-9 flex items-center justify-center rounded-md border border-gray-300 dark:border-white/10 bg-white dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary"
                        >
                            <i className="fa-solid fa-chevron-left text-xs" />
                        </button>
                        {Array.from({ length: Math.min(pagination.last_page, 7) }, (_, i) => {
                            // Show pages around current
                            const cp = pagination.current_page;
                            const lp = pagination.last_page;
                            let p: number;
                            if (lp <= 7) {
                                p = i + 1;
                            } else if (cp <= 4) {
                                p = i + 1;
                            } else if (cp >= lp - 3) {
                                p = lp - 6 + i;
                            } else {
                                p = cp - 3 + i;
                            }
                            return (
                                <button
                                    key={p}
                                    onClick={() => setPage(p)}
                                    className={`w-9 h-9 flex items-center justify-center rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary ${
                                        p === cp
                                            ? 'bg-primary text-white font-semibold'
                                            : 'border border-gray-300 dark:border-white/10 bg-white dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/10'
                                    }`}
                                >
                                    {p}
                                </button>
                            );
                        })}
                        <button
                            onClick={() => setPage((p) => Math.min(pagination.last_page, p + 1))}
                            disabled={pagination.current_page >= pagination.last_page}
                            className="w-9 h-9 flex items-center justify-center rounded-md border border-gray-300 dark:border-white/10 bg-white dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary"
                        >
                            <i className="fa-solid fa-chevron-right text-xs" />
                        </button>
                    </div>
                </nav>
            )}
        </div>
    );
}

// ── Kanban ────────────────────────────────────────────────────────────────────

interface KanbanProps {
    links: Link[];
    onRefresh: () => void;
    readUrl: (id: number) => string;
}

function KanbanView({ links, onRefresh, readUrl }: KanbanProps) {
    async function moveCard(link: Link, newStatus: ReadingStatus) {
        const actionMap: Record<ReadingStatus, string> = {
            unread:         'pendiente',
            reading:        'pendiente',
            read:           'leido',
            pending_review: 'pendiente',
            archived:       'archivar',
        };
        // Use specific endpoints from F006
        const endpoint = newStatus === 'read' ? 'leido'
            : newStatus === 'archived'         ? 'archivar'
            : newStatus === 'pending_review'   ? 'pendiente'
            : 'pendiente';
        await postAction(`/enlaces/${link.id}/${endpoint}`);
        onRefresh();
    }

    return (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 items-start">
            {KANBAN_COLS.map((col) => {
                const colLinks = links.filter((l) => l.reading_status === col.status);
                return (
                    <div key={col.status} className="flex flex-col gap-2">
                        {/* Cabecera columna */}
                        <div className={`rounded-lg border-l-4 ${col.color} bg-white dark:bg-white/5 px-3 py-2 flex items-center justify-between`}>
                            <span className="text-sm font-semibold text-gray-700 dark:text-gray-300">{col.label}</span>
                            <span className="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full px-2 py-0.5">
                                {colLinks.length}
                            </span>
                        </div>
                        {/* Cards */}
                        <div className="flex flex-col gap-2 min-h-24">
                            {colLinks.length === 0 && (
                                <div className="text-center py-6 text-gray-300 dark:text-gray-600 text-xs">
                                    Vacío
                                </div>
                            )}
                            {colLinks.map((link) => (
                                <KanbanCard
                                    key={link.id}
                                    link={link}
                                    cols={KANBAN_COLS}
                                    onMove={moveCard}
                                    readUrl={readUrl}
                                />
                            ))}
                        </div>
                    </div>
                );
            })}
        </div>
    );
}

interface KanbanCardProps {
    link: Link;
    cols: typeof KANBAN_COLS;
    onMove: (link: Link, status: ReadingStatus) => Promise<void>;
    readUrl: (id: number) => string;
}

function KanbanCard({ link, cols, onMove, readUrl }: KanbanCardProps) {
    const [moving, setMoving] = useState(false);

    async function handleMove(status: ReadingStatus) {
        if (moving || status === link.reading_status) return;
        setMoving(true);
        await onMove(link, status);
        setMoving(false);
    }

    return (
        <div className="rounded-xl border border-gray-100 dark:border-white/10 bg-white dark:bg-white/5 p-3 shadow-sm hover:shadow-md transition-shadow group">
            {link.favicon_url && (
                <img src={link.favicon_url} alt="" className="w-4 h-4 rounded-sm mb-1.5" loading="lazy"
                     onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
            )}
            <a
                href={readUrl(link.id)}
                className="block text-xs font-semibold text-gray-800 dark:text-white line-clamp-2 hover:text-primary dark:hover:text-primary-light transition-colors mb-1"
            >
                {link.display_title}
            </a>
            <p className="text-xs text-gray-400 dark:text-gray-500 truncate mb-2">{link.domain}</p>
            {/* Mover a columna */}
            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                {cols.filter((c) => c.status !== link.reading_status).map((c) => (
                    <button
                        key={c.status}
                        onClick={() => handleMove(c.status)}
                        disabled={moving}
                        title={`Mover a ${c.label}`}
                        className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-primary hover:text-white dark:hover:bg-primary transition-colors disabled:opacity-40"
                    >
                        → {c.label}
                    </button>
                ))}
            </div>
        </div>
    );
}