// Équipe — directly mirrors the mobile screen: 2 quick-action tiles + enseignants list,
// but expanded with multi-column table and right-rail "À traiter".

function Equipe({ onOpenAnnonce, onNav }) {
  const { TEACHERS, ANNONCES, INSCRIPTIONS } = window.SCOLIA;
  const { toast, editTeacher, t } = useApp();
  const [filter, setFilter] = React.useState("all");

  const FILTERS = [
    { k: "all",    l: t("tab_tous")   },
    { k: "actifs", l: t("tab_actifs") },
    { k: "conge",  l: t("tab_conge")  },
  ];

  return (
    <div>
      <Topbar
        left={
          <div>
            <div className="eyebrow">{t("equipe_eyebrow")}</div>
            <h1 className="h1" style={{marginTop: 6}}>{t("equipe_title")}</h1>
          </div>
        }
        right={
          <>
            <button className="btn" onClick={() => toast("Export de l'équipe au format CSV")}><Icons.Doc size={16}/>{t("export")}</button>
            <button className="btn btn-primary" onClick={onOpenAnnonce}><Icons.Megaphone size={16}/>{t("new_annonce_btn")}</button>
          </>
        }
      />

      <div className="row gap-5" style={{marginBottom: 24}}>
        <BigTile icon={Icons.Doc} title={t("inscriptions_tile")} sub={t("inscriptions_tile_sub")}
                 count="12" subcount="3 nouveaux" onClick={() => onNav("inscriptions")}/>
        <BigTile icon={Icons.Megaphone} title={t("annonces_tile")} sub={t("annonces_tile_sub")}
                 count="3" subcount="1 épinglée" onClick={onOpenAnnonce}/>
        <BigTile icon={Icons.Msg} title={t("conv_tile")} sub={t("conv_tile_sub")}
                 count="2" subcount="1 non lue" onClick={() => onNav("conversations")}/>
      </div>

      <div className="row gap-5" style={{alignItems: "flex-start"}}>
        <div className="card" style={{flex: 1.7, minWidth: 0}}>
          <div className="row" style={{padding: "20px 24px 14px", justifyContent: "space-between", alignItems: "center"}}>
            <div>
              <div className="h2">{t("teachers_title")} <span style={{color:"var(--ink-4)",fontWeight:600,fontSize:16}}>· {TEACHERS.length}</span></div>
              <div className="meta" style={{marginTop: 4}}>Activité · 7 derniers jours</div>
            </div>
            <div className="row gap-2">
              <div className="tabs">
                {FILTERS.map(f => (
                  <button key={f.k} className={filter===f.k?"active":""} onClick={() => setFilter(f.k)}>{f.l}</button>
                ))}
              </div>
            </div>
          </div>

          <div className="lrow" style={{
            gridTemplateColumns: "2fr 1.4fr 90px 90px 1.1fr 24px",
            padding: "10px 24px",
            color: "var(--ink-4)", fontSize: 12, fontWeight: 600,
            letterSpacing: ".04em", textTransform: "uppercase",
            borderBottom: "1px solid var(--border)",
          }}>
            <div>{t("team_teacher_col")}</div>
            <div>{t("team_class_col")}</div>
            <div>{t("team_obs_col")}</div>
            <div>{t("team_conv_col")}</div>
            <div>{t("activity_col")}</div>
            <div/>
          </div>

          {TEACHERS.map((tc, i) => (
            <button key={tc.id} onClick={() => editTeacher(tc)}
                 className="lrow"
                 style={{gridTemplateColumns: "2fr 1.4fr 90px 90px 1.1fr 24px", padding: "16px 24px", alignItems: "center", width: "100%", textAlign: "left", background: "transparent"}}>
              <div className="row gap-3" style={{alignItems: "center", minWidth: 0}}>
                <Photo src={tc.img} size={42}/>
                <div style={{minWidth: 0}}>
                  <div style={{fontWeight: 700, color: "var(--ink)", fontSize: 14.5}}>{tc.name}</div>
                  <div className="meta">{tc.first.toLowerCase()}@tournesol.fr</div>
                </div>
              </div>
              <div>
                <span className="chip">{tc.classe}</span>
              </div>
              <div>
                {tc.obs > 0
                  ? <span className="chip brand">{tc.obs} obs.</span>
                  : <span className="chip">0</span>}
              </div>
              <div><span className="chip">{tc.conv}</span></div>
              <div className="meta">
                {i === 0 ? "il y a 12 min" : i === 1 ? "il y a 38 min" : i === 2 ? "Hier · 17:02" : "Lun · 14:11"}
              </div>
              <Icons.ChevR size={16} style={{color: "var(--ink-5)"}}/>
            </button>
          ))}
        </div>

        <div className="col gap-5" style={{flex: 1, minWidth: 360}}>
          <div className="card">
            <div className="row" style={{padding: "20px 22px 12px", justifyContent: "space-between", alignItems: "center"}}>
              <div className="h2">{t("to_process_rail")}</div>
              <span className="chip warn">3</span>
            </div>
            {INSCRIPTIONS.slice(0,3).map(i => (
              <div key={i.id} className="lrow" style={{gridTemplateColumns: "auto 1fr auto", padding: "12px 22px"}}>
                <Initials name={i.name} size={34}/>
                <div style={{minWidth: 0}}>
                  <div style={{fontWeight: 700, color: "var(--ink)", fontSize: 14}}>{i.name}</div>
                  <div className="meta">{i.level} · Inscription {i.since}</div>
                </div>
                <button className="btn btn-primary" style={{padding: "6px 10px", fontSize: 12.5}} onClick={() => onNav("inscriptions")}>{t("open_btn")}</button>
              </div>
            ))}
          </div>

          <div className="card">
            <div className="row" style={{padding: "20px 22px 12px", justifyContent: "space-between", alignItems: "center"}}>
              <div className="h2">{t("latest_annonces")}</div>
              <button className="btn btn-ghost" onClick={onOpenAnnonce}><Icons.Plus size={14}/>{t("write_btn")}</button>
            </div>
            <div className="col" style={{padding: "0 22px 22px", gap: 12}}>
              {ANNONCES.slice(0,2).map(a => (
                <button key={a.id} onClick={onOpenAnnonce} style={{
                  padding: 14, borderRadius: 14,
                  background: a.pinned ? "var(--brand-soft)" : "var(--surface-2)",
                  border: `1px solid ${a.pinned ? "var(--brand-soft-2)" : "var(--border)"}`,
                  textAlign: "left", cursor: "pointer", width: "100%",
                }}>
                  {a.pinned && (
                    <div className="row gap-2" style={{alignItems: "center", marginBottom: 6}}>
                      <Icons.Pin size={12} style={{color: "var(--brand-ink)"}}/>
                      <span style={{fontSize: 10.5, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--brand-ink)"}}>{t("pinned")}</span>
                    </div>
                  )}
                  <div style={{fontWeight: 700, color: "var(--ink)", fontSize: 14}}>{a.title}</div>
                  <div className="meta" style={{marginTop: 4}}>{a.body}</div>
                  <div className="row" style={{justifyContent:"space-between", alignItems:"center", marginTop: 10}}>
                    <span className="meta">{a.time}</span>
                    <span className="meta tnum">{a.reads}/{a.total} lus</span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BigTile({ icon: Ico, title, sub, count, subcount, onClick }) {
  return (
    <button className="card card-pad"
            onClick={onClick}
            style={{flex: 1, textAlign: "left", cursor: "pointer"}}>
      <div className="row" style={{alignItems: "flex-start", justifyContent: "space-between"}}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: "var(--brand-soft)", color: "var(--brand)",
          display: "grid", placeItems: "center"
        }}>
          <Ico size={22}/>
        </div>
        <Icons.ChevR size={18} style={{color: "var(--ink-5)"}}/>
      </div>
      <div style={{marginTop: 18}}>
        <div className="h2" style={{fontSize: 20}}>{title}</div>
        <div className="meta" style={{marginTop: 2}}>{sub}</div>
      </div>
      <div className="row" style={{justifyContent: "space-between", alignItems: "baseline", marginTop: 16}}>
        <span className="display" style={{fontSize: 34}}>{count}</span>
        <span className="chip brand">{subcount}</span>
      </div>
    </button>
  );
}

window.Equipe = Equipe;