// Welcome / empty state + composer — chatbot-first treatment.

const { useState: useStateW, useRef: useRefW } = React;

const Welcome = ({ onAsk, onOpenSources }) => {
  const D = window.OMNI_DATA;
  const hour = new Date().getHours();
  const greet = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';

  return (
    <div className="welcome">
      <div className="welcome-mark">
        <Icon name="sparkle" size={22}/>
      </div>
      <h1 className="greet">
        {greet}, Priya.
        <span className="greet-em">What do you want to know?</span>
      </h1>
      <div className="sub">
        Ask anything — I&rsquo;ll figure out where the answer lives, show my work,
        and back every number with its source.
      </div>

      <div className="welcome-section">
        <div className="h">Try one of these</div>
        <div className="suggest-list">
          {D.SUGGESTED.map((s, i) => {
            const A = D.AGENTS.find(a => a.id === s.agent);
            return (
              <button key={i} className="suggest" onClick={() => onAsk(s.q)}>
                <span className="q">{s.q}</span>
                <span className="arr">↗</span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="welcome-section">
        <div className="h" style={{ display:'flex', alignItems:'center', justifyContent:'center', gap: 10 }}>
          <span>Or pick a source · 8 connected</span>
          <button className="link-chip" onClick={onOpenSources}>configure →</button>
        </div>
        <div className="src-grid">
          {D.AGENTS.map(a => (
            <button key={a.id} className="src-card"
                    onClick={() => onAsk(`Using ${a.name}: `)}
                    title={a.desc}>
              <div className="glyph" style={{ background: a.tint }}>{a.icon}</div>
              <div className="name">{a.name}</div>
              <div className="desc">{a.desc}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

const Composer = ({ value, setValue, onSend, mode, setMode, speed, setSpeed, onOpenSources, sourcesActive }) => {
  const taRef = useRefW();
  const onKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSend(); }
  };
  const grow = (el) => { el.style.height = 'auto'; el.style.height = Math.min(160, el.scrollHeight) + 'px'; };

  return (
    <div className="composer-wrap">
      <div className="composer">
        <div className="composer-input">
          <textarea ref={taRef} placeholder="Ask OmniBuddy…"
                    rows={1}
                    value={value}
                    onChange={(e) => { setValue(e.target.value); grow(e.target); }}
                    onKeyDown={onKey}/>
          <button className="send" onClick={onSend} disabled={!value.trim()} title="Send (Enter)">
            <Icon name="send" size={15}/>
          </button>
        </div>
        <div className="composer-toolbar">
          <button className="t-chip"><Icon name="paperclip" size={12}/> Attach</button>
          <button className="t-chip" onClick={onOpenSources}>
            <Icon name="layers" size={12}/>
            Sources <span className="lbl-s">· {sourcesActive === 8 ? 'auto' : `${sourcesActive}/8`}</span>
          </button>

          <div className="seg" style={{ marginLeft: 4 }}>
            <button className={mode === 'work' ? 'on' : ''} onClick={() => setMode('work')}>Work</button>
            <button className={mode === 'web'  ? 'on' : ''} onClick={() => setMode('web')}>Web</button>
          </div>
          <div className="seg">
            <button className={speed === 'fast'    ? 'on' : ''} onClick={() => setSpeed('fast')}>Fast</button>
            <button className={speed === 'complex' ? 'on' : ''} onClick={() => setSpeed('complex')}>Complex</button>
          </div>

          <div className="spacer"/>

          <span style={{ fontSize: 11, color: 'var(--muted-2)', fontFamily: 'var(--font-mono)' }}>
            ⇧↵ newline · ↵ send
          </span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Welcome, Composer });