// ─── Smart BI 챗 뷰 ───
const { useState: cUseState, useEffect: cUseEffect, useRef: cUseRef } = React;

const CHEV_DOWN = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>;

function MiniViewToggle({ value, onChange }) {
  return (
    <div className="mini-view-toggle" onClick={(e) => e.stopPropagation()}>
      {['bar', 'line', 'pie', 'table'].map((v) => (
        <button key={v} className={value === v ? 'active' : ''} onClick={() => onChange(v)} title={({ bar: '막대', line: '선', pie: '파이', table: '표' })[v]}>{VIEW_ICON[v]}</button>
      ))}
    </div>
  );
}

// 채팅 결과 카드 (호버 시 액션 메뉴)
function ResultCard({ msg, onSave, saved }) {
  const [view, setView] = cUseState(msg.result.view);
  const comp = { ...msg.result, view, config: msg.config || { topN: 10, theme: 'blue' }, dataset: msg.dataset };
  return (
    <div className="result-card">
      <div className="result-card-head">
        <span className="vic">{VIEW_ICON[view]}</span>
        <div style={{ minWidth: 0 }}>
          <div className="t">{msg.result.title}</div>
          <div className="d">{msg.result.desc} · 출처: {msg.dataset}</div>
        </div>
        <div className="result-card-actions">
          <MiniViewToggle value={view} onChange={setView} />
          {saved
            ? <span className="saved-flag">{I.check}컴포넌트로 저장됨</span>
            : <button className="btn btn-soft btn-sm" onClick={() => onSave(comp)}>{I.save}컴포넌트로 저장</button>}
        </div>
      </div>
      <div className="result-card-body">
        <ComponentView comp={comp} />
      </div>
    </div>
  );
}

// 컴포넌트 저장 모달 — AI 생성 라벨명/설명을 기본값으로, 사용자가 최종 수정 후 저장
function SaveComponentModal({ draft, onClose, onConfirm }) {
  const [title, setTitle] = cUseState(draft.comp.title);
  const [desc, setDesc] = cUseState(draft.comp.desc || '');
  return (
    <Modal title="컴포넌트로 저장" icon={I.save} onClose={onClose}
      foot={<>
        <button className="btn btn-ghost" onClick={onClose}>취소</button>
        <button className="btn btn-primary" disabled={!title.trim()} onClick={() => onConfirm({ ...draft.comp, title: title.trim(), desc: desc.trim() })}>{I.save}저장</button>
      </>}>
      <div className="save-preview"><ComponentView comp={draft.comp} /></div>
      <div className="field">
        <label>라벨명</label>
        <input className="input" autoFocus value={title} onChange={(e) => setTitle(e.target.value)} />
      </div>
      <div className="field">
        <label>설명</label>
        <textarea className="input" rows="2" style={{ resize: 'vertical' }} value={desc} onChange={(e) => setDesc(e.target.value)} />
      </div>
      <div className="field" style={{ marginBottom: 4 }}>
        <label>원본 데이터셋</label>
        <div className="ds-pill">{I.db}{draft.comp.dataset}</div>
      </div>
      <p style={{ fontSize: 11.5, color: 'var(--ink-3)', margin: '10px 0 0' }}>AI가 생성한 라벨명과 설명이 기본값으로 채워져 있어요. 수정 후 저장하세요.</p>
    </Modal>
  );
}

// 저장된 컴포넌트 미리보기 모달
function ComponentPreviewModal({ comp, onClose }) {
  return (
    <Modal title={comp.title} icon={VIEW_ICON[comp.view]} wide onClose={onClose}
      foot={<button className="btn btn-ghost" onClick={onClose}>닫기</button>}>
      <div className="preview-meta">
        {I.db}{comp.source}
        <span className="dot"></span>저장 {comp.savedAt}
        {comp.config && comp.config.period && <span className="chip gray">{I.calendar}{comp.config.period}</span>}
      </div>
      {comp.desc && <p style={{ fontSize: 13, color: 'var(--ink-2)', margin: '0 0 14px' }}>{comp.desc}</p>}
      <div className="preview-body"><ComponentView comp={comp} /></div>
    </Modal>
  );
}

