// screens/ba.jsx — B&A 3D 분석 / 시뮬레이션

function BAScreen({ persona, setRoute }) {
  const Icons = window.Icons;
  const [pos, setPos] = React.useState(50); // slider 0~100 (0=before, 100=after)
  const [view, setView] = React.useState("front");
  const [overlay, setOverlay] = React.useState("volume");

  const overlayOpts = [
    { v: "volume", l: "Volume" },
    { v: "lifting", l: "Lifting" },
    { v: "tighten", l: "Tightening" },
    { v: "texture", l: "Texture" },
  ];

  return (
    <div className="page fade-up">
      <div className="page-header">
        <div>
          <div className="page-eyebrow">06 · B&A 3D 분석 · 시뮬레이션</div>
          <h1 className="page-title">시술 전후 3D 변화량 비교 — Pore Control 패키지 시뮬레이션</h1>
          <p className="page-sub">
            시술 전(現) 이미지와 예상 결과를 3D 메쉬 기반으로 비교합니다. 부위별 volume·lifting·tightening 변화량이 정량 수치로 산출되어 상담·재방문 유도 자료로 활용됩니다.
          </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-primary" onClick={() => setRoute("chart")}>
            차트 자동 기록 <Icons.Arrow size={14} />
          </button>
        </div>
      </div>

      <div className="grid grid-12">
        {/* LEFT — Slider viewer */}
        <div className="col-8">
          <Card pad="md" style={{ background: "#0F0F11" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, color: "#FFF" }}>
              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                <span style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", letterSpacing: "0.05em", fontFamily: "var(--font-mono)" }}>3D MESH · 124K points</span>
              </div>
              <Tabs tabs={[{v:"front",l:"정면"},{v:"side",l:"측면"},{v:"3d",l:"3D Rotate"}]} value={view} onChange={setView} />
              <Tabs tabs={overlayOpts} value={overlay} onChange={setOverlay} />
            </div>

            {/* Comparison viewport */}
            <div style={{
              position: "relative", aspectRatio: "16/10", borderRadius: 12, overflow: "hidden",
              background: "#000",
            }}>
              {/* Before image */}
              <div style={{ position: "absolute", inset: 0 }}>
                <div className="skin-photo" style={{ position: "absolute", inset: 0, filter: "saturate(0.95)" }} />
                {overlay === "volume" && <HeatmapOverlay kind="pores" />}
                {overlay === "lifting" && <HeatmapOverlay kind="wrinkle" />}
                {overlay === "texture" && <HeatmapOverlay kind="sebum" />}
                {overlay === "tighten" && <HeatmapOverlay kind="redness" />}
              </div>

              {/* After image — masked */}
              <div style={{ position: "absolute", inset: 0, clipPath: `inset(0 0 0 ${pos}%)` }}>
                <div className="skin-photo" style={{ position: "absolute", inset: 0, filter: "saturate(1.05) brightness(1.05) contrast(1.03)" }} />
                {/* fewer heatmap markers for "after" */}
              </div>

              {/* Divider */}
              <div style={{ position: "absolute", top: 0, bottom: 0, left: `${pos}%`, width: 2, background: "#FFF", boxShadow: "0 0 12px rgba(0,0,0,0.5)" }}>
                <div style={{
                  position: "absolute", top: "50%", left: "50%",
                  transform: "translate(-50%, -50%)",
                  width: 36, height: 36, borderRadius: "50%",
                  background: "#FFF", display: "grid", placeItems: "center",
                  boxShadow: "0 6px 16px rgba(0,0,0,0.3)",
                }}>
                  <Icons.Compare size={16} stroke="var(--ink-1)" />
                </div>
              </div>

              {/* Labels */}
              <div style={{ position: "absolute", top: 16, left: 16, background: "rgba(0,0,0,0.6)", color: "#FFF", padding: "6px 11px", borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.05em" }}>
                BEFORE
              </div>
              <div style={{ position: "absolute", top: 16, right: 16, background: "rgba(255,255,255,0.95)", color: "var(--ink-1)", padding: "6px 11px", borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.05em" }}>
                AFTER (12주 시뮬레이션)
              </div>

              {/* Region annotations (only on "after" side) */}
              {pos < 80 && (
                <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
                  <div style={{ position: "absolute", top: "32%", left: "62%", color: "#FFF" }}>
                    <span style={{ fontSize: 10, color: "rgba(255,255,255,0.8)", fontFamily: "var(--font-mono)" }}>NOSE</span>
                    <div className="num" style={{ fontSize: 14, fontWeight: 700 }}>-32%</div>
                  </div>
                  <div style={{ position: "absolute", top: "55%", left: "75%", color: "#FFF" }}>
                    <span style={{ fontSize: 10, color: "rgba(255,255,255,0.8)", fontFamily: "var(--font-mono)" }}>R-CHEEK</span>
                    <div className="num" style={{ fontSize: 14, fontWeight: 700 }}>-24%</div>
                  </div>
                </div>
              )}
            </div>

            {/* Slider control */}
            <div style={{ marginTop: 18, padding: "8px 14px", display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ fontSize: 11, color: "rgba(255,255,255,0.6)", fontFamily: "var(--font-mono)" }}>BEFORE</span>
              <input type="range" min="0" max="100" value={pos}
                     onChange={e => setPos(parseInt(e.target.value))}
                     style={{ flex: 1, accentColor: "#FFF" }} />
              <span style={{ fontSize: 11, color: "rgba(255,255,255,0.6)", fontFamily: "var(--font-mono)" }}>AFTER</span>
            </div>

            {/* Timeline scrub */}
            <div style={{ marginTop: 8, padding: "10px 14px 4px", display: "flex", gap: 8 }}>
              {["W0", "W2", "W4", "W6", "W8", "W10", "W12"].map((w, i) => (
                <button key={w} style={{
                  flex: 1, padding: "6px 0", borderRadius: 8,
                  background: i === 6 ? "rgba(255,255,255,0.18)" : "transparent",
                  border: "1px solid rgba(255,255,255,0.12)",
                  color: "rgba(255,255,255,0.85)", fontSize: 11, fontFamily: "var(--font-mono)",
                }}>{w}</button>
              ))}
            </div>
          </Card>
        </div>

        {/* RIGHT — Metrics */}
        <div className="col-4" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Card pad="lg">
            <div className="card-title-row">
              <h3 className="card-title"><span className="dot"></span>예상 변화량 (12주차)</h3>
              <Pill tone="info">시뮬레이션</Pill>
            </div>
            {[
              { l: "코 모공 밀도", b: 128, a: 87, unit: "/cm²", target: "감소" },
              { l: "T존 광택 면적", b: 12.0, a: 7.4, unit: "%", target: "감소" },
              { l: "피부결 점수", b: 76, a: 84, unit: "/100", target: "증가" },
              { l: "탄력 지표 (cheek)", b: 80, a: 87, unit: "/100", target: "증가" },
              { l: "홍조 면적 비율", b: 15.0, a: 10.2, unit: "%", target: "감소" },
            ].map((m, i) => {
              const delta = ((m.a - m.b) / m.b) * 100;
              const goodDir = (m.target === "감소" && delta < 0) || (m.target === "증가" && delta > 0);
              return (
                <div key={i} style={{ padding: "12px 0", borderBottom: i < 4 ? "1px dashed var(--line-hair)" : "0" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <span style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 500 }}>{m.l}</span>
                    <span className={`num stat-delta ${goodDir ? "up" : "down"}`} style={{ fontSize: 13 }}>
                      {goodDir ? "▼" : "▲"} {Math.abs(delta).toFixed(1)}%
                    </span>
                  </div>
                  <div style={{ display: "flex", gap: 8, marginTop: 6, alignItems: "center" }}>
                    <div className="num" style={{ fontSize: 13, color: "var(--ink-4)" }}>{m.b}{m.unit}</div>
                    <Icons.Arrow size={11} stroke="var(--ink-4)" />
                    <div className="num" style={{ fontSize: 13, color: "var(--ink-1)", fontWeight: 600 }}>{m.a}{m.unit}</div>
                  </div>
                </div>
              );
            })}
          </Card>

          <Card pad="lg">
            <div className="card-title-row">
              <h3 className="card-title"><span className="dot"></span>예상 시술 일정</h3>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { w: "W0", date: "2026.06.04", tx: "Secret RF #1 · Peel #1", state: "예약확정" },
                { w: "W2", date: "2026.06.18", tx: "Peel #2", state: "예약대기" },
                { w: "W4", date: "2026.07.02", tx: "Secret RF #2 · Peel #3", state: "예약대기" },
                { w: "W7", date: "2026.07.23", tx: "Secret RF #3 · Peel #4", state: "예약대기" },
                { w: "W10", date: "2026.08.13", tx: "Secret RF #4 · B&A 측정", state: "예약대기" },
              ].map((s, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12 }}>
                  <span className="mono" style={{ width: 28, color: "var(--ink-4)" }}>{s.w}</span>
                  <span className="num" style={{ width: 80, color: "var(--ink-3)" }}>{s.date.slice(5)}</span>
                  <span style={{ flex: 1, color: "var(--ink-2)", fontWeight: 500 }}>{s.tx}</span>
                  <Pill tone={s.state === "예약확정" ? "good" : "outline"}>{s.state}</Pill>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.BAScreen = BAScreen;