import React from 'react';
import { 
  List, 
  PieChart, 
  Users, 
  ListChecks,
  MessageSquare,
  History
} 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 { ClientPanel } from './ClientPanel';
import { ServicesPanel } from './ServicesPanel';
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-[#0f172a]/95 backdrop-blur-2xl border-l 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-black flex items-center gap-2 uppercase tracking-widest text-[10px] text-slate-500">
                        <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-white 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-400' },
                            { user: 'Bruno', action: 'Adicionou anexo', target: 'PAG-1045', time: '1h atrás', color: 'text-blue-400' },
                        ].map((log, i) => (
                            <div key={i} className="flex gap-4 group">
                                <div className="mt-1 w-2 h-2 rounded-full bg-slate-800 group-hover:bg-emerald-500 transition-colors shrink-0" />
                                <div>
                                    <p className="text-xs font-bold 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 mt-1 uppercase font-bold tracking-tighter">{log.time}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </ScrollArea>
                
                <div className="mt-auto pt-6 border-t border-slate-800 font-inter">
                    <div className="bg-slate-900/50 p-3 rounded-xl border 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-white outline-none placeholder:text-slate-700" />
                            <MessageSquare className="w-3.5 h-3.5 text-slate-600 hover:text-emerald-500 cursor-pointer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export const ContasReceberView = () => {
    const { state, actions } = useContasReceber();
    const activeTab = state?.activeTab || 'registros';
    const transactions = state?.transactions || [];
    const clients = state?.clients || [];
    const services = state?.services || [];
    const activePanel = state?.activePanel || null;
    const kpis = state?.kpis || {};
    
    const [isBuzzOpen, setIsBuzzOpen] = React.useState(false);

    return (
        <div className="animate-in fade-in duration-700 relative">
            {/* Module Sub-Navigation & Tools */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-slate-800 pb-6 mb-8">
                
                {/* View Toggles */}
                <div className="flex items-center gap-4">
                    <h1 className="text-2xl font-black text-white tracking-tight flex items-center gap-3 mr-4">
                        Recebíveis
                        <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20 text-[10px]">PREMIUM v2</Badge>
                    </h1>
                    
                    <div className="flex bg-slate-900/80 p-1 rounded-xl border border-slate-800 shadow-inner">
                        <Button 
                            variant="ghost" 
                            onClick={() => actions?.setActiveTab('registros')}
                            className={cn(
                                "rounded-lg px-5 h-9 font-bold text-[10px] uppercase tracking-widest transition-all duration-300",
                                activeTab === 'registros' 
                                    ? 'bg-[#1e293b] text-white shadow-lg border border-slate-700' 
                                    : 'text-slate-500 hover:text-slate-300 hover:bg-slate-800'
                            )}
                        >
                            <List className="w-4 h-4 mr-2" /> Registros
                        </Button>
                        <Button 
                            variant="ghost" 
                            onClick={() => actions?.setActiveTab('cruzamento')}
                            className={cn(
                                "rounded-lg px-5 h-9 font-bold text-[10px] uppercase tracking-widest transition-all duration-300",
                                activeTab === 'cruzamento' 
                                    ? 'bg-[#1e293b] text-white shadow-lg border border-slate-700' 
                                    : 'text-slate-500 hover:text-slate-300 hover:bg-slate-800'
                            )}
                        >
                            <PieChart className="w-4 h-4 mr-2" /> Cruzamento
                        </Button>
                    </div>
                </div>

                {/* Management Tools */}
                <div className="flex items-center gap-2">
                    <Button 
                        size="sm" 
                        variant="ghost" 
                        className="text-slate-400 hover:text-white hover:bg-slate-800 text-[10px] font-bold uppercase tracking-widest rounded-lg h-9 px-4 border border-slate-800"
                        onClick={() => actions?.togglePanel('service')}
                    >
                        <ListChecks className="w-4 h-4 mr-2 text-purple-400" /> Catálogo
                    </Button>
                     <Button 
                        size="sm" 
                        variant="ghost" 
                        className="text-slate-400 hover:text-white hover:bg-slate-800 text-[10px] font-bold uppercase tracking-widest rounded-lg h-9 px-4 border border-slate-800"
                        onClick={() => actions?.togglePanel('client')}
                    >
                        <Users className="w-4 h-4 mr-2 text-blue-400" /> Clientes
                    </Button>
                    <div className="w-px h-6 bg-slate-800 mx-2" />
                    <Button 
                        size="sm" 
                        variant="ghost" 
                        className={cn(
                            "rounded-full w-9 h-9 p-0 bg-slate-900 border border-slate-800",
                            isBuzzOpen ? "text-emerald-400 ring-2 ring-emerald-500/20" : "text-slate-500"
                        )}
                        onClick={() => setIsBuzzOpen(!isBuzzOpen)}
                    >
                        <History className="w-4 h-4" />
                    </Button>
                </div>
            </div>

            {/* Content Area */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                <div className="lg:col-span-12">
                    {activeTab === 'registros' ? (
                        <RegistrosView data={transactions} />
                    ) : (
                        <CruzamentoView data={transactions} kpis={kpis} />
                    )}
                </div>
            </div>

            {/* Side Panels (Drawers) */}
            <ClientPanel 
                isOpen={activePanel === 'client'} 
                onClose={actions?.closePanel} 
                clients={clients} 
            />
            <ServicesPanel 
                isOpen={activePanel === 'service'} 
                onClose={actions?.closePanel} 
                services={services} 
            />
            
            <ActivityLog 
                isOpen={isBuzzOpen} 
                onClose={() => setIsBuzzOpen(false)} 
            />
        </div>
    );
};