function ThinkingRow({ text }) {
  return (
    <div className="thinking">
      <span className="dots"><i></i><i></i><i></i></span>{text}
    </div>
  );
}

const SUGGEST_ICON = [I.bar, I.pie, I.line, I.table];

function ChatView({ dataset, setDataset, datasets, onSaveComponent, savedFromChat, library, push }) {
  const [messages, setMessages] = cUseState([]);
  const [input, setInput] = cUseState('');
  const [busy, setBusy] = cUseState(false);
  const [asideOpen, setAsideOpen] = cUseState(false);
  const [dsOpen, setDsOpen] = cUseState(false);
  const [saveDraft, setSaveDraft] = cUseState(null);
  const [previewComp, setPreviewComp] = cUseState(null);
  const scrollRef = cUseRef(null);
  const taRef = cUseRef(null);

  cUseEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, busy]);

  const matchScenario = (text) => {
    const t = text.toLowerCase();
    for (const sc of window.BI.CHAT_SCENARIOS) {
      if (sc.keywords.some((k) => t.includes(k.toLowerCase()))) return sc;
    }
    return window.BI.FALLBACK;
  };

  const send = (text) => {
    if (!text.trim() || busy) return;
    const sc = matchScenario(text);
    setMessages((m) => [...m, { role: 'user', text }]);
    setInput('');
    setBusy(true);
    setTimeout(() => {
      setMessages((m) => [...m, { role: 'thinking', text: sc.thinking }]);
    }, 280);
    setTimeout(() => {
      setMessages((m) => {
        const base = m.filter((x) => x.role !== 'thinking');
        return [...base, { role: 'ai', text: sc.text, result: sc.result, dataset: dataset.name, config: { topN: 10, theme: 'blue', subject: sc.result.subject }, id: 'r' + Date.now() }];
      });
      setBusy(false);
    }, 1500);
  };

  const resetChat = () => {
    if (busy) return;
    setMessages([]);
    setInput('');
    push('새 대화를 시작했어요');
  };

  const onKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(input); }
  };

  const autoGrowTa = (el) => { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 120) + 'px'; };

  const raw = window.BI.RAW_PREVIEW[dataset.id];

  return (
    <div className="chat-view">
      <div className="chat-main">
        <div className="chat-ds-bar">
          <span className="lab">분석 대상 데이터셋</span>
          <div className={'ds-select' + (dsOpen ? ' open' : '')} title="클릭하면 원본 데이터를 미리볼 수 있어요" onClick={() => setDsOpen((o) => !o)}>
            {I.db}
            <select value={dataset.id} onClick={(e) => e.stopPropagation()}
              onChange={(e) => { setDataset(datasets.find((d) => d.id === e.target.value)); }}
              style={{ border: 'none', background: 'transparent', fontWeight: 600, color: 'var(--ink-1)', fontSize: 13, cursor: 'pointer' }}>
              {datasets.map((d) => <option key={d.id} value={d.id}>{d.name}</option>)}
            </select>
            <span className="meta">{fmtNum(dataset.rows)} rows · {dataset.updatedAt} 업데이트</span>
            <span className="chev">{CHEV_DOWN}</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost btn-sm" onClick={resetChat} disabled={messages.length === 0 || busy} title="대화를 초기화합니다">{I.refresh}새 대화</button>
            <button className={'btn btn-sm ' + (asideOpen ? 'btn-soft' : 'btn-ghost')} onClick={() => setAsideOpen((o) => !o)}>
              {I.layers}저장된 컴포넌트<span className="chip" style={{ padding: '0 7px' }}>{library.length}</span>
            </button>
          </div>
        </div>

        <div className={'ds-preview' + (dsOpen ? ' open' : '')}>
          <div className="ds-preview-inner">
            <div className="ds-preview-head">
              {I.table}<b>{dataset.name}</b> 원본 미리보기
              <span className="meta">상위 {raw ? raw.rows.length : 0}행 · 전체 {fmtNum(dataset.rows)} rows · {dataset.desc}</span>
              <button className="x" onClick={() => setDsOpen(false)} title="닫기">{I.x}</button>
            </div>
            {raw && (
              <div className="ds-preview-tbl">
                <DataTable columns={raw.cols} rows={raw.rows} compact />
              </div>
            )}
          </div>
        </div>

        <div className="chat-scroll" ref={scrollRef}>
          {messages.length === 0 ? (
            <div className="chat-empty">
              <div className="orb">{I.sparkle}</div>
              <h2>무엇이든 물어보세요</h2>
              <p><b>{dataset.name}</b>를 기반으로 분석해 드릴게요. 결과는 표·차트로 받아 컴포넌트로 저장할 수 있어요.</p>
              <div className="suggest-grid">
                {window.BI.CHAT_SCENARIOS.map((sc, i) => (
                  <button className="suggest-card" key={i} onClick={() => send(sc.suggestion)}>
                    <span className="ic">{SUGGEST_ICON[i % 4]}</span>
                    <span className="tx">{sc.suggestion}</span>
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <div className="chat-inner">
              {messages.map((m, i) => {
                if (m.role === 'user') return (
                  <div className="msg user" key={i}><div className="ava">나</div><div className="bubble">{m.text}</div></div>
                );
                if (m.role === 'thinking') return (
                  <div className="msg ai" key={i}><div className="ava">{I.sparkle}</div><div className="body"><ThinkingRow text={m.text} /></div></div>
                );
                return (
                  <div className="msg ai" key={i}>
                    <div className="ava">{I.sparkle}</div>
                    <div className="body">
                      <div className="text">{m.text}</div>
                      <ResultCard msg={m} saved={savedFromChat.includes(m.id)} onSave={(comp) => setSaveDraft({ comp, msgId: m.id })} />
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="composer">
          <div className="composer-inner">
            {messages.length > 0 && (
              <div className="quick-chips">
                {['기관 기준으로 다시 보여줘', '최근 3개월만', '운용사별 점유율은?', '표로 정리해줘'].map((q) => (
                  <button className="quick-chip" key={q} onClick={() => send(q)}>{q}</button>
                ))}
              </div>
            )}
            <div className="composer-box">
              <textarea ref={taRef} rows="1" placeholder={`${dataset.name}에 대해 질문해 보세요…`} value={input}
                onChange={(e) => { setInput(e.target.value); autoGrowTa(e.target); }} onKeyDown={onKey} />
              <button className="composer-send" disabled={!input.trim() || busy} onClick={() => send(input)}>{I.send}</button>
            </div>
            <div className="composer-hint">AI는 선택된 데이터셋 범위 내에서 분석합니다 · 결과 카드를 호버하면 컴포넌트로 저장할 수 있어요</div>
          </div>
        </div>
      </div>

      <aside className={'chat-aside' + (asideOpen ? ' open' : '')}>
        <div className="chat-aside-head">
          <div style={{ minWidth: 0 }}>
            <div className="t">{I.layers}저장된 컴포넌트<span className="cnt">{library.length}</span></div>
            <div className="s">카드를 클릭하면 미리볼 수 있어요.</div>
          </div>
          <button className="x" onClick={() => setAsideOpen(false)} title="닫기">{I.x}</button>
        </div>
        <div className="chat-aside-list">
          {library.map((c) => (
            <button className="lib-card" key={c.id} onClick={() => setPreviewComp(c)}>
              <div className="top">
                <span className="vic">{VIEW_ICON[c.view]}</span>
                <div className="t">{c.title}</div>
              </div>
              <div className="meta">{c.source}<span className="dot"></span>{c.savedAt}</div>
            </button>
          ))}
        </div>
      </aside>

      {saveDraft && (
        <SaveComponentModal draft={saveDraft} onClose={() => setSaveDraft(null)}
          onConfirm={(comp) => { onSaveComponent(comp, saveDraft.msgId); setSaveDraft(null); }} />
      )}
      {previewComp && <ComponentPreviewModal comp={previewComp} onClose={() => setPreviewComp(null)} />}
    </div>
  );
}

window.ChatView = ChatView;