import { useState, useRef, useEffect } from 'react'
import type { ChatMessage, Metrics, MemorySamples } from '../types'
import { SourceBadge } from './SourceBadge'

interface ApiProps {
  connected: boolean
  metrics: Metrics | null
  loading: boolean
  sendMessage: (message: string, temperature?: number, maxTokens?: number) => Promise<any>
  teachModel: (question: string, answer: string) => Promise<any>
  learnText: (text: string) => Promise<any>
  dream: (cycles: number) => Promise<any>
  reason: (question: string) => Promise<any>
}

type SidebarTab = 'chat' | 'teach' | 'learn' | 'dream' | 'stats'

const SUGGESTIONS = [
  { icon: '👋', title: 'Say hello', q: 'hello' },
  { icon: '🧠', title: 'Who are you?', q: 'who are you' },
  { icon: '🐍', title: 'What is Python?', q: 'what is python' },
  { icon: '✨', title: 'Write a poem', q: 'write a poem about the sea' },
  { icon: '💻', title: 'Write code', q: 'write a python function to check if a number is prime' },
  { icon: '📖', title: 'Explain something', q: 'explain how the internet works' },
  { icon: '🌑', title: 'Science facts', q: 'what is dark matter' },
  { icon: '💡', title: 'Get advice', q: 'how to stay focused' },
]

