'use client';

import React, { useState, useEffect } from 'react';
import { Document, DocumentActivity, docApi } from '@/lib/api-docs';
import {
    ClockIcon,
    DocumentIcon,
    PlusIcon,
    MagnifyingGlassIcon,
    ChevronRightIcon,
    HomeIcon,
    ArrowUpIcon,
    FolderIcon,
    FolderOpenIcon
} from "@heroicons/react/24/outline";
import { format, parseISO } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import { toast } from 'react-hot-toast';

interface DocumentSidebarProps {
    documentId: string;
    onNavigate: (doc: Document) => void;
}

export default function DocumentSidebar({ documentId, onNavigate }: DocumentSidebarProps) {
    const [currentDoc, setCurrentDoc] = useState<Document | null>(null);
    const [children, setChildren] = useState<Document[]>([]);
    const [parentDoc, setParentDoc] = useState<Document | null>(null);
    const [rootPages, setRootPages] = useState<Document[]>([]);
    const [activities, setActivities] = useState<DocumentActivity[]>([]);
    const [activeTab, setActiveTab] = useState<'subpages' | 'activities'>('subpages');
    const [searchTerm, setSearchTerm] = useState('');
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (documentId) {
            fetchData();
        }
    }, [documentId]);

    const fetchData = async () => {
        setLoading(true);
        console.log('🔍 Sidebar fetching data for:', documentId);

        const fetchSafely = async (promise: Promise<any>) => {
            try { return await promise; }
            catch (e) { console.warn('Sidebar part failed:', e); return null; }
        };

        try {
            const [doc, roots, logs, subpages] = await Promise.all([
                docApi.getDocument(documentId),
                fetchSafely(docApi.getDocuments()),
                fetchSafely(docApi.getActivities(documentId)),
                fetchSafely(docApi.getSubpages(documentId))
            ]);

            if (doc) {
                setCurrentDoc(doc);
                setChildren(subpages || []);
                if (doc.parent_id) {
                    const parent = await fetchSafely(docApi.getDocument(doc.parent_id));
                    setParentDoc(parent);
                } else {
                    setParentDoc(null);
                }
            }

            setRootPages(roots || []);
            setActivities(logs || []);
        } catch (e) {
            console.error('❌ Sidebar critical error:', e);
            toast.error('Erro ao carregar estrutura');
        } finally {
            setLoading(false);
        }
    };

    const handleCreateSubpage = async () => {
        try {
            const newDoc = await docApi.createDocument({
                title: 'Nova Subpágina',
                parent_id: documentId as any,
                content: '{"type":"doc","content":[{"type":"paragraph"}]}',
                status: 'published'
            });
            toast.success('Página criada!');
            // Refresh local para aparecer imediatamente
            setChildren(prev => [...prev, newDoc]);
            onNavigate(newDoc);
        } catch (e) {
            toast.error('Erro ao criar subpágina');
        }
    };

    const filteredChildren = children.filter(p => p.title.toLowerCase().includes(searchTerm.toLowerCase()));
    const rootWikis = rootPages.filter(p => !p.parent_id);

    return (
        <div className="w-72 border-r border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 flex flex-col h-full overflow-hidden shrink-0">
            {/* Tabs de Navegação */}
            <div className="flex border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                <button
                    onClick={() => setActiveTab('subpages')}
                    className={`flex-1 px-4 py-4 text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'subpages' ? 'text-brand-500 bg-brand-50/10 border-b-2 border-brand-500' : 'text-zinc-500'}`}
                >
                    Estrutura
                </button>
                <button
                    onClick={() => setActiveTab('activities')}
                    className={`flex-1 px-4 py-4 text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === 'activities' ? 'text-brand-500 bg-brand-50/10 border-b-2 border-brand-500' : 'text-zinc-500'}`}
                >
                    Histórico
                </button>
            </div>

            <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-6">
                {activeTab === 'subpages' ? (
                    <>
                        {/* Status do Nível Atual */}
                        <div className="space-y-3">
                            {parentDoc && (
                                <button
                                    onClick={() => onNavigate(parentDoc)}
                                    className="w-full flex items-center gap-2 p-2 px-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-900 text-zinc-400 hover:text-brand-500 transition-all group border border-dashed border-zinc-200 dark:border-zinc-800"
                                >
                                    <ArrowUpIcon className="w-3 h-3 transition-transform group-hover:-translate-y-0.5" />
                                    <span className="text-[9px] font-black uppercase tracking-widest truncate">Pai: {parentDoc.title}</span>
                                </button>
                            )}

                            <div className="p-3 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-sm flex items-center gap-3">
                                <div className="w-8 h-8 rounded-lg bg-brand-50 dark:bg-brand-500/10 flex items-center justify-center text-brand-500">
                                    <FolderOpenIcon className="w-5 h-5" />
                                </div>
                                <div className="flex-1 min-w-0">
                                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-tighter">Você está em</p>
                                    <p className="text-xs font-bold text-zinc-900 dark:text-white truncate">{currentDoc?.title || 'Sem título'}</p>
                                </div>
                            </div>
                        </div>

                        {/* Search */}
                        <div className="relative">
                            <MagnifyingGlassIcon className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 transition-colors ${loading ? 'text-brand-500 animate-pulse' : 'text-zinc-400'}`} />
                            <input
                                type="text"
                                placeholder="Filtrar subpáginas..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl pl-10 pr-4 py-2 text-xs outline-none focus:ring-2 ring-brand-500/20"
                            />
                        </div>

                        {/* Subpages (Children) */}
                        <div className="space-y-1">
                            <div className="flex items-center justify-between px-2 mb-2">
                                <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Subpáginas ({children.length})</p>
                                <button
                                    onClick={handleCreateSubpage}
                                    className="p-1 text-zinc-400 hover:text-brand-500 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md shadow-sm transition-all"
                                >
                                    <PlusIcon className="w-3.5 h-3.5" />
                                </button>
                            </div>

                            {filteredChildren.length === 0 && (
                                <div className="text-center py-6 border border-dashed border-zinc-200 dark:border-zinc-800 rounded-xl">
                                    <p className="text-[10px] text-zinc-400 uppercase font-black">Nenhuma subpágina</p>
                                </div>
                            )}

                            {filteredChildren.map(page => (
                                <button
                                    key={page.id}
                                    onClick={() => onNavigate(page)}
                                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group border border-transparent hover:border-zinc-100 dark:hover:border-zinc-800 ${documentId === page.id ? 'bg-brand-500 text-white shadow-lg' : 'hover:bg-white dark:hover:bg-zinc-900 text-zinc-600 dark:text-zinc-400'}`}
                                >
                                    <DocumentIcon className={`w-4 h-4 ${documentId === page.id ? 'text-white' : 'text-zinc-300 group-hover:text-brand-500'}`} />
                                    <span className="text-xs font-bold truncate flex-1 text-left">{page.title || 'Subpágina'}</span>
                                    <ChevronRightIcon className={`w-3 h-3 opacity-0 group-hover:opacity-100 ${documentId === page.id ? 'text-white' : ''}`} />
                                </button>
                            ))}
                        </div>

                        {/* Root wikis */}
                        {!searchTerm && (
                            <div className="pt-4 border-t border-zinc-100 dark:border-zinc-800 space-y-1">
                                <p className="px-3 text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-3">Todas as Wikis</p>
                                {rootWikis.map(page => (
                                    <button
                                        key={page.id}
                                        onClick={() => onNavigate(page)}
                                        className={`w-full flex items-center gap-3 px-3 py-2 rounded-xl transition-all group ${documentId === page.id ? 'text-brand-500 font-bold' : 'text-zinc-500 hover:bg-white dark:hover:bg-zinc-900'}`}
                                    >
                                        <HomeIcon className="w-3.5 h-3.5" />
                                        <span className="text-[11px] font-semibold truncate flex-1 text-left">{page.title || 'Início'}</span>
                                    </button>
                                ))}
                            </div>
                        )}
                    </>
                ) : (
                    <div className="space-y-6">
                        {activities.map(log => (
                            <div key={log.id} className="flex gap-4">
                                <div className="w-8 h-8 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-black text-zinc-400 shrink-0">
                                    {log.user_name?.[0]?.toUpperCase()}
                                </div>
                                <div className="min-w-0 pt-0.5">
                                    <p className="text-[11px] text-zinc-900 dark:text-zinc-100 leading-tight">
                                        <span className="font-bold">{log.user_name}</span> {log.description}
                                    </p>
                                    <span className="text-[9px] text-zinc-400 uppercase font-black block mt-1">
                                        {format(parseISO(log.created_at), "dd MMM, HH:mm", { locale: ptBR })}
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}