import React, { useEffect, useRef, useState } from 'react'

import { CANNED_REPLY, CHAT, type ChatMessage } from '../../data/fixtures.js'
import { Icon, IconButton } from '../ui/index.js'

/**
 * Reginald's panel — chat is the write-path (decisions.md D1). This is the P3-2
 * fixture shell: it echoes a canned reply so the layout + interactions are real,
 * but no model is wired. P4 replaces `send` with the model router + tools.
 */
export interface ChatPanelProps {
  onOpenDirectives?: () => void
  offline?: boolean
}

export function ChatPanel({ onOpenDirectives, offline }: ChatPanelProps) {
  const [msgs, setMsgs] = useState<ChatMessage[]>(CHAT)
  const [text, setText] = useState('')
  const [thinking, setThinking] = useState(false)
  const scrollRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el = scrollRef.current
    if (el) el.scrollTop = el.scrollHeight
  }, [msgs, thinking])

  const send = () => {
    const t = text.trim()
    if (!t) return
    setMsgs((m) => [...m, { from: 'user', text: t }])
    setText('')
    setThinking(true)
    setTimeout(() => {
      setThinking(false)
      setMsgs((m) => [...m, { from: 'agent', text: CANNED_REPLY }])
    }, 900)
  }

  return (
    <aside
      style={{
        width: 330,
        flexShrink: 0,
        display: 'flex',
        flexDirection: 'column',
        background: 'var(--surface-card)',
        borderLeft: '1px solid var(--line-1)',
        minHeight: 0,
      }}
    >
      <header
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          padding: '14px 16px',
          borderBottom: '1px solid var(--line-1)',
          flexShrink: 0,
        }}
      >
        <Icon name="sparkles" size={16} style={{ color: offline ? 'var(--ink-3)' : 'var(--jade)' }} />
        <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>Reginald</span>
        <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', marginLeft: 'auto' }}>
          {offline ? 'offline · queueing' : 'gemma-4b · local'}
        </span>
        <IconButton icon="history" label="Directive log" size="sm" onClick={onOpenDirectives} />
      </header>

      <div
        ref={scrollRef}
        style={{ flex: 1, overflowY: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}
      >
        {msgs.map((m, i) =>
          m.from === 'agent' ? (
            <div key={i} style={{ font: 'var(--text-agent)', color: 'var(--ink-1)', lineHeight: 1.55 }}>
              {m.text}
            </div>
          ) : (
            <div
              key={i}
              style={{
                alignSelf: 'flex-end',
                maxWidth: '85%',
                background: 'var(--paper-2)',
                borderRadius: '10px 10px 2px 10px',
                padding: '8px 12px',
                font: 'var(--text-small)',
                color: 'var(--ink-1)',
              }}
            >
              {m.text}
            </div>
          ),
        )}
        {offline ? (
          <div style={{ font: 'var(--text-agent)', color: 'var(--ink-3)' }}>
            The model is away from its desk. Reads still work; writes will wait their turn.
          </div>
        ) : null}
        {thinking ? <div style={{ font: 'var(--text-agent)', color: 'var(--ink-3)' }}>considering…</div> : null}
      </div>

      <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', flexShrink: 0 }}>
        <div
          style={{
            display: 'flex',
            alignItems: 'flex-end',
            gap: 8,
            background: 'var(--paper-0)',
            border: '1px solid var(--line-2)',
            borderRadius: 'var(--radius-2)',
            padding: '8px 8px 8px 12px',
          }}
        >
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault()
                send()
              }
            }}
            placeholder={offline ? 'Writes wait for the connection…' : 'Tell me what to do…'}
            disabled={offline}
            rows={1}
            style={{
              flex: 1,
              resize: 'none',
              border: 'none',
              outline: 'none',
              background: 'transparent',
              font: 'var(--text-body)',
              color: 'var(--ink-1)',
              lineHeight: 1.45,
              maxHeight: 96,
            }}
          />
          <button
            type="button"
            onClick={send}
            aria-label="Send"
            disabled={offline}
            style={{
              width: 30,
              height: 30,
              borderRadius: 'var(--radius-2)',
              border: 'none',
              cursor: offline ? 'not-allowed' : 'pointer',
              background: offline ? 'var(--paper-3)' : 'var(--accent)',
              color: offline ? 'var(--ink-3)' : 'var(--ink-inverse)',
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <Icon name="send" size={14} />
          </button>
        </div>
        <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: '8px 2px 0' }}>
          Chat is the write-path. Destructive changes are proposed, never assumed.
        </p>
      </div>
    </aside>
  )
}
