// =====================================================================
// Detail panel — selected character (right-bottom)
// =====================================================================

function DetailPanel({ selectedCharData, focusPlayData, hoverChar, allThemes, themeFilter, onSetThemeFilter, plays, eraRange, activeGenres }) {
  // when no character selected, show play summary (or filter summary)
  const data = selectedCharData;

  // build face-paint paint card for the selected character
  function FaceCard({ ch }) {
    const role = ch.role;
    const c = roleColor(role);
    return (
      <div className="detail-face">
        <svg width="100%" height="100%" viewBox="0 0 140 100" preserveAspectRatio="xMidYMid slice">
          <rect width="140" height="100" fill="var(--ink-2)" />
          {/* proscenium archway */}
          <path d="M 10 90 L 10 35 Q 10 18 30 18 L 110 18 Q 130 18 130 35 L 130 90 Z" fill="var(--ink-3)" stroke="var(--ink-4)" />
          {/* face */}
          <ellipse cx="70" cy="55" rx="26" ry="32" fill={c} stroke="var(--ink)" strokeWidth="1" />
          {role === "jing" && (
            <>
              <path d="M 50 50 L 90 50" stroke="var(--paper)" strokeWidth="2.5" />
              <circle cx="58" cy="45" r="3.5" fill="var(--vermillion)" />
              <circle cx="82" cy="45" r="3.5" fill="var(--vermillion)" />
              <path d="M 56 70 Q 70 76 84 70" stroke="var(--paper)" strokeWidth="2" fill="none" />
              <path d="M 56 80 Q 70 84 84 80" stroke="var(--ink)" strokeWidth="2" fill="none" />
            </>
          )}
          {role === "dan" && (
            <>
              <circle cx="60" cy="56" r="3" fill="#c8341c" opacity="0.65" />
              <circle cx="80" cy="56" r="3" fill="#c8341c" opacity="0.65" />
              <path d="M 65 70 Q 70 73 75 70" stroke="#c8341c" strokeWidth="2" fill="none" />
              <path d="M 52 48 Q 58 44 64 48" stroke="var(--ink)" strokeWidth="1.2" fill="none" />
              <path d="M 76 48 Q 82 44 88 48" stroke="var(--ink)" strokeWidth="1.2" fill="none" />
            </>
          )}
          {role === "chou" && (
            <>
              <ellipse cx="70" cy="60" rx="11" ry="8" fill="var(--paper)" />
              <circle cx="63" cy="56" r="1.5" fill="var(--ink)" />
              <circle cx="77" cy="56" r="1.5" fill="var(--ink)" />
              <path d="M 65 67 Q 70 70 75 67" stroke="var(--ink)" strokeWidth="1.2" fill="none" />
            </>
          )}
          {role === "sheng" && (
            <>
              <circle cx="62" cy="52" r="1.6" fill="var(--ink)" />
              <circle cx="78" cy="52" r="1.6" fill="var(--ink)" />
              {ch.sub === "老生" && (
                <path d="M 55 80 Q 70 100 85 80" stroke="var(--paper)" strokeWidth="2" fill="rgba(240,230,214,0.18)" />
              )}
              <path d="M 65 64 Q 70 67 75 64" stroke="var(--ink)" strokeWidth="1.2" fill="none" />
            </>
          )}
          {/* corner cartouche */}
          <rect x="6" y="6" width="36" height="10" fill="var(--vermillion)" />
          <text x="24" y="14" fontSize="7" textAnchor="middle" fill="var(--paper)" fontFamily="var(--f-mono)" style={{ letterSpacing:"0.2em" }}>
            {ch.playId.toUpperCase()}
          </text>
        </svg>
      </div>
    );
  }

  return (
    <div className="panel">
      <div className="panel-head">
        <div className="panel-title"><span className="num">06</span>人 物 详 情</div>
        <div className="panel-meta">{data ? `${roleLabel(data.role)} · ${data.sub}` : "HOVER · CLICK"}</div>
      </div>
      <div className="panel-body" style={{ overflowY:"auto" }}>
        {!data && (
          <div className="detail-empty">
            <div style={{ fontFamily:"var(--f-display)", fontSize:18, color:"var(--paper)", marginBottom:8, letterSpacing:"0.15em" }}>
              选 一 出 戏 · 点 一 个 人
            </div>
            点击左侧剧目以聚焦视图，<br/>
            或在网络中点击人物锁定。
            <div className="hint">
              ── 五 视 图 联 动 ──<br/>
              ① 剧目 · ② 行当 · ③ 关系网络 ·<br/>
              ④ 叙事弧线 · ⑤ 主题构成
            </div>

            {/* filter summary */}
            <div style={{ marginTop:18, paddingTop:14, borderTop:"1px dashed var(--ink-4)" }}>
              <div className="detail-section-label">当 前 筛 选</div>
              <div style={{ fontSize:11, lineHeight:1.7 }}>
                类型 ：{[...activeGenres].map(g => genreLabel(g)).join(" · ") || "—"}<br/>
                年代 ：{eraRange[0]}–{eraRange[1]}<br/>
                剧目 ：<span style={{ color:"var(--gold)" }}>{plays.length}</span> 出<br/>
                主题 ：{themeFilter ? <span style={{ color:"var(--vermillion-2)" }}>{allThemes.find(t=>t.id===themeFilter)?.name}</span> : "—"}
              </div>
            </div>

            {/* aggregate insights */}
            <div style={{ marginTop:18, paddingTop:14, borderTop:"1px dashed var(--ink-4)" }}>
              <div className="detail-section-label">交 叉 发 现</div>
              <div style={{ fontSize:11, lineHeight:1.7, color:"var(--paper)" }}>
                · <span style={{ color:"var(--vermillion-2)" }}>历史戏</span>叙事多呈
                  <span style={{ color:"var(--gold)" }}>双峰结构</span>（议事→决战），
                  主由<span style={{ color:"var(--gold)" }}>生·净</span>承载。<br/>
                · <span style={{ color:"var(--gold)" }}>家庭戏</span>张力
                  <span style={{ color:"var(--gold)" }}>渐升至四折</span>，
                  <span style={{ color:"#e8c4b8" }}>旦</span>角主载亲情·悲离。<br/>
                · <span style={{ color:"var(--jade)" }}>公案戏</span>呈
                  <span style={{ color:"var(--gold)" }}>三段递进</span>（冤→诉→判），
                  净角 (包公·刘瑾) 承担<span style={{ color:"var(--jade)" }}>清正</span>动机。
              </div>
            </div>
          </div>
        )}

        {data && (
          <div className="detail-card">
            <FaceCard ch={data} />
            <div className="detail-name">{data.name}</div>
            <div>
              <span className="detail-role-badge">{roleLabel(data.role)} · {data.sub}</span>
            </div>
            <dl className="detail-attrs">
              <dt>剧目</dt><dd>{data.playTitle || (focusPlayData && focusPlayData.title)}</dd>
              <dt>身份</dt><dd>{data.identity}</dd>
              <dt>性别</dt><dd>{data.gender}</dd>
              <dt>年龄</dt><dd>{data.age}</dd>
              <dt>性格</dt><dd>{(data.traits||[]).join(" · ")}</dd>
            </dl>

            <div className="detail-section-label">主 题 承 载</div>
            <div className="theme-pill-row">
              {(data.themes||[]).length === 0 && <span style={{ fontSize:11, color:"var(--paper-dim)" }}>—</span>}
              {(data.themes||[]).map(tid => {
                const t = allThemes.find(x => x.id === tid);
                if (!t) return null;
                const sel = themeFilter === tid;
                return (
                  <span key={tid}
                        className={"theme-pill" + (sel ? " on" : "")}
                        style={!sel ? { color: t.color, borderColor: "rgba(212,162,76,0.25)" } : {}}
                        onClick={() => onSetThemeFilter(sel ? null : tid)}
                  >{t.name}</span>
                );
              })}
            </div>

            <div className="detail-section-label">出 场 时 序</div>
            <PresenceStrip presence={data.presence || []} acts={(focusPlayData && focusPlayData.acts) || []} />
          </div>
        )}
      </div>
    </div>
  );
}

function PresenceStrip({ presence, acts }) {
  const n = presence.length || 0;
  if (!n) return <div style={{ fontSize:11, color:"var(--paper-dim)" }}>—</div>;
  const cellW = 100 / n;
  return (
    <div>
      <div style={{ display:"flex", height: 18, border:"1px solid var(--ink-4)" }}>
        {presence.map((v, i) => (
          <div key={i} style={{
            flex:1,
            background: v ? "var(--gold)" : "var(--ink-2)",
            opacity: v ? 0.85 : 1,
            borderRight: i < n - 1 ? "1px solid var(--ink)" : "none",
          }}/>
        ))}
      </div>
      <div style={{ display:"flex", marginTop:4 }}>
        {acts.map((a, i) => (
          <div key={i} style={{
            flex:1,
            fontFamily:"var(--f-serif)", fontSize:9,
            color: presence[i] ? "var(--paper)" : "var(--paper-dim)",
            textAlign:"center", letterSpacing:"0.04em",
          }}>{a}</div>
        ))}
      </div>
    </div>
  );
}

window.DetailPanel = DetailPanel;
