/* Persona library — right rail. Saved personas + AI recommendations.
   Props:
     personas: [{ id, name, query, target, exposure, savedAt, result }]
     current: { query, target, exposure }
     onSave, onLoad, onDelete, onApplyRecommendation
*/

const { useState: useStatePL, useMemo: useMemoPL } = React;

function PersonaLibrary({ personas, current, onSave, onLoad, onDelete, onApplyRecommendation }) {
  const [tab, setTab] = useStatePL('saved');
  const [nameDraft, setNameDraft] = useStatePL('');

  const recos = useMemoPL(
    () => window.SimEngine.aiRecommend(current.query, window.TAXONOMY),
    [current.query]
  );

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div className="panel-head">
        <h3>페르소나 라이브러리<span className="tag">{personas.length} saved</span></h3>
      </div>
      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)' }}>
        {[
          { id: 'saved', label: '저장됨' },
          { id: 'ai',    label: 'AI 추천' },
          { id: 'compare', label: '비교' },
        ].map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className="rail-tab"
            aria-current={tab === t.id}
          >{t.label}</button>
        ))}
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {tab === 'saved' && (
          <SavedList
            personas={personas}
            onLoad={onLoad}
            onDelete={onDelete}
            nameDraft={nameDraft}
            setNameDraft={setNameDraft}
            onSave={() => { if (nameDraft.trim()) { onSave(nameDraft.trim()); setNameDraft(''); } }}
            current={current}
          />
        )}
        {tab === 'ai' && <AIRecos recos={recos} onApply={onApplyRecommendation} />}
        {tab === 'compare' && <ComparePane personas={personas} current={current} />}
      </div>

      <style>{`
        .rail-tab {
          flex: 1;
          background: none;
          border: none;
          border-right: 1px solid var(--border);
          color: var(--text-dim);
          padding: 8px;
          font-size: 11px;
          cursor: pointer;
          position: relative;
        }
        .rail-tab:last-child { border-right: none; }
        .rail-tab:hover { color: var(--text); background: var(--ink-200); }
        .rail-tab[aria-current="true"] { color: var(--text); background: var(--ink-200); }
        .rail-tab[aria-current="true"]::after {
          content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
          background: var(--signal);
        }
      `}</style>
    </div>
  );
}

function SavedList({ personas, onLoad, onDelete, nameDraft, setNameDraft, onSave, current }) {
  const hasQuery = current.query.some(g => g.leaves.length);
  return (
    <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {/* Save draft */}
      <div style={{ padding: 10, border: '1px solid var(--border-strong)', background: 'var(--ink-100)' }}>
        <div className="label" style={{ marginBottom: 6 }}>현재 설정 저장</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <input
            value={nameDraft}
            onChange={e => setNameDraft(e.target.value)}
            placeholder={hasQuery ? '페르소나 이름…' : '먼저 쿼리를 구성하세요'}
            disabled={!hasQuery}
            style={{
              flex: 1, background: 'var(--ink-200)', border: '1px solid var(--border)',
              color: 'var(--text)', padding: '5px 8px', fontSize: 11,
              fontFamily: 'var(--font-mono)', outline: 'none'
            }}
          />
          <button className="btn" data-variant="primary" disabled={!hasQuery || !nameDraft.trim()} onClick={onSave}>
            저장
          </button>
        </div>
      </div>

      {/* Saved cards */}
      {personas.length === 0 && (
        <div style={{ color: 'var(--text-mute)', fontSize: 11, padding: 10, textAlign: 'center' }}>
          저장된 페르소나 없음
        </div>
      )}
      {personas.map(p => (
        <div key={p.id} className="persona-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <strong style={{ fontSize: 12 }}>{p.name}</strong>
            <span className="mono mute" style={{ fontSize: 9 }}>
              {p.savedAt}
            </span>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-mute)', marginTop: 4 }}>
            {p.query.flatMap(g => g.leaves).length} leaves · {p.target.gender} · {p.target.ages.length}연령
          </div>
          {p.result && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 4, marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 9 }}>
              <Mini label="REACH"   val={window.SimEngine.fmtN(p.result.finalReach)} />
              <Mini label="CTR"     val={p.result.ctr + '%'} />
              <Mini label="VALID"   val={p.result.validity} tone={p.result.validity > 60 ? 'plant' : 'signal'} />
            </div>
          )}
          <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
            <button className="btn" data-size="sm" onClick={() => onLoad(p.id)} style={{ flex: 1, justifyContent: 'center' }}>로드</button>
            <button className="btn" data-variant="ghost" data-size="sm" onClick={() => onDelete(p.id)}>✕</button>
          </div>
          <style>{`
            .persona-card {
              padding: 10px;
              background: var(--ink-100);
              border: 1px solid var(--border);
            }
            .persona-card:hover { border-color: var(--border-strong); }
          `}</style>
        </div>
      ))}
    </div>
  );
}
function Mini({ label, val, tone }) {
  return (
    <div style={{ background: 'var(--ink-050)', padding: '4px 6px' }}>
      <div style={{ fontSize: 8, color: 'var(--text-mute)' }}>{label}</div>
      <div style={{ fontSize: 11, color: tone === 'plant' ? 'var(--plant)' : 'var(--signal)' }}>{val}</div>
    </div>
  );
}

