// Pilotage — main dashboard. Desktop expands the KPI tiles into a row,
// shows weekly attendance + activity feed + tasks side-by-side.

function Pilotage({ onOpenAnnonce, onOpenClass, onNav }) {
  const { WEEK, FEED, TEACHERS, ANNONCES, INSCRIPTIONS } = window.SCOLIA;
  const { toast, t } = useApp();
  const [range, setRange] = React.useState("day");

  const RANGES = [
    { k: "day",   l: t("view_day")   },
    { k: "week",  l: t("view_week")  },
    { k: "month", l: t("view_month") },
  ];

  return (
    <div>
      <Topbar
        left={
          <div>
            <div className="eyebrow">Sophie · Direction</div>
            <h1 className="h1" style={{marginTop: 6}}>{t("pilotage_title")}</h1>
          </div>
        }
        right={
          <>
            <div className="tabs">
              {RANGES.map(r => (
                <button key={r.k} className={range===r.k?"active":""} onClick={() => setRange(r.k)}>{r.l}</button>
              ))}
            </div>
            <button className="icon-btn" onClick={() => toast("3 nouvelles notifications")}>
              <Icons.Bell size={18}/><span className="dot"/>
            </button>
            <button className="btn" onClick={() => toast("Export PDF démarré")}><Icons.Paper size={16}/>{t("export")}</button>
            <button className="btn btn-primary" onClick={onOpenAnnonce}>
              <Icons.Plus size={16}/>{t("pilotage_new_annonce")}
            </button>
          </>
        }
      />

      <div className="row gap-4" style={{marginBottom: 20}}>
        <KPI title={t("kpi_presents")} onClick={() => onNav("classes")}
             value="58%" suffix={t("kpi_presents_sub")}
             delta={<span style={{color: "var(--brand)"}} className="tnum">58%</span>}
             trend={[0.4,0.55,0.62,0.5,0.7,0.58]} accent="brand"/>
        <KPI title={t("kpi_inscriptions")} onClick={() => onNav("inscriptions")}
             value="12" suffix={t("kpi_inscriptions_sub")}
             delta={<span style={{color: "var(--brand)"}}>+3</span>}
             trend={[0.2,0.3,0.5,0.45,0.65,0.78]} accent="brand"/>
        <KPI title={t("kpi_payments")} onClick={() => toast("Vue paiements à venir")}
             value="94%" suffix={t("kpi_payments_sub")}
             delta={<span style={{color: "var(--brand)"}}>↑ 2%</span>}
             trend={[0.7,0.74,0.71,0.78,0.86,0.92]} accent="brand"/>
      </div>

      <div className="row gap-5" style={{alignItems: "flex-start", marginBottom: 20}}>
        <div className="col gap-5" style={{flex: 1.6, minWidth: 0}}>
          <WeeklyAttendance/>
          <TeamActivity onNav={onNav}/>
        </div>
        <div className="col gap-5" style={{flex: 1, minWidth: 380}}>
          <MyActions/>
          <AnnoncePreview onOpen={onOpenAnnonce}/>
          <InscriptionsPreview onNav={onNav}/>
        </div>
      </div>
    </div>
  );
}

