import React from 'react';
import { 
  List, 
  PieChart, 
  Users, 
  ListChecks,
  MessageSquare,
  History,
  Server,
  FileText,
  Receipt,
  BarChart3
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { useContasReceber } from '../../hooks/useContasReceber';
import { RegistrosView } from './RegistrosView';
import { CruzamentoView } from './CruzamentoView';
import { ServicesView } from './ServicesView';
import { ClientsView } from './ClientsView';
import { EntradasPlanejadasView } from './EntradasPlanejadasView';
import { BoletosView } from './BoletosView';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';

const ActivityLog = ({ isOpen, onClose }) => {
    if (!isOpen) return null;
    
    return (
        <div className="fixed inset-y-0 right-0 w-80 bg-white dark:bg-[#0f172a]/95 backdrop-blur-2xl border-l border-slate-200 dark:border-slate-800 shadow-2xl z-50 animate-in slide-in-from-right duration-500">
            <div className="p-6 h-full flex flex-col">
                <div className="flex items-center justify-between mb-8">
                    <h3 className="font-bold flex items-center gap-2 uppercase tracking-widest text-[10px] text-slate-500 dark:text-slate-400">
                        <History className="w-4 h-4 text-emerald-500" /> Atividade (Buzz)
                    </h3>
                    <Button variant="ghost" size="sm" onClick={onClose} className="text-slate-500 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800">Fechar</Button>
                </div>
                
                <ScrollArea className="flex-1 -mr-2 pr-4">
                    <div className="space-y-6">
                        {[
                            { user: 'Ana (CFO)', action: 'Validou pagamento', target: 'PAG-1002', time: '10 min atrás', color: 'text-emerald-500' },
                            { user: 'Bruno', action: 'Adicionou anexo', target: 'PAG-1045', time: '1h atrás', color: 'text-blue-500' },
                        ].map((log, i) => (
                            <div key={i} className="flex gap-4 group">
                                <div className="mt-1 w-2 h-2 rounded-full bg-slate-200 dark:bg-slate-800 group-hover:bg-emerald-500 transition-colors shrink-0" />
                                <div>
                                    <p className="text-xs font-bold text-slate-900 dark:text-slate-200">{log.user}</p>
                                    <p className="text-xs text-slate-500 mt-0.5">{log.action} <span className={log.color}>{log.target}</span></p>
                                    <p className="text-[9px] text-slate-600 dark:text-slate-500 mt-1 uppercase font-bold tracking-tighter">{log.time}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </ScrollArea>
                
                <div className="mt-auto pt-6 border-t border-slate-200 dark:border-slate-800 font-inter">
                    <div className="bg-slate-100/50 dark:bg-slate-900/50 p-3 rounded-xl border border-slate-200 dark:border-slate-800">
                        <p className="text-[10px] text-slate-500 font-bold mb-2 uppercase italic tracking-widest">"Buzz" - Chat Interno</p>
                        <div className="flex gap-2 items-center">
                            <input type="text" placeholder="Escreva um comentário..." className="flex-1 bg-transparent border-none text-[11px] text-slate-900 dark:text-white outline-none placeholder:text-slate-400 dark:placeholder:text-slate-700" />
                            <MessageSquare className="w-3.5 h-3.5 text-slate-400 dark:text-slate-600 hover:text-emerald-500 cursor-pointer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export const ContasReceberView = ({ initialView }) => {
    const { state, actions } = useContasReceber(initialView);
    const activeSubView = state?.activeSubView || 'default';
    const transactions = state?.transactions || [];
    const clients = state?.clients || [];
    const services = state?.services || [];
    const kpis = state?.kpis || {};
    const categorias = state?.categorias || [];
    const caixas = state?.caixas || [];
    
    const [isBuzzOpen, setIsBuzzOpen] = React.useState(false);

    const subViews = [
        { id: 'default', label: 'Cruzamento', icon: BarChart3, description: 'Planejado vs Executado' },
        { id: 'entradas-planejadas', label: 'Entradas Planejadas', icon: FileText, description: 'Estimativas' },
        { id: 'boletos', label: 'Boletos', icon: Receipt, description: 'Cobranças' },
        { id: 'clientes', label: 'Clientes', icon: Users, description: 'Gerenciamento' },
        { id: 'servicos', label: 'Serviços', icon: Server, description: 'Catálogo' },
    ];

    const renderSubView = () => {
        switch (activeSubView) {
            case 'servicos':
                return <ServicesView services={services} />;
            case 'clientes':
                return <ClientsView clients={clients} />;
            case 'entradas-planejadas':
                return <EntradasPlanejadasView />;
            case 'boletos':
                return <BoletosView initialFilter={initialView === 'boletos-pendentes' ? 'A_RECEBER' : 'TODOS'} />;
            case 'default':
            default:
                return <CruzamentoView 
                    data={transactions} 
                    kpis={kpis} 
                    categorias={categorias} 
                    caixas={caixas}
                    entradasPlanejadas={state?.entradasPlanejadas || []}
                />;
        }
    };

    return (
        <div className="animate-in fade-in duration-700 relative">
            {/* Header Section */}
            <div className="border-b border-slate-200 dark:border-slate-800 pb-4 sm:pb-6 mb-6 sm:mb-8">
                {/* Linha 1: Título, Badge e Botão Activity Log */}
                <div className="flex items-center justify-between gap-4 mb-4 sm:mb-6">
                    <h1 className="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white tracking-tight flex items-center gap-2 sm:gap-3">
                        Recebíveis
                        {/* <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20 text-[10px] hidden sm:inline-flex">PREMIUM v2</Badge> */}
                    </h1>
                    
                    {/* <Button 
                        size="sm" 
                        variant="ghost" 
                        className={cn(
                            "rounded-full w-9 h-9 p-0 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shrink-0",
                            isBuzzOpen ? "text-emerald-400 ring-2 ring-emerald-500/20" : "text-slate-500"
                        )}
                        onClick={() => setIsBuzzOpen(!isBuzzOpen)}
                    >
                        <History className="w-4 h-4" />
                    </Button> */}
                </div>

                {/* Linha 2: Menu de Navegação */}
                <div className="flex bg-slate-100/80 dark:bg-slate-900/80 p-1 rounded-xl border border-slate-200 dark:border-slate-800 shadow-inner flex-wrap gap-1 overflow-x-auto">
                    {subViews.map((view) => {
                        const Icon = view.icon;
                        return (
                            <Button 
                                key={view.id}
                                variant="ghost" 
                                onClick={() => actions?.setActiveSubView(view.id)}
                                className={cn(
                                    "rounded-lg px-3 sm:px-4 h-8 sm:h-9 font-bold text-[9px] sm:text-[10px] uppercase tracking-widest transition-all duration-300 whitespace-nowrap shrink-0",
                                    activeSubView === view.id
                                        ? "bg-white dark:bg-[#1e293b] text-slate-900 dark:text-white shadow-lg border border-slate-200 dark:border-slate-700"
                                        : "text-slate-500 hover:text-slate-900 dark:hover:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
                                )}
                                title={view.description}
                            >
                                <Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4 sm:mr-2" /> 
                                <span className="hidden sm:inline">{view.label}</span>
                                <span className="sm:hidden">{view.label.split(' ')[0]}</span>
                            </Button>
                        );
                    })}
                </div>
            </div>

            {/* Content Area */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                <div className="lg:col-span-12">
                    {renderSubView()}
                </div>
            </div>
            
            <ActivityLog 
                isOpen={isBuzzOpen} 
                onClose={() => setIsBuzzOpen(false)} 
            />
        </div>
    );
};