/* S4 学生詳細（説得の中心）＋ S4-b スカウト下書きモーダル */
const { useState } = React;

function DetailScreen({ nav, id, onScout }) {
  const { studentById, FIT_KEYS, HOSPITAL } = window.SV_DATA;
  const { Avatar, Stars, FitBadge, TypeChip, Activity, Button, Card, Note } = window.SV_UI;
  const Icons = window.SV_Icons;
  const s = studentById(id) || window.SV_DATA.STUDENTS[0];

  const Row = ({ children, label }) => (
    <div style={{ display: "flex", gap: 14, padding: "13px 0", borderBottom: "1px solid var(--border)" }}>
      <div style={{ width: 132, flexShrink: 0, fontSize: 13, fontWeight: 700, color: "var(--ink-2)" }}>{label}</div>
      <div style={{ flex: 1, fontSize: 13.5, lineHeight: 1.7, color: "var(--ink)" }}>{children}</div>
    </div>
  );

  const fitDetailRow = (k) => {
    const [val, detail] = s.fitBreakdown[k];
    return (
      <div key={k} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 0", borderBottom: "1px solid var(--border)" }}>
        <div style={{ width: 104, flexShrink: 0, fontSize: 13, color: "var(--ink-2)", fontWeight: 600 }}>{k}</div>
        <FitBadge value={val} size="sm" />
        <div style={{ flex: 1, fontSize: 12.5, color: "var(--ink-2)", textAlign: "right" }}>{detail}</div>
      </div>
    );
  };

  return (
    <div style={{ paddingBottom: 80 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 24, alignItems: "start" }}>
        {/* 左：本文 */}
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {/* ヘッダー */}
          <Card pad={24} className="fade-up">
            <div style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
              <Avatar s={s} size={76} ring />
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 11, flexWrap: "wrap" }}>
                  <h1 className="disp" style={{ fontSize: 24, fontWeight: 800, whiteSpace: "nowrap" }}>{s.name}</h1>
                  <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{s.kana}</span>
                  <FitBadge value={s.fit} />
                </div>
                <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 10, fontSize: 13, color: "var(--ink-2)" }}>
                  <span><b style={{ color: "var(--ink)" }}>{s.role}・{s.year}</b></span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icons.clock size={14} />就業可能 <b className="num" style={{ color: "var(--ink)" }}>{s.available}</b></span>
                </div>
                <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 7, fontSize: 13, color: "var(--ink-2)" }}>
                  <span>学校：{s.school}</span>
                  {s.lab !== "—" && <span>研究室：{s.lab}</span>}
                </div>
                <div style={{ marginTop: 11 }}><Activity level={s.activityLevel} text={s.activity} /></div>
              </div>
            </div>
          </Card>

          {/* 条件適合 */}
          <Card pad={22} className="fade-up" style={{ animationDelay: "60ms" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ color: "var(--fit)" }}><Icons.checkCircle size={20} /></span>
                <h2 className="disp" style={{ fontSize: 17, fontWeight: 700 }}>条件適合</h2>
              </div>
              <span style={{ fontSize: 13, fontWeight: 700, color: s.fit === "適合" ? "var(--fit)" : "var(--consult)" }}>
                御院の条件に「{s.fit}」
              </span>
            </div>
            <div style={{ marginTop: 8 }}>{FIT_KEYS.map(fitDetailRow)}</div>
          </Card>

          {/* タイプ傾向 */}
          <Card pad={22} className="fade-up" style={{ animationDelay: "120ms" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
              <span style={{ color: "var(--brand-500)" }}><Icons.sparkle size={20} /></span>
              <h2 className="disp" style={{ fontSize: 17, fontWeight: 700 }}>タイプ傾向</h2>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap", padding: "14px 16px", background: "var(--brand-50)", borderRadius: "var(--r-md)", border: "1px solid var(--brand-100)" }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <Stars value={s.stars} size={22} />
                <span style={{ fontSize: 12, color: "var(--ink-2)" }}>おすすめ度（働き方が合いそう）</span>
              </div>
              <div style={{ width: 1, alignSelf: "stretch", background: "var(--brand-100)" }} />
              <div>
                <TypeChip code={s.type} />
                <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 7 }}>{s.typeLabel}</div>
              </div>
            </div>
            <div style={{ marginTop: 12, fontSize: 13.5, lineHeight: 1.7, color: "var(--ink)" }}>
              「{HOSPITAL.nameHonorific}に伺った方針（{HOSPITAL.needs.join('・')}）と噛み合いそうです（タイプ：{s.type}）」
            </div>
          </Card>

          {/* 性格・強み / 診療スタイル / 育成ヒント */}
          <Card pad={22} className="fade-up" style={{ animationDelay: "180ms" }}>
            <h2 className="disp" style={{ fontSize: 17, fontWeight: 700, marginBottom: 4 }}>人物・育成ヒント</h2>
            <Row label="性格・強み">
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {s.strengths.map((x) => <span key={x} style={{ fontSize: 12.5, fontWeight: 600, color: "var(--brand-700)", background: "var(--brand-50)", border: "1px solid var(--brand-100)", borderRadius: 999, padding: "5px 11px" }}>{x}</span>)}
              </div>
            </Row>
            <Row label="向いている診療スタイル">{s.style}</Row>
            <div style={{ display: "flex", gap: 14, padding: "16px", marginTop: 10, background: "var(--surface-3)", borderRadius: "var(--r-md)" }}>
              <span style={{ color: "var(--brand-500)", flexShrink: 0 }}><Icons.heart size={20} /></span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--brand-800)", marginBottom: 5 }}>育成のヒント</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.75, color: "var(--ink)" }}>{s.growth}</div>
              </div>
            </div>
          </Card>

          {/* 就職条件 */}
          <Card pad={22} className="fade-up" style={{ animationDelay: "240ms" }}>
            <h2 className="disp" style={{ fontSize: 17, fontWeight: 700, marginBottom: 6 }}>就職条件</h2>
            <div style={{ fontSize: 13.5, lineHeight: 1.8, color: "var(--ink)" }}>{s.conditions}</div>
          </Card>
        </div>

        {/* 右：サマリ＆アクション（sticky） */}
        <div style={{ position: "sticky", top: 22, display: "flex", flexDirection: "column", gap: 16 }}>
          <Card pad={20} className="fade-up" style={{ animationDelay: "80ms" }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--brand-600)", display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }}>
              <Icons.sparkle size={15} /> 声をかける理由
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.75, color: "var(--ink)" }}>{s.reason}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 9, marginTop: 18 }}>
              <Button variant="primary" size="lg" icon={Icons.send} full onClick={() => onScout(s.id)}>スカウトする</Button>
              <Button variant="ghost" size="lg" icon={Icons.chat} full onClick={() => nav.go("messages", s.id)}>メッセージ</Button>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border)", fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.6, textAlign: "center" }}>
              スカウトは1人ずつ選び抜いて。文面に「なぜあなたを」を必ず含めます。
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* S4-b スカウト下書きモーダル */
function ScoutModal({ id, onClose, nav }) {
  const { studentById, HOSPITAL } = window.SV_DATA;
  const { Avatar, Button, Modal, Note, TypeChip } = window.SV_UI;
  const Icons = window.SV_Icons;
  const s = id ? studentById(id) : null;

  const buildDraft = (st) =>
    `${st.name.split(" ")[0]}さん、はじめまして。${HOSPITAL.name}の採用担当です。\n\n${st.reasonShort || st.reason}\n\n当院は担当医制とエビデンスを軸に、犬猫の先端医療に力を入れています。まずは1day病院実習で、実際の診療を見てお話しできたら嬉しいです。ご検討よろしくお願いします。`;

  const [draft, setDraft] = useState("");
  const [sent, setSent] = useState(false);
  React.useEffect(() => { if (s) { setDraft(buildDraft(s)); setSent(false); } }, [id]);
  if (!s) return null;

  const handleSend = () => {
    setSent(true);
    setTimeout(() => { onClose(); nav.go("messages", s.id); }, 950);
  };

  return (
    <Modal open={!!id} onClose={onClose} width={620}>
      {/* ヘッダー */}
      <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 13 }}>
        <Avatar s={s} size={46} />
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <h2 className="disp" style={{ fontSize: 18, fontWeight: 700 }}>スカウトを送る</h2>
          </div>
          <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 3 }}>{s.name}（{s.role}・{s.year}）へ</div>
        </div>
        <button onClick={onClose} style={{ color: "var(--ink-3)", padding: 6 }}><Icons.x size={20} /></button>
      </div>

      <div style={{ padding: 24 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 700, color: "var(--brand-600)" }}>
            <Icons.sparkle size={15} /> SolaVet が下書きを自動生成しました
          </div>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>今期のスカウト枠 残り <b className="num" style={{ color: "var(--ink)" }}>3 / 5</b></span>
        </div>

        {/* 「なぜあなたを」ハイライト */}
        <div style={{ display: "flex", gap: 9, alignItems: "flex-start", background: "var(--brand-50)", border: "1px solid var(--brand-100)", borderRadius: "var(--r-md)", padding: "11px 13px", marginBottom: 12 }}>
          <span style={{ color: "var(--brand-500)", flexShrink: 0, marginTop: 1 }}><Icons.check size={16} /></span>
          <div style={{ fontSize: 12.5, lineHeight: 1.6, color: "var(--brand-800)" }}>
            <b>「なぜあなたを」</b>を必ず含めています：<br />{s.reason}
          </div>
        </div>

        <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", display: "block", marginBottom: 7 }}>下書き（一言だけ手を入れて送信）</label>
        <textarea value={draft} onChange={(e) => setDraft(e.target.value)} rows={9}
          style={{ width: "100%", padding: "13px 15px", borderRadius: 12, border: "1px solid var(--border-strong)", fontSize: 13.5, lineHeight: 1.75, color: "var(--ink)", resize: "vertical", fontFamily: "var(--sans)", background: "var(--surface)" }} />
      </div>

      <div style={{ padding: "16px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: 10, justifyContent: "flex-end", background: "var(--surface-2)" }}>
        <Button variant="plain" onClick={onClose}>キャンセル</Button>
        <Button variant={sent ? "subtle" : "primary"} icon={sent ? Icons.check : Icons.send} onClick={handleSend} disabled={sent}>
          {sent ? "送信しました" : "スカウトを送信"}
        </Button>
      </div>
    </Modal>
  );
}

window.SV_Detail = DetailScreen;
window.SV_ScoutModal = ScoutModal;