export function ChatGPTLayout({ api }: { api: ApiProps }) {
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [input, setInput] = useState('')
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [tab, setTab] = useState<SidebarTab>('chat')
  const scrollRef = useRef<HTMLDivElement>(null)

  // Teach state
  const [teachQ, setTeachQ] = useState('')
  const [teachA, setTeachA] = useState('')
  const [teachHistory, setTeachHistory] = useState<{q: string, a: string, tokens: number}[]>([])

  // Learn state
  const [learnText, setLearnText] = useState('')
  const [learnResult, setLearnResult] = useState<any>(null)

  // Dream state
  const [dreamResult, setDreamResult] = useState<any>(null)

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight
  }, [messages, api.loading])

  const handleSend = async () => {
    const msg = input.trim()
    if (!msg || api.loading) return
    setInput('')
    const userMsg: ChatMessage = { id: `u-${Date.now()}`, role: 'user', text: msg, timestamp: Date.now() }
    setMessages(prev => [...prev, userMsg])
    try {
      const resp = await api.sendMessage(msg)
      setMessages(prev => [...prev, {
        id: `b-${Date.now()}`, role: 'palimpseste', text: resp.response,
        confidence: resp.confidence, source: resp.source,
        explanation: resp.explanation, chain: resp.chain,
        elapsed_ms: resp.elapsed_ms, timestamp: Date.now(),
      }])
    } catch {
      setMessages(prev => [...prev, {
        id: `e-${Date.now()}`, role: 'palimpseste',
        text: '⚠️ Cannot connect to server. Is the API running on :3332?',
        source: 'fallback', confidence: 0, timestamp: Date.now(),
      }])
    }
  }

  const handleTeach = async () => {
    if (!teachQ.trim() || !teachA.trim() || api.loading) return
    try {
      const resp = await api.teachModel(teachQ, teachA)
      setTeachHistory(prev => [{ q: teachQ, a: teachA, tokens: resp.tokens_written }, ...prev])
      setTeachQ(''); setTeachA('')
    } catch {}
  }

  const handleLearn = async () => {
    if (!learnText.trim() || api.loading) return
    try {
      const r = await api.learnText(learnText)
      setLearnResult(r)
    } catch {}
  }

  const handleDream = async () => {
    try {
      const r = await api.dream(3)
      setDreamResult(r)
    } catch {}
  }

  const newChat = () => { setMessages([]); setTab('chat') }

  return (
    <div className="h-screen w-screen flex bg-pal-bg relative overflow-hidden">
      {/* Background orbs */}
      <div className="bg-orbs">
        <div className="bg-orb" style={{ width: '500px', height: '500px', background: '#7c3aed', top: '-100px', left: '-100px' }} />
        <div className="bg-orb" style={{ width: '400px', height: '400px', background: '#06b6d4', bottom: '-50px', right: '-50px', animationDelay: '2s' }} />
      </div>

      {/* Sidebar */}
      {sidebarOpen && (
        <aside className="relative z-10 w-72 glass border-r border-pal-border flex flex-col">
          {/* New chat button */}
          <div className="p-3">
            <button onClick={newChat} className="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl glass-card hover:border-pal-accent/30 transition-all text-sm text-pal-text font-medium">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
              New Chat
            </button>
          </div>

          {/* Nav */}
          <nav className="px-2 space-y-0.5">
            {([
              ['chat', '💬', 'Chat'],
              ['teach', '📚', 'Teach'],
              ['learn', '📖', 'Learn Text'],
              ['dream', '🌙', 'Dream'],
              ['stats', '📊', 'Statistics'],
            ] as [SidebarTab, string, string][]).map(([t, icon, label]) => (
              <button key={t} onClick={() => setTab(t)}
                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all ${
                  tab === t ? 'glass-card text-pal-text font-medium' : 'text-pal-muted hover:text-pal-text'
                }`}>
                <span>{icon}</span> {label}
              </button>
            ))}
          </nav>

          {/* Connection status */}
          <div className="mt-auto p-3 border-t border-pal-border">
            <div className="flex items-center gap-2 mb-2">
              <div className={`w-2 h-2 rounded-full ${api.connected ? 'bg-pal-green' : 'bg-pal-red'}`}>
                {api.connected && <div className="w-2 h-2 rounded-full bg-pal-green animate-ping" />}
              </div>
              <span className="text-xs text-pal-muted">{api.connected ? 'Connected' : 'Offline'}</span>
            </div>
            <p className="text-[10px] text-pal-muted">PALIMPSESTE · No GPU · 0 weights</p>
            <p className="text-[10px] text-pal-muted">Philippe-Antoine Robert · 2026</p>
          </div>
        </aside>
      )}

      {/* Main content */}
      <main className="relative z-10 flex-1 flex flex-col">
        {/* Top bar */}
        <header className="flex items-center justify-between px-4 py-2.5 border-b border-pal-border glass">
          <div className="flex items-center gap-3">
            <button onClick={() => setSidebarOpen(!sidebarOpen)}
              className="p-1.5 rounded-lg hover:bg-pal-card text-pal-muted hover:text-pal-text transition-all">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
            </button>
            <span className="text-sm font-bold gradient-text">PALIMPSESTE</span>
            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-pal-accent/15 text-pal-accent font-semibold">BPE</span>
          </div>
          {api.metrics && (
            <div className="hidden md:flex items-center gap-3 text-xs text-pal-muted">
              <span>D={api.metrics.model.D.toLocaleString()}</span>
              <span>·</span>
              <span>|M|={api.metrics.model.n_traces.toLocaleString()}</span>
            </div>
          )}
        </header>

        {/* Content area */}
        {tab === 'chat' && (
          <>
            {/* Messages */}
            <div ref={scrollRef} className="flex-1 overflow-y-auto">
              {messages.length === 0 ? (
                <div className="h-full flex flex-col items-center justify-center px-6">
                  <div className="text-5xl mb-4 animate-float">🧠</div>
                  <h1 className="text-2xl font-bold gradient-text mb-1">PALIMPSESTE</h1>
                  <p className="text-sm text-pal-muted mb-8">A self-referential hypervectorial cortex</p>
                  <div className="grid grid-cols-2 gap-2 max-w-lg w-full">
                    {SUGGESTIONS.map(s => (
                      <button key={s.q} onClick={() => setInput(s.q)}
                        className="flex items-center gap-2 p-3 rounded-xl glass-card hover:border-pal-accent/30 transition-all text-left">
                        <span className="text-lg">{s.icon}</span>
                        <div>
                          <div className="text-xs font-medium text-pal-text">{s.title}</div>
                          <div className="text-[10px] text-pal-muted truncate">{s.q}</div>
                        </div>
                      </button>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="max-w-3xl mx-auto px-4 py-6 space-y-6">
                  {messages.map(msg => (
                    <div key={msg.id} className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : ''} animate-slide-up`}>
                      {msg.role === 'palimpseste' && (
                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-pal-accent to-pal-accent2 flex items-center justify-center text-sm flex-shrink-0">
                          🧠
                        </div>
                      )}
                      <div className={`max-w-[80%] ${msg.role === 'user' ? 'order-1' : ''}`}>
                        <div className={`rounded-2xl px-4 py-3 ${
                          msg.role === 'user'
                            ? 'bg-gradient-to-br from-pal-accent/30 to-pal-accent/10 border border-pal-accent/30'
                            : 'glass border border-pal-border'
                        }`}>
                          <p className="text-sm text-pal-text whitespace-pre-wrap break-words">{msg.text}</p>
                          {msg.role === 'palimpseste' && msg.source && (
                            <div className="mt-2 pt-2 border-t border-pal-border/50">
                              <div className="flex items-center justify-between gap-2">
                                <SourceBadge source={msg.source} confidence={msg.confidence ?? 0} />
                                {msg.elapsed_ms !== undefined && (
                                  <span className="text-[10px] text-pal-muted font-mono">{msg.elapsed_ms < 1 ? '<1' : msg.elapsed_ms.toFixed(0)}ms</span>
                                )}
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                      {msg.role === 'user' && (
                        <div className="w-8 h-8 rounded-full bg-pal-card flex items-center justify-center text-sm flex-shrink-0">
                          🧑
                        </div>
                      )}
                    </div>
                  ))}
                  {api.loading && (
                    <div className="flex gap-3">
                      <div className="w-8 h-8 rounded-full bg-gradient-to-br from-pal-accent to-pal-accent2 flex items-center justify-center text-sm">🧠</div>
                      <div className="glass border border-pal-border rounded-2xl px-4 py-3">
                        <div className="flex gap-1.5">
                          <span className="w-2 h-2 rounded-full bg-pal-accent animate-bounce" style={{ animationDelay: '0ms' }} />
                          <span className="w-2 h-2 rounded-full bg-pal-accent animate-bounce" style={{ animationDelay: '150ms' }} />
                          <span className="w-2 h-2 rounded-full bg-pal-accent animate-bounce" style={{ animationDelay: '300ms' }} />
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Input bar */}
            <div className="border-t border-pal-border glass px-4 py-3">
              <div className="max-w-3xl mx-auto flex gap-2 items-end">
                <textarea
                  value={input}
                  onChange={e => setInput(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() } }}
                  placeholder="Message PALIMPSESTE..."
                  rows={1}
                  className="flex-1 bg-pal-surface border border-pal-border rounded-2xl px-4 py-3 text-sm text-pal-text placeholder:text-pal-muted focus:outline-none focus:border-pal-accent/40 transition-all resize-none max-h-32"
                  style={{ minHeight: '46px' }}
                />
                <button onClick={handleSend} disabled={!input.trim() || api.loading}
                  className="p-3 rounded-2xl bg-gradient-to-br from-pal-accent to-pal-accent2 text-white transition-all hover:scale-105 hover:glow-accent disabled:opacity-30 disabled:cursor-not-allowed">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
                </button>
              </div>
              <p className="text-center text-[10px] text-pal-muted mt-1.5">
                PALIMPSESTE can make mistakes. No weights, no gradient, no GPU.
              </p>
            </div>
          </>
        )}

        {/* TEACH TAB */}
        {tab === 'teach' && (
          <div className="flex-1 overflow-y-auto p-6">
            <div className="max-w-lg mx-auto space-y-4">
              <h2 className="text-lg font-bold text-pal-text flex items-center gap-2">📚 Teach PALIMPSESTE</h2>
              <p className="text-sm text-pal-muted">Teach new facts instantly. O(1) memory write, immediately retrievable.</p>
              <input value={teachQ} onChange={e => setTeachQ(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleTeach()}
                placeholder="Question" className="w-full bg-pal-surface border border-pal-border rounded-xl px-4 py-2.5 text-sm text-pal-text placeholder:text-pal-muted focus:outline-none focus:border-pal-green/40" />
              <input value={teachA} onChange={e => setTeachA(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleTeach()}
                placeholder="Answer" className="w-full bg-pal-surface border border-pal-border rounded-xl px-4 py-2.5 text-sm text-pal-text placeholder:text-pal-muted focus:outline-none focus:border-pal-green/40" />
              <button onClick={handleTeach} disabled={!teachQ.trim() || !teachA.trim() || api.loading}
                className="w-full py-2.5 rounded-xl bg-gradient-to-r from-pal-green to-pal-accent2 text-white font-semibold text-sm transition-all hover:scale-[1.02] disabled:opacity-30">
                ⚡ Teach Instantly
              </button>
              {teachHistory.map((h, i) => (
                <div key={i} className="p-3 rounded-xl glass-card animate-slide-up">
                  <div className="text-sm text-pal-text">{h.q} → <span className="text-pal-green font-medium">{h.a}</span></div>
                  <div className="text-[10px] text-pal-muted mt-0.5">+{h.tokens} tokens</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* LEARN TAB */}
        {tab === 'learn' && (
          <div className="flex-1 overflow-y-auto p-6">
            <div className="max-w-lg mx-auto space-y-4">
              <h2 className="text-lg font-bold text-pal-text flex items-center gap-2">📖 Instant Expertise</h2>
              <p className="text-sm text-pal-muted">Paste any text. PALIMPSESTE becomes an expert in milliseconds.</p>
              <textarea value={learnText} onChange={e => setLearnText(e.target.value)} placeholder="Paste a document, article, or any text..." rows={8}
                className="w-full bg-pal-surface border border-pal-border rounded-xl px-4 py-2.5 text-sm text-pal-text placeholder:text-pal-muted focus:outline-none focus:border-pal-accent2/40 resize-none" />
              <button onClick={handleLearn} disabled={!learnText.trim() || api.loading}
                className="w-full py-2.5 rounded-xl bg-gradient-to-r from-pal-accent2 to-pal-green text-white font-semibold text-sm transition-all hover:scale-[1.02] disabled:opacity-30">
                ⚡ Learn Instantly
              </button>
              {learnResult && !learnResult.error && (
                <div className="p-3 rounded-xl glass-card border-pal-accent2/20 animate-slide-up">
                  <div className="text-sm font-semibold text-pal-green mb-1">✓ Learned {learnResult.n_facts} facts in {learnResult.n_seconds}s</div>
                  {learnResult.facts?.map((f: any, i: number) => (
                    <div key={i} className="text-xs text-pal-text mt-1"><span className="text-pal-accent2">Q:</span> {f.q}<br/><span className="text-pal-green">A:</span> {f.a?.slice(0, 80)}</div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}

        {/* DREAM TAB */}
        {tab === 'dream' && (
          <div className="flex-1 overflow-y-auto p-6">
            <div className="max-w-lg mx-auto space-y-4">
              <h2 className="text-lg font-bold text-pal-text flex items-center gap-2">🌙 Dream Consolidation</h2>
              <p className="text-sm text-pal-muted">When idle, PALIMPSESTE replays memory, discovers concepts, and gets smarter autonomously.</p>
              <button onClick={handleDream} disabled={api.loading}
                className="w-full py-2.5 rounded-xl bg-gradient-to-r from-pal-accent to-pal-accent2 text-white font-semibold text-sm transition-all hover:scale-[1.02] hover:glow-accent disabled:opacity-30">
                🌙 Trigger Dream
              </button>
              {dreamResult && !dreamResult.error && (
                <div className="p-3 rounded-xl glass-card border-pal-accent/20 animate-slide-up">
                  <div className="text-sm font-semibold text-pal-accent">✓ {dreamResult.n_concepts_extracted} concepts discovered</div>
                  <div className="text-xs text-pal-muted mt-1">in {dreamResult.n_seconds}s · {dreamResult.n_total_concepts} total</div>
                  {dreamResult.concept_labels?.length > 0 && (
                    <div className="flex flex-wrap gap-1 mt-2">
                      {dreamResult.concept_labels.map((l: string, i: number) => (
                        <span key={i} className="text-[10px] px-2 py-0.5 rounded-full bg-pal-accent/10 text-pal-accent">{l}</span>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* STATS TAB */}
        {tab === 'stats' && api.metrics && (
          <div className="flex-1 overflow-y-auto p-6">
            <div className="max-w-lg mx-auto space-y-3">
              <h2 className="text-lg font-bold text-pal-text">📊 Statistics</h2>
              <div className="grid grid-cols-2 gap-2">
                <StatCard label="Dimension (D)" value={api.metrics.model.D.toLocaleString()} />
                <StatCard label="Memory Traces" value={api.metrics.model.n_traces.toLocaleString()} />
                <StatCard label="Vocab" value={api.metrics.model.vocab_size.toLocaleString()} />
                <StatCard label="Context Window" value={api.metrics.model.context_window.toString()} />
                <StatCard label="Kernel Radius" value={api.metrics.config.kernel_radius.toString()} />
                <StatCard label="Temperature" value={api.metrics.config.temperature.toString()} />
                <StatCard label="Turns" value={api.metrics.conversation.turns.toString()} />
                <StatCard label="Mean Weight" value={api.metrics.memory.mean_weight.toFixed(3)} />
              </div>
              <div className="p-3 rounded-xl glass-card">
                <div className="text-[10px] text-pal-muted uppercase font-medium mb-1">Theoretical Capacity</div>
                <div className="text-lg font-bold gradient-text">2^{(api.metrics.model.theoretical_capacity_log2 / 3.32).toFixed(0)}</div>
                <div className="text-[10px] text-pal-muted">≈ 10^{api.metrics.model.theoretical_capacity_log2.toFixed(0)} associations</div>
              </div>
            </div>
          </div>
        )}
        {tab === 'stats' && !api.metrics && (
          <div className="flex-1 flex items-center justify-center text-pal-muted text-sm">Loading statistics...</div>
        )}
      </main>
    </div>
  )
}

function StatCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="p-3 rounded-xl glass-card">
      <div className="text-[10px] text-pal-muted uppercase font-medium">{label}</div>
      <div className="text-lg font-bold text-pal-text">{value}</div>
    </div>
  )
}