function KPI({ title, value, suffix, delta, trend, accent = "brand", onClick }) {
  const w = 120, h = 36;
  const pts = trend.map((v, i) => {
    const x = (i / (trend.length - 1)) * w;
    const y = h - v * h * 0.9 - 2;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(" ");
  const last = trend[trend.length - 1];
  const lx = w, ly = h - last * h * 0.9 - 2;

  return (
    <button onClick={onClick} className="card card-pad"
            style={{flex: 1, minWidth: 0, textAlign: "left", cursor: onClick ? "pointer" : "default"}}>
      <div className="row" style={{justifyContent: "space-between", alignItems: "flex-start"}}>
        <div className="col gap-3" style={{minWidth: 0}}>
          <div className="eyebrow">{title}</div>
          <div className="display" style={{fontSize: 44, lineHeight: 1}}>{value}</div>
          <div className="row gap-3" style={{alignItems: "center"}}>
            <div className="meta" style={{color: "var(--ink-4)"}}>{suffix}</div>
            <div style={{fontSize: 13, fontWeight: 700}}>{delta}</div>
          </div>
        </div>
        <svg width={w} height={h} style={{flexShrink: 0, marginTop: 4}}>
          <polyline points={pts} fill="none" stroke="var(--brand)" strokeWidth="1.8" strokeLinecap="round"/>
          <circle cx={lx} cy={ly} r="3" fill="var(--brand)"/>
        </svg>
      </div>
    </button>
  );
}

function WeeklyAttendance() {
  const { WEEK, CLASSES } = window.SCOLIA;
  const { toast, t } = useApp();
  const [week, setWeek] = React.useState(20);

  const totalStudents = CLASSES.reduce((s, c) => s + c.students, 0);
  const totalPresent  = CLASSES.reduce((s, c) => s + c.present, 0);
  const todayRate     = totalStudents > 0 ? totalPresent / totalStudents : 0;

  const weekData = WEEK.map(d => d.accent ? {...d, v: todayRate} : d);

  return (
    <div className="card">
      <div className="row" style={{justifyContent: "space-between", alignItems: "center", padding: "20px 24px 6px"}}>
        <div>
          <div className="h2">{t("weekly_title")}</div>
          <div className="meta" style={{marginTop: 4}}>École Tournesol · 4 classes · 26 élèves</div>
        </div>
        <div className="row gap-3" style={{alignItems: "center"}}>
          <button className="btn" onClick={() => setWeek(w => Math.max(1, w-1))}><Icons.ChevL size={14}/></button>
          <div className="chip brand">Sem. {week} · 2026</div>
          <button className="btn" onClick={() => setWeek(w => Math.min(52, w+1))}><Icons.ChevR size={14}/></button>
        </div>
      </div>

      <div className="row gap-6" style={{padding: "10px 24px 24px", alignItems: "flex-end", height: 230}}>
        {weekData.map((d, i) => (
          <button key={i} onClick={() => toast(`${d.d} · ${Math.round(d.v*100)}% de présence`)}
                  className="col"
                  style={{flex: 1, alignItems: "stretch", height: "100%", justifyContent: "flex-end",
                          background: "transparent", border: "none", padding: 0, cursor: "pointer"}}>
            <div style={{textAlign: "center", fontSize: 12, color: "var(--ink-4)", fontWeight: 600, marginBottom: 8}}>
              {Math.round(d.v * 100)}%
            </div>
            <div className={`wkbar ${d.accent ? "filled" : ""}`} style={{height: `${d.v * 100}%`, minHeight: 30}}/>
            <div style={{textAlign: "center", marginTop: 10, fontWeight: 600, color: "var(--ink-3)", fontSize: 13}}>
              {d.d}
            </div>
          </button>
        ))}
      </div>

      <div className="divider"/>
      <div className="row" style={{padding: "14px 24px", justifyContent: "space-between", alignItems: "center"}}>
        <div className="row gap-5">
          <Legend color="var(--brand)" label={t("legend_present")}/>
          <Legend color="var(--warn)"  label={t("legend_late")}/>
          <Legend color="var(--danger)" label={t("legend_absent")}/>
        </div>
        <div className="meta">
          Taux aujourd'hui · <b style={{color: "var(--ink)"}} className="tnum">{Math.round(todayRate*100)}%</b>
        </div>
      </div>
    </div>
  );
}

function Legend({color, label}) {
  return (
    <div className="row gap-2" style={{alignItems:"center", fontSize: 12.5, color: "var(--ink-3)"}}>
      <span style={{width: 10, height: 10, background: color, borderRadius: 99}}/>{label}
    </div>
  );
}

function TeamActivity({ onNav }) {
  const { TEACHERS } = window.SCOLIA;
  const { editTeacher, t } = useApp();
  return (
    <div className="card">
      <div className="row" style={{justifyContent: "space-between", padding: "20px 24px 12px", alignItems:"center"}}>
        <div>
          <div className="h2">{t("team_title")}</div>
          <div className="meta" style={{marginTop: 4}}>7 derniers jours · observations & conversations</div>
        </div>
        <button className="btn btn-ghost" onClick={() => onNav("equipe")}>{t("see_all")} <Icons.ChevR size={14}/></button>
      </div>

      <div style={{padding: "0 4px 4px"}}>
        <div className="lrow" style={{
          gridTemplateColumns: "1.6fr 1.4fr 90px 90px 90px 24px",
          padding: "10px 22px",
          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("team_presence_col")}</div>
          <div/>
        </div>
        {TEACHERS.map(tc => (
          <button key={tc.id} onClick={() => editTeacher(tc)}
                  className="lrow"
                  style={{gridTemplateColumns: "1.6fr 1.4fr 90px 90px 90px 24px", padding: "14px 22px", textAlign: "left", width: "100%", background: "transparent"}}>
            <div className="row gap-3" style={{alignItems: "center", minWidth: 0}}>
              <Photo src={tc.img} size={36}/>
              <div style={{minWidth: 0}}>
                <div style={{fontWeight: 700, color: "var(--ink)"}}>{tc.name}</div>
                <div className="meta">{tc.first}</div>
              </div>
            </div>
            <div className="row gap-2" style={{alignItems: "center"}}>
              <span className="chip">{tc.classe}</span>
            </div>
            <div>
              {tc.obs ? <span className="chip brand">{tc.obs} obs.</span>
                      : <span className="chip">0 obs.</span>}
            </div>
            <div><span className="chip">{tc.conv} conv.</span></div>
            <div style={{minWidth: 80}}>
              <div className="pbar">
                <div className="ok"   style={{width: `${50 + tc.obs * 10}%`}}/>
                <div className="warn" style={{width: `12%`}}/>
                <div className="bad"  style={{width: `15%`}}/>
              </div>
            </div>
            <Icons.ChevR size={16} style={{color: "var(--ink-5)"}}/>
          </button>
        ))}
      </div>
    </div>
  );
}

function MyActions() {
  const { TASKS } = window.SCOLIA;
  const { toast, t } = useApp();
  const [tasks, setTasks]   = React.useState(TASKS);
  const [done, setDone]     = React.useState({});
  const [adding, setAdding] = React.useState(false);
  const [newLabel, setNewLabel] = React.useState("");
  const [newPrio, setNewPrio]   = React.useState("med");

  const addTask = () => {
    if (!newLabel.trim()) return;
    const task = { id: Date.now(), label: newLabel.trim(), due: t("today"), priority: newPrio };
    setTasks(ts => [...ts, task]);
    setNewLabel("");
    setAdding(false);
    toast("Action ajoutée");
  };

  return (
    <div className="card">
      <div className="row" style={{justifyContent: "space-between", padding: "20px 24px 12px", alignItems: "center"}}>
        <div className="h2">{t("actions_title")}</div>
        <button className="btn btn-ghost" onClick={() => setAdding(a => !a)}>
          <Icons.Plus size={14}/>{adding ? t("cancel") : t("add")}
        </button>
      </div>

      {adding && (
        <div style={{padding: "0 12px 12px"}}>
          <div style={{padding: 14, background: "var(--surface-2)", borderRadius: 12, border: "1px solid var(--border)"}}>
            <input
              autoFocus
              value={newLabel}
              onChange={e => setNewLabel(e.target.value)}
              onKeyDown={e => e.key === "Enter" && addTask()}
              placeholder={t("task_ph")}
              style={{
                width: "100%", border: "none", outline: "none",
                background: "transparent", font: "inherit",
                fontSize: 14, fontWeight: 500, marginBottom: 10,
              }}
            />
            <div className="row gap-2" style={{justifyContent: "space-between", alignItems: "center"}}>
              <div className="row gap-2">
                {[{v:"high",l:t("task_urgent")},{v:"med",l:t("task_normal")},{v:"low",l:t("task_low")}].map(p => (
                  <button key={p.v} onClick={() => setNewPrio(p.v)}
                          className={`chip ${newPrio===p.v ? (p.v==="high"?"danger":p.v==="med"?"warn":"") : ""}`}
                          style={{padding: "5px 10px", fontWeight: newPrio===p.v ? 700 : 500}}>
                    {p.l}
                  </button>
                ))}
              </div>
              <button className="btn btn-primary" onClick={addTask} style={{padding: "6px 14px"}}>
                <Icons.Check size={13}/>{t("add")}
              </button>
            </div>
          </div>
        </div>
      )}

      <div style={{padding: "0 12px 14px"}}>
        {tasks.map(task => {
          const ok = done[task.id];
          return (
            <button key={task.id} className="row gap-3"
                    onClick={() => { setDone(d => ({...d, [task.id]: !d[task.id]})); toast(ok ? "Action rétablie" : "Action terminée"); }}
                    style={{padding: "10px 12px", alignItems: "center", borderRadius: 10, textAlign: "left", background: "transparent", width: "100%"}}>
              <span style={{
                width: 18, height: 18, borderRadius: 6,
                border: `1.5px solid ${ok ? "var(--brand)" : "var(--border-strong)"}`,
                background: ok ? "var(--brand)" : "transparent",
                display: "grid", placeItems: "center", flexShrink: 0,
              }}>
                {ok && <Icons.Check size={10} sw={3} style={{color: "white"}}/>}
              </span>
              <div style={{flex: 1, fontSize: 13.5, color: ok ? "var(--ink-4)" : "var(--ink-2)", fontWeight: 500, textDecoration: ok ? "line-through" : "none"}}>
                {task.label}
              </div>
              <span className={`chip ${task.priority==="high"?"danger":task.priority==="med"?"warn":""}`}>
                <Icons.Clock size={12}/>{task.due}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function AnnoncePreview({ onOpen }) {
  const { ANNONCES } = window.SCOLIA;
  const { t } = useApp();
  const a = ANNONCES[0];
  return (
    <div className="card">
      <div className="row" style={{justifyContent: "space-between", padding: "20px 24px 12px", alignItems: "center"}}>
        <div className="row gap-2" style={{alignItems: "center"}}>
          <div className="h2">{t("announcements_title")}</div>
          <span className="chip">{ANNONCES.length}</span>
        </div>
        <button className="btn btn-ghost" onClick={onOpen}>{t("pilotage_new_annonce")} <Icons.Plus size={14}/></button>
      </div>
      <div style={{padding: "0 24px 22px"}}>
        <button onClick={onOpen} style={{
          padding: 16, background: "var(--brand-soft)",
          borderRadius: 14, border: "1px solid var(--brand-soft-2)",
          textAlign: "left", width: "100%", cursor: "pointer",
        }}>
          <div className="row gap-2" style={{alignItems: "center", marginBottom: 8}}>
            <Icons.Pin size={13} style={{color: "var(--brand-ink)"}}/>
            <span style={{fontSize: 11, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--brand-ink)"}}>{t("pinned")}</span>
          </div>
          <div style={{fontWeight: 700, color: "var(--ink)", fontSize: 15.5, marginBottom: 6}}>{a.title}</div>
          <div style={{color: "var(--ink-3)", fontSize: 13.5, lineHeight: 1.55}}>{a.body}</div>
          <div className="row" style={{marginTop: 14, justifyContent: "space-between", alignItems: "center"}}>
            <div className="meta">{a.by} · {a.time}</div>
            <div className="chip brand"><Icons.Eye size={12}/>{a.reads}/{a.total} lus</div>
          </div>
        </button>
      </div>
    </div>
  );
}

function InscriptionsPreview({ onNav }) {
  const { INSCRIPTIONS } = window.SCOLIA;
  const { t } = useApp();
  return (
    <div className="card">
      <div className="row" style={{justifyContent: "space-between", padding: "20px 24px 8px", alignItems: "center"}}>
        <div>
          <div className="h2">{t("inscriptions_preview_title")}</div>
          <div className="meta" style={{marginTop: 4}}>12 dossiers · 3 à traiter</div>
        </div>
        <button className="btn btn-ghost" onClick={() => onNav("inscriptions")}>{t("see_all")} <Icons.ChevR size={14}/></button>
      </div>
      {INSCRIPTIONS.slice(0,3).map(i => (
        <button key={i.id} className="lrow"
                onClick={() => onNav("inscriptions")}
                style={{gridTemplateColumns: "auto 1fr auto", padding: "12px 22px", textAlign: "left", width: "100%", background: "transparent"}}>
          <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} · {i.parent}</div>
          </div>
          <div className="col" style={{alignItems: "flex-end", gap: 4}}>
            {i.status === "new"    && <span className="chip brand">{t("insc_status_new")}</span>}
            {i.status === "review" && <span className="chip warn">{t("insc_status_review")}</span>}
            {i.status === "wait"   && <span className="chip">{t("insc_status_wait")}</span>}
            <div className="meta">{i.since}</div>
          </div>
        </button>
      ))}
    </div>
  );
}

window.Pilotage = Pilotage;