// screens/report.jsx — 세부 지표 리포트 (본인 vs. 일반 기준 비교)

function ReportScreen({ persona, setRoute }) {
  const Icons = window.Icons;
  const categories = ["모공", "유분/피지광", "주름/탄력", "홍조/염증", "색소", "피부결"];
  const [active, setActive] = React.useState("모공");

  const rows = (persona.indicators[active] && persona.indicators[active].length)
    ? persona.indicators[active]
    : PERSONAS.jihye.indicators[active] || [];

  const verdictCount = {
    good: rows.filter(r => r.verdict === "good").length,
    watch: rows.filter(r => r.verdict === "watch").length,
    alert: rows.filter(r => r.verdict === "alert").length,
  };

  return (
    <div className="page fade-up">
      <div className="page-header">
        <div>
          <div className="page-eyebrow">04 · 세부 지표 리포트</div>
          <h1 className="page-title">정밀 지표 — 본인 추정치 vs. 일반 기준</h1>
          <p className="page-sub">
            촬영된 이미지에서 추출한 47개 정량 지표 중 카테고리별 핵심 지표입니다. 동일 연령대(±3세) 일반 기준과 비교하여 의사가 시술 결정 시 활용합니다.
          </p>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-soft btn-sm"><Icons.Download size={13} /> PDF 내보내기</button>
          <button className="btn btn-soft btn-sm"><Icons.Send size={13} /> 환자에게 전송</button>
          <button className="btn btn-primary" onClick={() => setRoute("recommend")}>
            시술 추천으로 <Icons.Arrow size={14} />
          </button>
        </div>
      </div>

      {/* Category tabs */}
      <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
        {categories.map(c => {
          const score = persona.skinScores[c] || persona.skinScores[c.split("/")[0]] || 75;
          const isActive = c === active;
          return (
            <button key={c}
                    className="card"
                    style={{
                      padding: "10px 16px",
                      background: isActive ? "var(--ink-1)" : "var(--bg-surface)",
                      color: isActive ? "#FFF" : "var(--ink-2)",
                      border: `1px solid ${isActive ? "var(--ink-1)" : "var(--line-hair)"}`,
                      cursor: "pointer", textAlign: "left",
                    }}
                    onClick={() => setActive(c)}>
              <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>{c}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 3 }}>
                <span className="num" style={{ fontSize: 18, fontWeight: 600 }}>{score}</span>
                <span style={{ fontSize: 11, opacity: 0.6 }}>/100</span>
              </div>
            </button>
          );
        })}
      </div>

      <div className="grid grid-12">
        {/* LEFT — Comparison table */}
        <div className="col-8">
          <Card pad="lg">
            <div className="card-title-row">
              <div>
                <h3 className="card-title" style={{ marginBottom: 6 }}><span className="dot"></span>{active}</h3>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)" }}>
                  카테고리 점수 <span className="num" style={{ color: "var(--ink-1)", fontWeight: 600 }}>{persona.skinScores[active] || persona.skinScores[active.split("/")[0]] || 75}/100</span>
                  &nbsp;·&nbsp; {rows.length}개 지표 측정
                </div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <Pill tone="good">양호 {verdictCount.good}</Pill>
                <Pill tone="watch">관찰 {verdictCount.watch}</Pill>
                <Pill tone="alert">주의 {verdictCount.alert}</Pill>
              </div>
            </div>

            <div className="cmp-row" style={{ borderBottom: "1px solid var(--line-hair)", padding: "6px 0" }}>
              <span style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 600 }}>지표</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 600 }}>본인 추정치</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 600 }}>일반 기준</span>
              <span style={{ textAlign: "right", fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: 600 }}>판정</span>
            </div>
            {rows.map((r, i) => (
              <div key={i} className="cmp-row fade-up" style={{ animationDelay: `${i * 30}ms` }}>
                <span className="lbl">{r.k}</span>
                <span className="val num">{r.you}</span>
                <span className="base num">{r.base}</span>
                <span className="verdict"><VerdictPill verdict={r.verdict} note={r.note} /></span>
              </div>
            ))}
          </Card>

          {/* Doctor notes */}
          <Card pad="lg" style={{ marginTop: 16 }}>
            <div className="card-title-row">
              <h3 className="card-title"><span className="dot"></span>의사 소견 · AI 임상 요약</h3>
              <Pill tone="info"><Icons.Sparkle size={11} /> GPT 의학 모델</Pill>
            </div>
            <div style={{
              padding: "16px 18px", borderRadius: 12,
              background: "var(--bg-subtle)",
              fontSize: 13.5, lineHeight: 1.65, color: "var(--ink-2)",
            }}>
              환자분의 <strong>{active}</strong> 영역은 동일 연령대 일반 기준 대비 전반적으로 <strong>관찰·주의 구간</strong>에 위치합니다.
              특히 T존 광택 면적이 일반 기준의 약 2배 수준이며, 코·볼 모공 밀도도 15-30% 높아 <strong>피지 분비 과활성과 모공 입구 콜라겐 약화</strong>가 복합적으로 작용한 패턴으로 추정됩니다.
              현재 단계에서는 <strong>비파괴적 진피층 자극(RF Micro-needling)</strong>과 <strong>피지선 조절 fractional</strong> 조합이 가장 안정적인 결과를 기대할 수 있습니다.
              염증성 여드름·홍조가 동반되므로 강한 ablative 시술은 PIH 리스크가 있어 권장하지 않습니다.
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 14, alignItems: "center" }}>
              <button className="btn btn-soft btn-sm"><Icons.Edit size={12} /> 의사 코멘트 편집</button>
              <button className="btn btn-ghost btn-sm"><Icons.Sparkle size={12} /> 재생성</button>
              <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-4)" }}>마지막 업데이트 12초 전 · 의료기기 SW 규제 검토 대기</span>
            </div>
          </Card>
        </div>

        {/* RIGHT — Severity & evidence */}
        <div className="col-4" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card pad="lg">
            <div className="stat-label">현재 카테고리 정량 진단</div>
            <div style={{ marginTop: 14, display: "grid", placeItems: "center" }}>
              <Donut value={persona.skinScores[active] || 67} max={100} size={140} stroke={12}
                     color={persona.skinScores[active] >= 80 ? "var(--good)" : persona.skinScores[active] >= 65 ? "var(--watch)" : "var(--alert)"}
                     label={active} subtitle={`기준 ${BASELINE_SCORES[active] || 74}`} />
            </div>
            <div className="divider" />
            <Stat mini label="유사 환자 cohort" value="142명" sub="±3세 · 동일 피부타입 · 6개월 추적" />
          </Card>

          <Card pad="md">
            <div className="card-title-row">
              <h3 className="card-title"><span className="dot"></span>측정 영역</h3>
            </div>
            <div style={{ position: "relative", aspectRatio: "1/1", borderRadius: 12, background: "#1D1D1F", overflow: "hidden", marginBottom: 12 }}>
              <div className="skin-photo" style={{ position: "absolute", inset: 0 }} />
              {/* Region outlines */}
              <svg viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", mixBlendMode: "screen" }}>
                <ellipse cx="50" cy="50" rx="6" ry="8" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="0.4" />
                <ellipse cx="34" cy="58" rx="9" ry="10" fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="0.3" strokeDasharray="1 1" />
                <ellipse cx="66" cy="58" rx="9" ry="10" fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="0.3" strokeDasharray="1 1" />
                <text x="50" y="40" textAnchor="middle" fill="#FFF" fontSize="3" fontFamily="var(--font-mono)">NOSE</text>
                <text x="34" y="76" textAnchor="middle" fill="#FFF" fontSize="3" fontFamily="var(--font-mono)">L-CHEEK</text>
                <text x="66" y="76" textAnchor="middle" fill="#FFF" fontSize="3" fontFamily="var(--font-mono)">R-CHEEK</text>
              </svg>
            </div>
            <div className="stat-label">측정 영역별 평균 (밀도/cm²)</div>
            <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 10 }}>
              <ScoreBar label="코" value={62} tone="alert" />
              <ScoreBar label="좌볼" value={48} tone="watch" />
              <ScoreBar label="우볼" value={52} tone="watch" />
              <ScoreBar label="이마" value={28} tone="good" />
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.ReportScreen = ReportScreen;