/* ============================================================
   Screen: ILP / SEN Plans (confidential)
   ============================================================ */
(function () {
  const DB = window.DB;

  function GoalBar({ g }) {
    const col = g.progress >= 75 ? "var(--stable)" : g.progress >= 45 ? "var(--watch)" : "var(--critical)";
    return (
      <div className="goal">
        <div className="between" style={{ marginBottom: 5, alignItems: "flex-start" }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{t(g.goal)}</div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{t(g.specific)}</div>
          </div>
          <span className="mono" style={{ fontSize: 12, fontWeight: 600, color: col }}>{g.progress}%</span>
        </div>
        <div style={{ height: 6, background: "var(--surface-2)", borderRadius: 999, overflow: "hidden" }}>
          <span style={{ display: "block", width: g.progress + "%", height: "100%", background: col, borderRadius: 999 }}></span>
        </div>
        <div className="mono faint" style={{ fontSize: 10.5, marginTop: 5 }}>{t("Target date")} {g.due}</div>
      </div>
    );
  }

  function ILP({ role, navigate }) {
    const plans = DB.ILP_PLANS;
    const [selId, setSelId] = React.useState(plans[0].studentId);
    const [unlocked, setUnlocked] = React.useState(false);
    const [newPlan, setNewPlan] = React.useState(false);
    React.useEffect(() => setUnlocked(false), [selId]); // re-lock on student change

    const plan = DB.ilp(selId);
    const s = DB.student(selId);
    const coord = DB.teacher(plan.coordinator);

    return (
      <div className="screen">
        <div className="between" style={{ marginBottom: 14 }}>
          <div>
            <h2 style={{ fontSize: 19 }}>{t("ILP / SEN Plans")}</h2>
            <p className="muted" style={{ fontSize: 13, marginTop: 4 }}>{t("Individual learning plans for students with additional needs.")}</p>
          </div>
          <button className="btn btn-sm btn-primary" onClick={() => setNewPlan(true)}><Icon name="plus" size={14} />{t("New plan")}</button>
        </div>

        {/* confidential banner */}
        <div className="confidential-banner">
          <Icon name="compliance" size={16} />
          <span><b>{t("Confidential.")}</b> {t("ILP / SEN records are role-restricted. Medical & diagnostic fields are visible to the Counsellor only. All access is audit-logged.")}</span>
        </div>

        <div className="ilp-layout">
          {/* list */}
          <div className="panel ilp-list">
            <div className="panel-h"><h3>{t("Active plans")}</h3><span className="mono muted" style={{ fontSize: 12 }}>{plans.length}</span></div>
            <div>
              {plans.map((p) => {
                const st = DB.student(p.studentId);
                const on = p.studentId === selId;
                return (
                  <button key={p.studentId} className={"ilp-item" + (on ? " on" : "")} onClick={() => setSelId(p.studentId)}>
                    <Avatar name={st.name} color={st.avatar} size={32} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 600, fontSize: 13, whiteSpace: "nowrap" }}>{st.name}</div>
                      <div className="muted" style={{ fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t(p.needs[0].area)}</div>
                    </div>
                    <div className="col" style={{ alignItems: "flex-end", gap: 4 }}>
                      <span className="badge stable" style={{ height: 18 }}>{t(p.status)}</span>
                      <span className="mono faint" style={{ fontSize: 9.5 }}>{t("rev")} {p.nextReview.slice(5)}</span>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* detail */}
          <div className="col" style={{ gap: "var(--gap)", minWidth: 0 }}>
            {/* header */}
            <div className="panel">
              <div className="prof-head" style={{ padding: "16px var(--pad)", alignItems: "center" }}>
                <Avatar name={s.name} color={s.avatar} size={52} />
                <div style={{ flex: 1 }}>
                  <button className="link-name" style={{ marginTop: 0 }} onClick={() => navigate("student/" + s.id)}>
                    <h3 style={{ fontSize: 18 }}>{s.name}</h3><Icon name="external" size={13} />
                  </button>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
                    <span className="mono">{s.id}</span> · {t("Class")} {s.cls} · {s.prog} · {t("Plan opened")} {plan.opened}
                  </div>
                </div>
                <div className="ilp-head-meta">
                  <div><div className="eyebrow" style={{ fontSize: 9 }}>{t("Coordinator")}</div><div className="row" style={{ gap: 6, marginTop: 4 }}><Avatar name={coord.name} color={coord.avatar} size={20} /><span style={{ fontSize: 12.5, fontWeight: 500 }}>{coord.name}</span></div></div>
                  <div><div className="eyebrow" style={{ fontSize: 9 }}>{t("Next review")}</div><div className="mono" style={{ fontSize: 13, fontWeight: 600, marginTop: 4, color: plan.reviewOverdue ? "var(--critical)" : "var(--ink)" }}>{plan.nextReview}</div></div>
                </div>
              </div>
            </div>

            {/* confidential medical block (counsellor-gated) */}
            <div className={"panel medical" + (unlocked ? " open" : "")}>
              <div className="panel-h">
                <div className="row" style={{ gap: 8 }}>
                  <Icon name="compliance" size={15} style={{ color: unlocked ? "var(--critical)" : "var(--muted)" }} />
                  <h3>{t("Medical & diagnostic information")}</h3>
                </div>
                <span className="badge" style={{ borderColor: "var(--critical-line)", color: "var(--critical)", background: "var(--critical-soft)" }}>
                  <Icon name="compliance" size={11} />{t("Counsellor only")}
                </span>
              </div>
              {unlocked ? (
                <div className="panel-b">
                  <div className="med-grid">
                    <div><div className="eyebrow">{t("Summary")}</div><p style={{ fontSize: 13, marginTop: 5, lineHeight: 1.55 }}>{t(plan.diagnosis.summary)}</p></div>
                    <div><div className="eyebrow">{t("Assessed by")}</div><div style={{ fontSize: 13, marginTop: 5 }}>{t(plan.diagnosis.assessedBy)}</div><div className="mono faint" style={{ fontSize: 11, marginTop: 2 }}>{plan.diagnosis.date}</div></div>
                  </div>
                  <div style={{ marginTop: 14, padding: "11px 13px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: "var(--r)" }}>
                    <div className="eyebrow" style={{ marginBottom: 5 }}>{t("Clinical notes")}</div>
                    <p style={{ fontSize: 12.5, lineHeight: 1.55 }}>{t(plan.diagnosis.notes)}</p>
                  </div>
                  <div className="between" style={{ marginTop: 12 }}>
                    <span className="mono faint" style={{ fontSize: 10.5 }}><Icon name="check" size={11} style={{ verticalAlign: "-1px" }} /> {t("Access logged")} · {coord.name} · {t("just now")}</span>
                    <button className="btn btn-sm btn-ghost" onClick={() => setUnlocked(false)}>{t("Hide")}</button>
                  </div>
                </div>
              ) : (
                <div className="med-locked">
                  <Icon name="compliance" size={26} style={{ color: "var(--faint)" }} />
                  <p style={{ fontSize: 13, fontWeight: 500 }}>{t("Restricted to the Counsellor (SEN / wellbeing).")}</p>
                  <p className="muted" style={{ fontSize: 12, maxWidth: 380, textAlign: "center", lineHeight: 1.5 }}>
                    {t("As")} {role === "director" ? t("Executive Director") : t("a teacher")} {t("you do not have standing access to medical or diagnostic fields. Opening them is recorded in the audit log.")}
                  </p>
                  <button className="btn btn-sm" onClick={() => setUnlocked(true)}><Icon name="compliance" size={13} />{t("View as Counsellor")} · O. Brennan</button>
                </div>
              )}
            </div>

            {/* needs */}
            <div className="panel">
              <div className="panel-h"><h3>{t("Needs & impact on learning")}</h3></div>
              <div className="panel-b" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {plan.needs.map((n, i) => (
                  <div key={i} className="need-card">
                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>{t(n.area)}</div>
                    <p className="muted" style={{ fontSize: 12.5, marginTop: 5, lineHeight: 1.5 }}>{t(n.detail)}</p>
                    <div className="need-impact"><Icon name="arrowR" size={13} /><span><b>{t("Impact:")}</b> {t(n.impact)}</span></div>
                  </div>
                ))}
              </div>
            </div>

            {/* access arrangements */}
            <div className="panel">
              <div className="panel-h"><h3>{t("IB access arrangements")}</h3><span className="muted" style={{ fontSize: 11.5 }}>{plan.access.filter((a) => a.granted).length} {t("granted")}</span></div>
              <div className="panel-b">
                <div className="access-grid">
                  {plan.access.map((a, i) => (
                    <div key={i} className={"access-cell" + (a.granted ? " granted" : "")}>
                      <span className={"access-check " + (a.granted ? "yes" : "no")}>{a.granted ? <Icon name="check" size={13} /> : <Icon name="close" size={12} />}</span>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 500 }}>{t(a.type)}</div>
                        {a.value && a.value !== "—" ? <div className="mono faint" style={{ fontSize: 10.5 }}>{t(a.value)}</div> : <div className="faint" style={{ fontSize: 10.5 }}>{a.granted ? t("Approved") : t("Not required")}</div>}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* strategies + goals */}
            <div className="split-2">
              <div className="panel">
                <div className="panel-h"><h3>{t("Classroom strategies")}</h3></div>
                <div className="panel-b">
                  <ul className="strat-list">
                    {plan.strategies.map((st, i) => <li key={i}><span className="strat-num mono">{i + 1}</span><span>{t(st)}</span></li>)}
                  </ul>
                </div>
              </div>
              <div className="panel">
                <div className="panel-h"><h3>{t("SMART goals")}</h3></div>
                <div className="panel-b" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  {plan.goals.map((g, i) => <GoalBar key={i} g={g} />)}
                </div>
              </div>
            </div>

            {/* review log */}
            <div className="panel">
              <div className="panel-h">
                <h3>{t("Review log")}</h3>
                <span className="badge accent"><Icon name="attendance" size={11} />{t("Next review")} {plan.nextReview}</span>
              </div>
              <div className="panel-b">
                <div className="timeline">
                  {plan.reviews.map((r, i) => (
                    <div key={i} className="tl-item">
                      <div className="tl-mark"><Icon name="check" size={13} style={{ color: "var(--stable)" }} /></div>
                      <div className="tl-body">
                        <div className="between"><span style={{ fontSize: 12.5, fontWeight: 600 }}>{r.by}</span><span className="mono faint" style={{ fontSize: 10.5 }}>{r.date}</span></div>
                        <p className="muted" style={{ fontSize: 12, marginTop: 2, lineHeight: 1.5 }}>{t(r.note)}</p>
                        <span className="tl-type mono">{t("next review")} {r.next}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {newPlan ? (
          <FormModal title={t("Create an ILP / SEN plan")} subtitle={t("Confidential. Medical and diagnostic fields can only be completed by the Counsellor.")}
            fields={[
              { k: "student", label: t("Student"), type: "select", options: DB.STUDENTS.map((s) => s.name + " · " + s.cls) },
              { k: "primary", label: t("Primary need"), type: "select", options: [t("Specific learning difficulty"), t("Social, emotional & mental health"), t("Attention & self-regulation"), t("Physical / sensory"), t("Communication & interaction")] },
              { k: "summary", label: t("Summary of need"), type: "textarea", ph: t("Brief description and impact on learning…"), required: true },
            ]}
            submitLabel={t("Create plan")} submitIcon="plus"
            onClose={() => setNewPlan(false)}
            onSubmit={() => { setNewPlan(false); window.toast(t("ILP draft created · counsellor notified")); }} />
        ) : null}
      </div>
    );
  }

  window.SCREENS = window.SCREENS || {};
  window.SCREENS.ilp = ILP;
})();