/* S9 ダッシュボード */
function DashboardScreen({ nav }) {
  const { DASH } = window.SV_DATA;
  const { Card, Note, Pill } = window.SV_UI;
  const Icons = window.SV_Icons;
  const maxF = Math.max(...DASH.funnel.map((f) => f.value));

  const Metric = ({ m, big }) => (
    <Card pad={big ? 22 : 18} style={{ flex: 1 }}>
      <div style={{ fontSize: 12.5, color: "var(--ink-2)", fontWeight: 600 }}>{m.label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 5, marginTop: 10 }}>
        <span className="num" style={{ fontSize: big ? 38 : 28, fontWeight: 700, color: "var(--ink)", lineHeight: 1 }}>{m.value}</span>
        {m.unit && <span className="num" style={{ fontSize: big ? 16 : 14, fontWeight: 700, color: "var(--ink-2)" }}>{m.unit}</span>}
        {m.trend && <span style={{ marginLeft: "auto", fontSize: 12, fontWeight: 700, color: "var(--fit)", background: "var(--fit-bg)", borderRadius: 999, padding: "3px 9px" }}>↑ {m.trend}</span>}
      </div>
      {m.sub && <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 8 }}>{m.sub}</div>}
    </Card>
  );

  return (
    <div>
      <div style={{ marginBottom: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--brand-600)", fontSize: 12.5, fontWeight: 700, marginBottom: 7 }}><Icons.dash size={15} />ダッシュボード</div>
        <h1 className="disp" style={{ fontSize: 23, fontWeight: 800 }}>実習成立・再訪・内定転換の手応え</h1>
      </div>

      {/* 主指標 */}
      <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", marginBottom: 10 }}>主成果</div>
      <div style={{ display: "flex", gap: 16, marginBottom: 24 }}>
        {DASH.primary.map((m, i) => <Metric key={i} m={m} big />)}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20, alignItems: "start" }}>
        {/* ファネル */}
        <Card pad={22}>
          <h3 className="disp" style={{ fontSize: 16, fontWeight: 700, marginBottom: 4 }}>実習→内定 ファネル</h3>
          <p style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 18 }}>各段の転換が手応えの指標。落ちやすい段を見つけて手を打てます。</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
            {DASH.funnel.map((f, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 78, fontSize: 12, color: "var(--ink-2)", fontWeight: 600, textAlign: "right", flexShrink: 0 }}>{f.stage}</div>
                <div style={{ flex: 1, height: 30, background: "var(--surface-3)", borderRadius: 8, overflow: "hidden", position: "relative" }}>
                  <div style={{ width: `${(f.value / maxF) * 100}%`, height: "100%", background: `linear-gradient(90deg,var(--brand-600),var(--brand-400))`, borderRadius: 8, transition: "width .6s cubic-bezier(.2,.7,.3,1)", display: "flex", alignItems: "center", justifyContent: "flex-end", paddingRight: 10 }}>
                    <span className="num" style={{ fontSize: 12, fontWeight: 700, color: "#fff" }}>{f.value}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* 先行指標 */}
          <Card pad={20}>
            <h3 className="disp" style={{ fontSize: 15, fontWeight: 700, marginBottom: 14 }}>先行指標</h3>
            <div style={{ display: "flex", gap: 12 }}>
              {DASH.lead.map((m, i) => (
                <div key={i} style={{ flex: 1, padding: "13px", background: "var(--surface-2)", borderRadius: 12, border: "1px solid var(--border)" }}>
                  <div className="num" style={{ fontSize: 24, fontWeight: 700, color: "var(--brand-700)" }}>{m.value}<span style={{ fontSize: 13 }}>{m.unit}</span></div>
                  <div style={{ fontSize: 11, color: "var(--ink-2)", marginTop: 5, lineHeight: 1.4 }}>{m.label}</div>
                </div>
              ))}
            </div>
          </Card>

          {/* 選考タスクの停滞 */}
          <Card pad={20}>
            <h3 className="disp" style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>選考タスクの進捗・停滞</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {DASH.stalled.map((s, i) => (
                <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <span style={{ color: s.level === "warn" ? "var(--consult)" : "var(--ink-3)", flexShrink: 0, marginTop: 1 }}>{s.level === "warn" ? <Icons.consult size={17} /> : <Icons.clock size={17} />}</span>
                  <div>
                    <div style={{ fontSize: 12.5, fontWeight: 700 }}>{s.name}</div>
                    <div style={{ fontSize: 11.5, color: "var(--ink-2)", marginTop: 2, lineHeight: 1.5 }}>{s.note}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>

      {/* バニティ */}
      <div style={{ marginTop: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)" }}>活動量</span>
        </div>
        <div style={{ display: "flex", gap: 16 }}>
          {DASH.vanity.map((m, i) => (
            <div key={i} style={{ flex: 1, display: "flex", alignItems: "baseline", gap: 8, padding: "14px 18px", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 12 }}>
              <span className="num" style={{ fontSize: 22, fontWeight: 700, color: "var(--ink-2)" }}>{m.value}</span>
              <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{m.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.SV_Dashboard = DashboardScreen;