function AIRecos({ recos, onApply }) {
  return (
    <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ fontSize: 10, color: 'var(--text-mute)', fontFamily: 'var(--font-mono)', padding: 4 }}>
        <span className="spin"></span>{' '}
        매트릭스 학습 결과 기반 자동 추천
      </div>
      {recos.map((r, i) => (
        <div key={i} className="reco-card">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <strong style={{ fontSize: 12 }}>{r.title}</strong>
            <span className="chip" data-tone="cyan">{r.op}</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>{r.rationale}</div>
          <div style={{ marginTop: 8 }}>
            {r.leaves.map((l, i) => (
              <div key={i} style={{
                fontFamily: 'var(--font-mono)', fontSize: 9,
                color: 'var(--text-dim)', padding: '1px 0',
              }}>
                · {window.SimEngine.shortLabel(l)}
              </div>
            ))}
          </div>
          <button className="btn" data-variant="primary" data-size="sm" onClick={() => onApply(r)} style={{ marginTop: 8, width: '100%', justifyContent: 'center' }}>
            적용 →
          </button>
          <style>{`
            .reco-card {
              padding: 10px;
              border: 1px solid var(--cyan);
              background: var(--cyan-soft);
            }
          `}</style>
        </div>
      ))}
    </div>
  );
}

function ComparePane({ personas, current }) {
  if (personas.length === 0) {
    return <div style={{ padding: 20, fontSize: 11, color: 'var(--text-mute)', textAlign: 'center' }}>
      저장된 페르소나 ≥ 1개 필요
    </div>;
  }
  const all = [
    { name: '★ 현재', result: window.SimEngine.evalQuery(current.query) },
    ...personas.map(p => ({ name: p.name, result: p.result }))
  ].filter(x => x.result);

  if (all.length < 2) {
    return <div style={{ padding: 20, fontSize: 11, color: 'var(--text-mute)', textAlign: 'center' }}>
      비교를 위해 쿼리를 먼저 구성하세요
    </div>;
  }

  // Find max-min for each metric to normalize bars
  const metrics = [
    { key: 'finalReach', label: 'REACH',     fmt: window.SimEngine.fmtN },
    { key: 'ctr',        label: 'CTR(%)',    fmt: v => v.toFixed(2) },
    { key: 'cpm',        label: 'eCPM(₩)',   fmt: v => v.toLocaleString() },
    { key: 'validity',   label: 'VALIDITY',  fmt: v => v },
    { key: 'compete',    label: '경쟁',      fmt: v => v },
  ];

  return (
    <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {metrics.map(m => {
        const vals = all.map(p => p.result[m.key] || 0);
        const max = Math.max(...vals);
        return (
          <div key={m.key}>
            <div className="label" style={{ marginBottom: 4 }}>{m.label}</div>
            {all.map((p, i) => (
              <div key={i} className="bar-row">
                <span className="l" style={{ fontSize: 10 }}>{p.name.slice(0, 10)}</span>
                <div className="bar"><div style={{ width: (vals[i]/max*100) + '%', background: i === 0 ? 'var(--signal)' : 'var(--cyan)' }} /></div>
                <span className="v">{m.fmt(vals[i])}</span>
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { PersonaLibrary: React.memo(PersonaLibrary) });