// École — settings/info page. Not in mobile screens, but inferred from the bottom tab.

function Ecole() {
  const { toast, confirm, t } = useApp();
  return (
    <div>
      <Topbar
        left={
          <div>
            <div className="eyebrow">{t("ecole_eyebrow")}</div>
            <h1 className="h1" style={{marginTop: 6}}>École Tournesol</h1>
          </div>
        }
        right={
          <>
            <button className="btn" onClick={() => toast("Fiche publique ouverte")}><Icons.Doc size={16}/>{t("ecole_view_public")}</button>
            <button className="btn btn-primary" onClick={() => toast("Modifications enregistrées")}><Icons.Check size={16}/>{t("save")}</button>
          </>
        }
      />

      <div className="row gap-5" style={{alignItems: "flex-start"}}>
        <div className="col gap-5" style={{flex: 1.4, minWidth: 0}}>
          <div className="card card-pad">
            <div className="h2" style={{marginBottom: 6}}>{t("identity_title")}</div>
            <div className="meta" style={{marginBottom: 18}}>{t("identity_sub")}</div>

            <div className="row gap-5" style={{alignItems: "center", marginBottom: 18}}>
              <div style={{
                width: 88, height: 88, borderRadius: 20,
                background: "var(--brand-soft)", color: "var(--brand-ink)",
                display: "grid", placeItems: "center",
                fontWeight: 800, fontSize: 28
              }}>T</div>
              <div className="col gap-2">
                <button className="btn" onClick={() => toast("Logo mis à jour")}>{t("change_logo")}</button>
                <span className="meta">{t("logo_hint")}</span>
              </div>
            </div>

            <Field label={t("field_school_name")} value="École Tournesol"/>
            <Field label={t("field_address")} value="12 rue des Lilas, 75011 Paris"/>
            <div className="row gap-4">
              <div style={{flex: 1}}><Field label={t("field_phone")} value="01 43 55 11 22"/></div>
              <div style={{flex: 1}}><Field label={t("field_email")} value="contact@ecole-tournesol.fr"/></div>
            </div>
            <Field label="UAI" value="0750123A" mono/>
          </div>

          <div className="card card-pad">
            <div className="h2" style={{marginBottom: 14}}>{t("school_year_title")}</div>
            <div className="row gap-4">
              <Stat label={t("field_current_year")} value="2025–2026" sub="Période 4 sur 5"/>
              <Stat label={t("field_enrolled")} value="26" sub="Capacité 60"/>
              <Stat label={t("field_insc_2026")} value="12" sub="3 nouveaux"/>
            </div>
            <div className="divider" style={{margin: "20px 0"}}/>
            <div className="h3" style={{marginBottom: 12}}>{t("periods_title")}</div>
            <div className="col gap-2">
              {[
                {p:"P1", from: "02 sept.", to: "18 oct."},
                {p:"P2", from: "04 nov.",  to: "20 déc."},
                {p:"P3", from: "06 janv.", to: "14 fév."},
                {p:"P4", from: "03 mars",  to: "11 avr.", active: true},
                {p:"P5", from: "28 avr.",  to: "04 juil."},
              ].map((r, i) => (
                <div key={i} className="row gap-4" style={{
                  alignItems: "center", padding: "12px 14px",
                  borderRadius: 10,
                  background: r.active ? "var(--brand-soft)" : "transparent",
                  border: `1px solid ${r.active ? "var(--brand-soft-2)" : "var(--border)"}`,
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: r.active ? "var(--brand)" : "var(--surface-2)",
                    color: r.active ? "white" : "var(--ink-3)",
                    display: "grid", placeItems: "center", fontWeight: 800, fontSize: 13
                  }}>{r.p}</div>
                  <div style={{flex: 1, fontWeight: 600, color: "var(--ink)"}}>
                    Du <span className="tnum">{r.from}</span> au <span className="tnum">{r.to}</span>
                  </div>
                  {r.active && <span className="chip brand">{t("active_period_chip")}</span>}
                  <DropMenu align="right" trigger={<button className="btn btn-ghost"><Icons.Dots size={16}/></button>} items={[
                    {label: t("edit_dates"),  onClick: () => toast("Édition des dates de " + r.p)},
                    {label: t("set_current"), onClick: () => toast(r.p + " est maintenant la période active")},
                    "-",
                    {label: t("reset_period"), danger: true, onClick: () => toast("Période réinitialisée")},
                  ]}/>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="col gap-5" style={{flex: 1, minWidth: 380}}>
          <div className="card card-pad">
            <div className="h2" style={{marginBottom: 14}}>{t("direction_title")}</div>
            <div className="row gap-3" style={{alignItems: "center", marginBottom: 16}}>
              <Photo src="https://i.pravatar.cc/120?img=48" size={52}/>
              <div>
                <div style={{fontWeight: 800, color: "var(--ink)"}}>Sophie Marchand</div>
                <div className="meta">Directrice · depuis 2021</div>
              </div>
            </div>
            <div className="row gap-2">
              <button className="btn btn-ghost" style={{flex:1}} onClick={() => toast("Message envoyé à Sophie")}><Icons.Msg size={14}/>{t("message_btn")}</button>
              <button className="btn btn-ghost" style={{flex:1}} onClick={() => toast("Permissions ouvertes")}><Icons.Settings size={14}/>{t("permissions_btn")}</button>
            </div>
          </div>

          <div className="card card-pad">
            <div className="h2" style={{marginBottom: 6}}>{t("integrations_title")}</div>
            <div className="meta" style={{marginBottom: 16}}>{t("integrations_sub")}</div>
            <div className="col gap-2">
              {[
                {n: "Pronote",        s: "Synchronisée",     ok: true},
                {n: "Onde",           s: "Synchronisée",     ok: true},
                {n: "iCloud Calendar",s: "Bidirectionnel",   ok: true},
                {n: "Stripe",         s: "Paiements actifs", ok: true},
              ].map((it, i) => (
                <div key={i} className="row gap-3" style={{alignItems: "center", padding: "10px 0"}}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: "var(--surface-2)", display: "grid", placeItems: "center",
                    fontWeight: 800, color: "var(--ink-2)",
                  }}>{it.n[0]}</div>
                  <div style={{flex: 1}}>
                    <div style={{fontWeight: 600, color: "var(--ink)"}}>{it.n}</div>
                    <div className="meta">{it.s}</div>
                  </div>
                  <span className="chip brand"><span className="chip-dot"/>{t("active_chip")}</span>
                  <button className="btn btn-ghost" onClick={() => toast(it.n + " — réglages")}><Icons.Settings size={14}/></button>
                </div>
              ))}
            </div>
          </div>

          <div className="card card-pad" style={{background: "var(--brand-soft)", borderColor: "var(--brand-soft-2)"}}>
            <div className="row gap-3" style={{alignItems: "flex-start"}}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: "var(--brand)", color: "white",
                display: "grid", placeItems: "center"
              }}>
                <Icons.Sparkle size={20}/>
              </div>
              <div style={{flex: 1}}>
                <div style={{fontWeight: 800, color: "var(--brand-ink)", fontSize: 15}}>{t("ia_weekly_title")}</div>
                <div style={{color: "var(--brand-ink)", opacity: .8, fontSize: 13, marginTop: 4}}>
                  Recevez chaque vendredi un récap automatique : présence, paiements,
                  alertes élèves, et brouillon d'annonce.
                </div>
                <button className="btn" style={{marginTop: 12, background: "white", borderColor: "transparent"}}
                        onClick={() => toast("Synthèse IA activée · prochain envoi vendredi")}>
                  {t("ia_activate")}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Field({ label, value, mono }) {
  return (
    <div style={{marginBottom: 14}}>
      <div className="eyebrow" style={{marginBottom: 6}}>{label}</div>
      <div style={{
        padding: "11px 14px",
        border: "1px solid var(--border)",
        background: "var(--surface-2)",
        borderRadius: 10,
        fontWeight: 600, color: "var(--ink)",
        fontFamily: mono ? "Geist Mono, monospace" : "inherit",
      }}>{value}</div>
    </div>
  );
}

window.Ecole = Ecole;