// STAGE 00 · Brief Landing — 앱 진입 화면
// 8-축 브리프 카드 선택 + 실시간 Multi-Agent 코멘트

const { useState, useEffect, useMemo, useRef } = React;

// ---------- 유틸: 스코어 계산 ----------
function calcScores(sel) {
  const W = window.BRIEF_SCORE_WEIGHTS;
  const dims = ["evidence", "market", "reg_diff", "cost"];
  const out = {};
  for (const dim of dims) {
    let sum = 0, cnt = 0;
    const w = W[dim] || {};
    for (const [axis, val] of Object.entries(sel)) {
      const axW = w[axis];
      if (!axW) continue;
      const vals = Array.isArray(val) ? val : [val];
      for (const v of vals) {
        if (axW[v] != null) { sum += axW[v]; cnt++; }
      }
    }
    out[dim] = cnt ? sum / cnt : 0;
  }
  return out;
}

// ---------- 우측: 실시간 Agent 반응 스트림 ----------
function BriefAgentStream({ events, agents }) {
  const listRef = useRef(null);
  useEffect(() => {
    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
  }, [events.length]);

  return (
    <aside className="brief-agent-panel">
      <div className="brief-agent-header">
        <div className="brief-agent-title-row">
          <div className="brief-agent-title">TEAM · LIVE BRIEF</div>
          <div className="brief-agent-sub mono">5 agents · listening</div>
        </div>
        <div className="brief-agent-roster">
          {Object.values(window.AGENTS).map(a => {
            const active = agents.includes(a.id);
            return (
              <div key={a.id} className={`brief-mini-agent ${active ? "active" : ""}`}
                   style={{"--ac": a.color}}>
                <div className="brief-mini-dot"></div>
                <span className="mono">{a.name}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div className="brief-agent-stream" ref={listRef}>
        {events.length === 0 && (
          <div className="brief-agent-empty">
            <div className="brief-agent-empty-dot pulse"></div>
            <div className="brief-agent-empty-txt">
              축 선택 시 Agent 코멘트 시작
              <span className="mono">try: 카테고리 → 생애주기</span>
            </div>
          </div>
        )}
        {events.map((e, i) => {
          const a = window.AGENTS[e.agent];
          return (
            <div key={i} className={`brief-msg brief-msg-${e.tone || "info"}`} style={{"--ac": a.color}}>
              <div className="brief-msg-head">
                <span className="brief-msg-avatar" style={{background: a.color}}>{a.initial}</span>
                <span className="brief-msg-who mono">{a.name}</span>
                <span className="brief-msg-role">{a.role}</span>
                {e.tone === "flag" && <span className="brief-msg-badge">⚠ FLAG</span>}
                {e.tone === "insight" && <span className="brief-msg-badge">INSIGHT</span>}
                <span className="brief-msg-time mono">+{e.t}</span>
              </div>
              <div className="brief-msg-body">{e.msg}</div>
              {e.ref && <div className="brief-msg-ref mono">{e.ref}</div>}
            </div>
          );
        })}
      </div>

      <div className="brief-agent-input">
        <div className="input-wrap">
          <span className="input-prompt mono">▸</span>
          <input placeholder="에이전트에게 질문 · 예: '이 조합이 진짜 될까?'" />
          <button className="input-send">↵</button>
        </div>
      </div>
    </aside>
  );
}

// ---------- 축 카드 그리드 ----------
function AxisSection({ axis, selected, onToggle, defaultOpen }) {
  const [open, setOpen] = useState(defaultOpen);
  const isMulti = axis.multi;
  const values = isMulti ? (selected || []) : (selected ? [selected] : []);
  const lead = window.AGENTS[axis.lead];
  const selectedLabels = values.map(v => axis.options.find(o => o.id === v)?.label).filter(Boolean);

  return (
    <section className={`brief-axis ${open ? "open" : "closed"} ${values.length ? "has-value" : ""}`}>
      <header className="brief-axis-head" onClick={() => setOpen(!open)}>
        <div className="brief-axis-marker" style={{"--ac": lead.color}}>
          <span className="brief-axis-icon">{axis.icon}</span>
        </div>
        <div className="brief-axis-titles">
          <div className="brief-axis-title-row">
            <span className="brief-axis-label">{axis.label}</span>
            {axis.required && <span className="brief-axis-req mono">REQUIRED</span>}
            {axis.multi && <span className="brief-axis-multi mono">MULTI</span>}
          </div>
          <div className="brief-axis-en mono">{axis.en}</div>
        </div>
        <div className="brief-axis-lead" style={{"--ac": lead.color}}>
          <span className="brief-axis-lead-avatar">{lead.initial}</span>
          <span className="brief-axis-lead-name mono">LEAD · {lead.name}</span>
        </div>
        <div className="brief-axis-summary">
          {selectedLabels.length > 0 ? (
            <div className="brief-axis-chips">
              {selectedLabels.slice(0, 3).map((l, i) => <span key={i} className="brief-axis-chip">{l}</span>)}
              {selectedLabels.length > 3 && <span className="brief-axis-chip more">+{selectedLabels.length - 3}</span>}
            </div>
          ) : (
            <span className="brief-axis-empty mono">미선택</span>
          )}
        </div>
        <div className="brief-axis-toggle">{open ? "−" : "+"}</div>
      </header>

      {open && (
        <div className="brief-axis-grid">
          {axis.options.map(opt => {
            const active = values.includes(opt.id);
            return (
              <button
                key={opt.id}
                className={`brief-opt ${active ? "active" : ""} ${opt.hot ? "hot" : ""}`}
                onClick={() => onToggle(axis.id, opt.id, isMulti)}
                style={{"--ac": lead.color}}
              >
                <div className="brief-opt-head">
                  <span className="brief-opt-label">{opt.label}</span>
                  {opt.hot && <span className="brief-opt-hot mono">HOT</span>}
                </div>
                <div className="brief-opt-sub mono">{opt.sub}</div>
                {active && <div className="brief-opt-check">✓</div>}
              </button>
            );
          })}
        </div>
      )}
    </section>
  );
}

// ---------- 하단 요약 · 스코어 게이지 ----------
function ScoreBar({ label, value, tone = "up", suffix = "" }) {
  const pct = Math.round(value * 100);
  const cls = tone === "down" ? "score-down" : tone === "warn" ? "score-warn" : "score-up";
  return (
    <div className={`brief-score ${cls}`}>
      <div className="brief-score-head">
        <span className="brief-score-label">{label}</span>
        <span className="brief-score-val mono">{pct}<span className="brief-score-unit">/100</span></span>
      </div>
      <div className="brief-score-track">
        <div className="brief-score-fill" style={{width: `${pct}%`}}></div>
        <div className="brief-score-ticks">
          {[20,40,60,80].map(t => <span key={t} style={{left: `${t}%`}}></span>)}
        </div>
      </div>
      <div className="brief-score-legend mono">{suffix}</div>
    </div>
  );
}

function BriefSummary({ sel, scores, canStart, missingAxes, onStart, onReset }) {
  const readablePairs = [];
  window.BRIEF_AXES.forEach(ax => {
    const val = sel[ax.id];
    if (!val || (Array.isArray(val) && !val.length)) return;
    const vals = Array.isArray(val) ? val : [val];
    const labels = vals.map(v => ax.options.find(o => o.id === v)?.label).filter(Boolean);
    if (labels.length) readablePairs.push({ ax: ax.label, val: labels.join(" · ") });
  });

  return (
    <div className="brief-summary">
      <div className="brief-summary-top">
        <div className="brief-summary-left">
          <div className="brief-summary-eyebrow mono">PROJECT BRIEF · WORKING DRAFT</div>
          <div className="brief-summary-headline">
            {readablePairs.length === 0 ? (
              <span className="brief-summary-placeholder">
                아직 정의된 축이 없습니다. 위에서 카테고리부터 선택하세요.
              </span>
            ) : (
              readablePairs.map((p, i) => (
                <span key={i} className="brief-summary-chunk">
                  <span className="brief-summary-key mono">{p.ax}</span>
                  <span className="brief-summary-val">{p.val}</span>
                  {i < readablePairs.length - 1 && <span className="brief-summary-sep">·</span>}
                </span>
              ))
            )}
          </div>
        </div>
        <div className="brief-summary-actions">
          <button className="brief-btn-ghost" onClick={onReset}>초기화</button>
          <button
            className={`brief-btn-primary ${canStart ? "" : "disabled"}`}
            onClick={canStart ? onStart : undefined}
            disabled={!canStart}
          >
            <span className="brief-btn-primary-label">5-Stage 리서치 시작</span>
            <span className="brief-btn-primary-arrow">→</span>
          </button>
        </div>
      </div>

      <div className="brief-summary-scores">
        <ScoreBar label="근거 강도"    value={scores.evidence} tone="up"   suffix="논문·가이드라인 근거 확보 용이성" />
        <ScoreBar label="시장 매력도"  value={scores.market}   tone="up"   suffix="시장 규모 × 성장률 × 진입 여지" />
        <ScoreBar label="규제 난이도"  value={scores.reg_diff} tone="warn" suffix="허가 소요 기간·비용 (높을수록 부담)" />
        <ScoreBar label="원가 부담"    value={scores.cost}     tone="down" suffix="원료·제조·물류 비중 (높을수록 부담)" />
      </div>

      {!canStart && missingAxes.length > 0 && (
        <div className="brief-summary-missing">
          <span className="mono">필수 축 미완:</span>
          {missingAxes.map(m => <span key={m} className="brief-summary-missing-chip">{m}</span>)}
        </div>
      )}
    </div>
  );
}

// ---------- 프리셋 러너 ----------
function BriefPresets({ onApply, current }) {
  return (
    <div className="brief-presets">
      <div className="brief-presets-label mono">QUICK START ·</div>
      {window.BRIEF_PRESETS.map(p => (
        <button key={p.id}
          className={`brief-preset ${current === p.id ? "active" : ""}`}
          onClick={() => onApply(p)}>
          <span className={`brief-preset-tag brief-preset-tag-${p.tag === "기존" ? "old" : p.tag === "추천" ? "hot" : "new"}`}>{p.tag}</span>
          <span className="brief-preset-label">{p.label}</span>
          <span className="brief-preset-sub mono">{p.sub}</span>
        </button>
      ))}
    </div>
  );
}

// ---------- 메인 랜딩 ----------
function BriefLanding({ onLaunch }) {
  const [sel, setSel] = useState(() => {
    const saved = localStorage.getItem("phytolab-brief");
    return saved ? JSON.parse(saved) : {};
  });
  const [events, setEvents] = useState([]);
  const [activeAgents, setActiveAgents] = useState([]);
  const [presetId, setPresetId] = useState(null);
  const eventTimerRef = useRef(0);

  useEffect(() => { localStorage.setItem("phytolab-brief", JSON.stringify(sel)); }, [sel]);

  const scores = useMemo(() => calcScores(sel), [sel]);

  const missingAxes = window.BRIEF_AXES.filter(ax => {
    if (!ax.required) return false;
    const v = sel[ax.id];
    return !v || (Array.isArray(v) && !v.length);
  }).map(ax => ax.label);
  const canStart = missingAxes.length === 0;

  // Agent 반응 트리거
  const pushAgentReaction = (axisId, optId) => {
    const axis = window.BRIEF_AXES.find(a => a.id === axisId);
    const opt = axis.options.find(o => o.id === optId);
    if (!opt) return;

    const reactions = [];
    // 축 리드가 항상 코멘트
    const leadId = axis.lead;
    const leadMsg = window.BRIEF_AGENT_REACTIONS[leadId]?.[axisId]?.[optId];
    if (leadMsg) {
      reactions.push({ agent: leadId, msg: leadMsg, tone: "insight" });
    } else {
      reactions.push({ agent: leadId, msg: `"${opt.label}" 선택 확인. 관련 데이터 스캔 중…`, tone: "info" });
    }

    // 다른 Agent 반응 (있으면)
    ["mara","clio","rena","finn","rega"].forEach(id => {
      if (id === leadId) return;
      const msg = window.BRIEF_AGENT_REACTIONS[id]?.[axisId]?.[optId];
      if (msg) {
        const tone = msg.startsWith("⚠") ? "flag" : "info";
        reactions.push({ agent: id, msg, tone });
      }
    });

    // 시차를 두고 큐잉
    const baseT = eventTimerRef.current;
    reactions.forEach((r, i) => {
      const t = (baseT + (i + 1) * 0.6).toFixed(1);
      setTimeout(() => {
        setEvents(prev => [...prev, { ...r, t, ref: `axis:${axis.en} → ${opt.label}` }]);
        setActiveAgents(prev => Array.from(new Set([...prev, r.agent])));
        setTimeout(() => setActiveAgents(prev => prev.filter(a => a !== r.agent)), 3000);
      }, i * 500);
    });
    eventTimerRef.current = baseT + reactions.length * 0.6;
  };

  const toggle = (axisId, optId, isMulti) => {
    setSel(prev => {
      const cur = prev[axisId];
      if (isMulti) {
        const arr = Array.isArray(cur) ? cur : [];
        const next = arr.includes(optId) ? arr.filter(x => x !== optId) : [...arr, optId];
        return { ...prev, [axisId]: next };
      } else {
        if (cur === optId) {
          const cp = { ...prev }; delete cp[axisId]; return cp;
        }
        return { ...prev, [axisId]: optId };
      }
    });
    setPresetId(null);
    pushAgentReaction(axisId, optId);
  };

  const applyPreset = (p) => {
    setSel({ ...p.axes });
    setPresetId(p.id);
    setEvents([]);
    eventTimerRef.current = 0;
    // 프리셋 적용 시 요약 코멘트
    setTimeout(() => {
      setEvents([
        { agent: "mara",  msg: `프리셋 "${p.label}" 로드 · ${p.sub}`, tone: "info", t: "0.3" },
        { agent: "clio",  msg: `해당 조합의 임상 근거 스캔 완료. 근거 강도 ${Math.round(calcScores(p.axes).evidence * 100)}점.`, tone: "insight", t: "1.1" },
        { agent: "finn",  msg: `원가·마진 시뮬을 이 조합에 맞춰 준비하겠습니다.`, tone: "info", t: "1.8" },
      ]);
      eventTimerRef.current = 2.4;
    }, 100);
  };

  const reset = () => {
    setSel({});
    setEvents([]);
    setPresetId(null);
    eventTimerRef.current = 0;
    localStorage.removeItem("phytolab-brief");
  };

  const launch = () => {
    localStorage.setItem("phytolab-brief-confirmed", JSON.stringify(sel));
    localStorage.setItem("phytolab-launched", "1");
    onLaunch(sel);
  };

  return (
    <div className="brief-app" data-screen-label="00 Brief Landing">
      {/* 상단 미니 타이틀바 */}
      <div className="brief-topbar">
        <div className="brief-topbar-left">
          <div className="logo-mark">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <circle cx="11" cy="11" r="10" stroke="currentColor" strokeWidth="1.2" opacity="0.35"/>
              <circle cx="11" cy="11" r="5.5" stroke="currentColor" strokeWidth="1.2"/>
              <circle cx="11" cy="11" r="1.8" fill="currentColor"/>
              <line x1="11" y1="0.5" x2="11" y2="4" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="11" y1="18" x2="11" y2="21.5" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="0.5" y1="11" x2="4" y2="11" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="18" y1="11" x2="21.5" y2="11" stroke="currentColor" strokeWidth="1.2"/>
            </svg>
          </div>
          <div className="brand">
            <div className="brand-name">PHYTOLAB<span className="brand-dot">.</span>AI</div>
            <div className="brand-sub">Product Design Agent · New Project</div>
          </div>
        </div>
        <div className="brief-topbar-crumb">
          <span className="mono brief-crumb-active">STAGE 00</span>
          <span className="brief-crumb-sep">·</span>
          <span className="mono brief-crumb-dim">01</span>
          <span className="brief-crumb-sep">·</span>
          <span className="mono brief-crumb-dim">02</span>
          <span className="brief-crumb-sep">·</span>
          <span className="mono brief-crumb-dim">03</span>
          <span className="brief-crumb-sep">·</span>
          <span className="mono brief-crumb-dim">04</span>
          <span className="brief-crumb-sep">·</span>
          <span className="mono brief-crumb-dim">05</span>
        </div>
        <div className="brief-topbar-right">
          <span className="pill pill-status"><span className="dot pulse"></span><span>TEAM READY · 5/5</span></span>
        </div>
      </div>

      {/* 헤드라인 */}
      <div className="brief-hero">
        <div className="brief-hero-eyebrow mono">STAGE 00 · PROJECT BRIEF</div>
        <h1 className="brief-hero-title">
          어떤 제품을 <span className="brief-hero-em">함께</span> 정의할까요?
        </h1>
        <BriefPresets onApply={applyPreset} current={presetId} />
      </div>

      {/* 본체: 좌측 축 카드 + 우측 Agent 스트림 */}
      <div className="brief-workspace">
        <div className="brief-axes-col">
          {window.BRIEF_AXES.map((ax, i) => (
            <AxisSection
              key={ax.id}
              axis={ax}
              selected={sel[ax.id]}
              onToggle={toggle}
              defaultOpen={i < 3}
            />
          ))}
        </div>

        <BriefAgentStream events={events} agents={activeAgents} />
      </div>

      {/* 하단 sticky 요약 */}
      <BriefSummary
        sel={sel}
        scores={scores}
        canStart={canStart}
        missingAxes={missingAxes}
        onStart={launch}
        onReset={reset}
      />
    </div>
  );
}

window.BriefLanding = BriefLanding;