/* S7 実習・サポートパイプライン管理 */
const { useState } = React;

function PipelineScreen({ nav }) {
  const { PIPELINE_STAGES, PIPELINE, STUDENTS, studentById, SUPPORT_DETAIL, REAPPROACH } = window.SV_DATA;
  const { Avatar, Button, Card, Note, Pill, FitBadge } = window.SV_UI;
  const Icons = window.SV_Icons;

  const [supportSel, setSupportSel] = useState("sato");
  const byStage = (k) => Object.keys(PIPELINE).filter((id) => PIPELINE[id].stage === k);
  const STAGE_TONE = {
    candidate: "var(--ink-3)", scouted: "var(--brand-400)", talking: "var(--brand-500)",
    booked: "var(--brand-600)", done: "var(--fit)", mutual: "var(--brand-700)",
    support: "var(--brand-800)", offer: "var(--star)",
  };

  const MiniCard = ({ id }) => {
    const s = studentById(id);
    return (
      <button onClick={() => nav.go("detail", id)} style={{ display: "flex", gap: 9, alignItems: "center", width: "100%", textAlign: "left", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 11, padding: "9px 10px", boxShadow: "var(--shadow-sm)", transition: "border-color .15s, transform .15s" }}
        onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.transform = "translateY(-1px)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.transform = "none"; }}>
        <Avatar s={s} size={34} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="disp" style={{ fontSize: 12.5, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name}</div>
          <div style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{s.role.replace("学生", "")}・{s.year}</div>
        </div>
      </button>
    );
  };

  const sup = SUPPORT_DETAIL[supportSel];
  const supStudent = studentById(supportSel);
  const TASK_STATE = {
    done: { c: "var(--fit)", bg: "var(--fit-bg)", label: "完了", icon: Icons.checkCircle },
    hospital: { c: "var(--consult)", bg: "var(--consult-bg)", label: "病院が確認中", icon: Icons.clock },
    todo: { c: "var(--ink-3)", bg: "var(--surface-3)", label: "未着手", icon: Icons.dot },
  };

  return (
    <div>
      <div style={{ marginBottom: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--brand-600)", fontSize: 12.5, fontWeight: 700, marginBottom: 7 }}><Icons.pipeline size={15} />実習・サポートパイプライン</div>
        <h1 className="disp" style={{ fontSize: 23, fontWeight: 800 }}>候補〜内定までを一望</h1>
      </div>

      {/* かんばん */}
      <div style={{ display: "grid", gridAutoFlow: "column", gridAutoColumns: "minmax(168px,1fr)", gap: 12, overflowX: "auto", paddingBottom: 10, marginBottom: 26 }}>
        {PIPELINE_STAGES.map((st) => {
          const ids = byStage(st.key);
          return (
            <div key={st.key} style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 14, padding: 11, display: "flex", flexDirection: "column", minHeight: 130 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 4 }}>
                <span style={{ width: 8, height: 8, borderRadius: 3, background: STAGE_TONE[st.key] }} />
                <span className="disp" style={{ fontSize: 12.5, fontWeight: 700 }}>{st.label}</span>
                <span className="num" style={{ fontSize: 11, color: "var(--ink-3)", marginLeft: "auto" }}>{ids.length}</span>
              </div>
              <div style={{ fontSize: 10, color: "var(--ink-3)", marginBottom: 9, lineHeight: 1.4 }}>{st.desc}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                {ids.map((id) => <MiniCard key={id} id={id} />)}
                {st.key === "offer" && ids.length === 0 && <div style={{ fontSize: 10.5, color: "var(--ink-3)", textAlign: "center", padding: "10px 0", border: "1px dashed var(--border-strong)", borderRadius: 9 }}>記録待ち</div>}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 20, alignItems: "start" }}>
        {/* 選考サポート中 詳細 */}
        <Card pad={22}>
          <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 16 }}>
            <Avatar s={supStudent} size={44} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                <h2 className="disp" style={{ fontSize: 17, fontWeight: 700, whiteSpace: "nowrap" }}>{supStudent.name}</h2>
                <Pill bg="var(--brand-50)" color="var(--brand-800)">選考サポート中</Pill>
              </div>
            </div>
            <Button variant="ghost" size="sm" icon={Icons.chat} onClick={() => nav.go("messages", supportSel)}>チャット</Button>
          </div>

          {/* タスク進捗 */}
          <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", marginBottom: 10 }}>タスクの進捗</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {sup.tasks.map((t, i) => {
              const ts = TASK_STATE[t.state];
              const Ic = ts.icon;
              return (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", borderRadius: 11, background: t.state === "hospital" ? "var(--consult-bg)" : "var(--surface-2)", border: t.state === "hospital" ? "1px solid #EAD9B4" : "1px solid var(--border)" }}>
                  <span style={{ color: ts.c }}><Ic size={18} /></span>
                  <span style={{ flex: 1, fontSize: 13, fontWeight: t.state === "done" ? 500 : 600, color: "var(--ink)" }}>{t.label}</span>
                  <span style={{ fontSize: 11, fontWeight: 700, color: ts.c, background: ts.bg, borderRadius: 999, padding: "3px 9px" }}>{ts.label}</span>
                </div>
              );
            })}
          </div>

          {/* 本音シート示唆 */}
          <div style={{ marginTop: 20, fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", marginBottom: 10, display: "flex", alignItems: "center", gap: 7 }}>
            <Icons.shield size={15} />本音シートからの示唆
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {sup.honne.map((h, i) => (
              <div key={i} style={{ padding: "12px 14px", borderRadius: 12, background: "var(--brand-50)", border: "1px solid var(--brand-100)" }}>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>候補が気にしている点</div>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)", margin: "3px 0 8px" }}>{h.concern}</div>
                <div style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 12.5, color: "var(--brand-800)", lineHeight: 1.6 }}>
                  <span style={{ color: "var(--brand-500)", flexShrink: 0, marginTop: 1 }}><Icons.heart size={14} /></span>
                  <span>手当て：{h.action}</span>
                </div>
                <div style={{ marginTop: 8 }}><Pill bg="#fff" color="var(--fit)" icon={Icons.check}>{h.consent}</Pill></div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16 }}>
            <Note tone="warn" icon={Icons.shield}>病院の ToDo：{sup.todo.join(' ／ ')}</Note>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
            <Button variant="dark" icon={Icons.checkCircle} onClick={() => alert('内定を記録しました。')}>内定を記録</Button>
            <Button variant="ghost" icon={Icons.task}>条件すり合わせを送る</Button>
          </div>
        </Card>

        {/* 右：再アプローチ候補 + 実習完了評価 */}
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Card pad={20}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
              <span style={{ color: "var(--consult)" }}><Icons.clock size={18} /></span>
              <h3 className="disp" style={{ fontSize: 16, fontWeight: 700 }}>再アプローチ候補</h3>
              <Pill bg="var(--consult-bg)" color="var(--consult)">迷い中</Pill>
            </div>
            {REAPPROACH.map((r) => {
              const s = studentById(r.id);
              return (
                <div key={r.id} style={{ padding: 14, borderRadius: 12, border: "1px solid var(--border)", background: "var(--surface-2)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <Avatar s={s} size={38} />
                    <div style={{ flex: 1 }}>
                      <div className="disp" style={{ fontSize: 13.5, fontWeight: 700 }}>{s.name}</div>
                      <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{r.last} ／ {r.left}</div>
                    </div>
                    <Pill bg="var(--consult-bg)" color="var(--consult)">優先度 {r.priority}</Pill>
                  </div>
                  <div style={{ fontSize: 12, color: "var(--ink-2)", margin: "10px 0", lineHeight: 1.55 }}>{r.note}</div>
                  <Button variant="subtle" size="sm" full icon={Icons.send}>声かけを送る</Button>
                </div>
              );
            })}
          </Card>

          <Card pad={20}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <span style={{ color: "var(--fit)" }}><Icons.checkCircle size={18} /></span>
              <h3 className="disp" style={{ fontSize: 16, fontWeight: 700 }}>実習完了者・簡易評価メモ</h3>
            </div>
            <div style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
              <Avatar s={studentById("sato")} size={38} />
              <div style={{ flex: 1 }}>
                <div className="disp" style={{ fontSize: 13.5, fontWeight: 700 }}>佐藤 みなと <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 500 }}>6/12 実習完了</span></div>
                <textarea defaultValue="腫瘍症例への食いつきが良く、根拠を質問する姿勢が当院向き。来てよかった。担当医制の説明で安心した様子。" rows={3} style={{ width: "100%", marginTop: 8, padding: "10px 12px", borderRadius: 10, border: "1px solid var(--border-strong)", fontSize: 12.5, lineHeight: 1.6, fontFamily: "var(--sans)", resize: "vertical" }} />
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

window.SV_Pipeline = PipelineScreen;