import React, { useState, useRef, useEffect } from 'react';
import { config } from '../config';
import TopNavBar from './TopNavBar';
import SideNavBar from './SideNavBar';

/* ─── Terminal Panel ─── */
const COMMANDS = {
    help: () => ['Commands: help | status | clear | echo <text>'],
    status: () => ['Agent A (INV-01): STANDBY', 'Agent B (VAL-01): STANDBY', `WebSocket: ${config.WS_URL} — CONNECTED`, 'Episode: None active'],
};

const TerminalDrawer = ({ onClose }) => {
    const [input, setInput] = useState('');
    const [lines, setLines] = useState([{ type: 'system', text: '// NEXUS Terminal v2.0 — type "help" for commands' }]);
    const [history, setHistory] = useState([]);
    const [histIdx, setHistIdx] = useState(-1);
    const endRef = useRef(null);
    const inputRef = useRef(null);

    useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [lines]);
    useEffect(() => { inputRef.current?.focus(); }, []);

    const run = (e) => {
        e.preventDefault();
        const cmd = input.trim();
        if (!cmd) return;
        setHistory(h => [cmd, ...h].slice(0, 50));
        setHistIdx(-1);
        if (cmd.toLowerCase() === 'clear') { setLines([]); setInput(''); return; }
        const parts = cmd.toLowerCase().split(' ');
        let output, type;
        if (parts[0] === 'echo') { output = [cmd.slice(5) || '']; type = 'output'; }
        else if (COMMANDS[parts[0]]) { output = COMMANDS[parts[0]](); type = 'output'; }
        else { output = [`Command not found: ${parts[0]}. Type "help".`]; type = 'error'; }
        setLines(l => [...l, { type: 'input', text: `nexus@terminal:~$ ${cmd}` }, ...output.map(t => ({ type, text: t }))]);
        setInput('');
    };

    const handleKey = (e) => {
        if (e.key === 'ArrowUp') { const i = Math.min(histIdx + 1, history.length - 1); setHistIdx(i); setInput(history[i] ?? ''); e.preventDefault(); }
        if (e.key === 'ArrowDown') { const i = Math.max(histIdx - 1, -1); setHistIdx(i); setInput(i === -1 ? '' : history[i]); e.preventDefault(); }
    };

    const colorMap = { system: 'text-slate-600 italic', input: 'text-primary', output: 'text-on-surface/80', error: 'text-error' };

    return (
        <div className="flex flex-col h-full" onClick={() => inputRef.current?.focus()}>
            <div className="flex-1 p-3 font-mono text-xs overflow-y-auto space-y-0.5 bg-surface-container-lowest cursor-text">
                {lines.map((l, i) => <div key={i} className={colorMap[l.type]}>{l.text}</div>)}
                <div ref={endRef} />
            </div>
            <form onSubmit={run} className="flex items-center gap-2 px-3 py-2 border-t border-white/5 bg-surface-container-lowest shrink-0">
                <span className="text-primary font-mono text-xs shrink-0">nexus@terminal:~$</span>
                <input ref={inputRef} value={input} onChange={e => setInput(e.target.value)} onKeyDown={handleKey}
                    className="flex-1 bg-transparent font-mono text-xs text-on-surface focus:outline-none placeholder:text-slate-700"
                    placeholder="type a command and press Enter..." />
            </form>
        </div>
    );
};

/* ─── Communication Panel ─── */
const CommunicationDrawer = () => (
    <div className="flex flex-col h-full p-4 font-mono text-xs space-y-2 bg-surface-container-lowest overflow-y-auto">
        {[
            { agent: 'AGENT_A', msg: 'Awaiting objective. Standing by for episode_start event.', time: '—', color: 'text-primary' },
            { agent: 'AGENT_B', msg: 'Validation module idle. Ready to receive investigator output.', time: '—', color: 'text-secondary' },
            { agent: 'SYSTEM', msg: 'No active episode. Use START to begin.', time: '—', color: 'text-outline-variant' },
        ].map((m, i) => (
            <div key={i} className="flex gap-3 py-1.5 border-b border-white/5">
                <span className={`${m.color} font-bold shrink-0 w-20`}>[{m.agent}]</span>
                <span className="text-on-surface/70">{m.msg}</span>
                <span className="text-slate-600 ml-auto shrink-0">{m.time}</span>
            </div>
        ))}
    </div>
);

/* ─── Reward Analytics Panel ─── */
const AnalyticsDrawer = () => {
    const stats = [
        { label: 'Avg Reward', value: '—', color: 'text-primary' },
        { label: 'Best Step', value: '—', color: 'text-tertiary' },
        { label: 'Root Cause', value: '—', color: 'text-tertiary' },
        { label: 'Steps Run', value: '—', color: 'text-on-surface' },
        { label: 'Episodes', value: '—', color: 'text-on-surface' },
        { label: 'Success Rate', value: '—', color: 'text-secondary' },
    ];
    return (
        <div className="flex h-full">
            {/* Reward chart placeholder */}
            <div className="flex-1 p-4 flex flex-col">
                <p className="text-[9px] font-mono text-outline-variant uppercase mb-2">Cumulative Reward Over Steps</p>
                <div className="flex-1 flex items-end gap-1 border-l border-b border-outline-variant/20 px-2 pb-1">
                    {[12, 24, 18, 36, 30, 48, 42, 60].map((h, i) => (
                        <div key={i} className="flex-1 flex flex-col items-center justify-end">
                            <div className="w-full bg-primary/30 rounded-sm transition-all" style={{ height: `${h}%` }}></div>
                        </div>
                    ))}
                </div>
                <p className="text-[9px] font-mono text-outline-variant/40 italic mt-1">No live data — connect to episode to populate</p>
            </div>
            {/* Stat grid */}
            <div className="w-48 shrink-0 p-3 border-l border-white/5 grid grid-cols-2 gap-2 content-start">
                {stats.map(s => (
                    <div key={s.label} className="bg-surface-container p-2 rounded border border-white/5">
                        <span className="text-[8px] font-mono text-outline-variant block uppercase truncate">{s.label}</span>
                        <span className={`text-sm font-bold font-mono ${s.color}`}>{s.value}</span>
                    </div>
                ))}
            </div>
        </div>
    );
};

/* ─── Layout ─── */
const TABS = [
    { id: 'communication', label: 'Communication', icon: 'forum' },
    { id: 'terminal', label: 'Terminal', icon: 'code' },
];

const Layout = ({ children }) => {
    const [activeTab, setActiveTab] = useState(null); // null = closed

    const toggle = (id) => setActiveTab(prev => prev === id ? null : id);

    /* drawer height when open */
    const drawerH = 'h-64';

    return (
        <div className="min-h-screen flex flex-col">
            <TopNavBar />
            <SideNavBar />

            {/* Main scrollable area — leave room for fixed footer + optional drawer */}
            <main className={`ml-20 pt-16 flex-1 transition-all ${activeTab ? 'pb-[calc(48px+256px)]' : 'pb-12'}`}>
                <div className="p-8 max-w-[1600px] mx-auto">
                    {children}
                </div>
            </main>

            {/* Sliding drawer */}
            {activeTab && (
                <div className={`fixed bottom-12 left-20 right-0 ${drawerH} z-40 bg-surface border-t border-primary/20 shadow-[0_-10px_40px_rgba(0,0,0,0.6)] flex flex-col`}>
                    {/* Drawer title bar */}
                    <div className="flex items-center justify-between px-5 py-2 bg-surface-container border-b border-white/5 shrink-0">
                        <div className="flex items-center gap-2">
                            <span className="material-symbols-outlined text-primary text-sm">
                                {TABS.find(t => t.id === activeTab)?.icon}
                            </span>
                            <span className="font-mono text-xs text-primary uppercase tracking-widest">
                                {TABS.find(t => t.id === activeTab)?.label}
                            </span>
                        </div>
                        <button onClick={() => setActiveTab(null)} className="text-slate-500 hover:text-white transition-colors">
                            <span className="material-symbols-outlined text-sm">keyboard_arrow_down</span>
                        </button>
                    </div>
                    {/* Drawer content */}
                    <div className="flex-1 overflow-hidden">
                        {activeTab === 'terminal' && <TerminalDrawer onClose={() => setActiveTab(null)} />}
                        {activeTab === 'communication' && <CommunicationDrawer />}
                        {activeTab === 'analytics' && <AnalyticsDrawer />}
                    </div>
                </div>
            )}

            {/* Footer tab bar */}
            <footer className="fixed bottom-0 left-0 w-full h-12 bg-background/90 backdrop-blur-2xl z-50 flex items-center border-t border-primary/15 px-8 shadow-[0_-10px_30px_rgba(0,0,0,0.5)]">
                {/* Left: ticker */}
                <div className="flex-1 hidden md:flex items-center gap-2 overflow-hidden">
                    <span className="text-[9px] font-mono text-outline-variant italic uppercase tracking-tight whitespace-nowrap">
                        SYSTEM_INITIALIZED: STANDBY FOR AGENT HANDSHAKE...
                    </span>
                </div>

                {/* Centre: tabs */}
                <div className="flex items-center gap-1 shrink-0">
                    {TABS.map(tab => (
                        <button
                            key={tab.id}
                            onClick={() => toggle(tab.id)}
                            className={`flex items-center gap-2 px-4 h-12 transition-all border-t-2 font-mono text-[10px] tracking-widest uppercase ${activeTab === tab.id
                                    ? 'border-primary text-primary bg-primary/10'
                                    : 'border-transparent text-slate-500 hover:text-primary hover:bg-white/5'
                                }`}
                        >
                            <span className="material-symbols-outlined text-base">{tab.icon}</span>
                            {tab.label}
                        </button>
                    ))}
                </div>

                {/* Right: session info */}
                <div className="flex-1 hidden md:flex items-center justify-end gap-2 text-[9px] font-mono text-outline-variant/50">
                    <span>SESSION: IDLE</span>
                </div>
            </footer>
        </div>
    );
};

export default Layout;