/* dashboard.jsx - overview running log */
function Dashboard({ state, goStudent }) {
  const { fmt } = window.LP;
  const [filters, setFilters] = React.useState({
    date: "",
    student: "",
    company: "",
    category: "",
    details: "",
    duration: "",
  });
  const sessions = state.students
    .flatMap((student) => (student.sessions || []).map((session) => {
      const row = { ...session, _student: student };
      row._company = session.company || session.goal || "";
      row._category = session.category || (student.tags || []).join(", ");
      row._details = session.details || session.topic || session.note || "";
      row._date = fmt.date(session.date);
      return row;
    }))
    .sort((a, b) => (a.date < b.date ? 1 : -1));
  const filtered = sessions.filter((session) => {
    const includes = (value, needle) => String(value || "").toLowerCase().includes(needle.trim().toLowerCase());
    if (filters.date && !includes(session._date, filters.date)) return false;
    if (filters.student && !includes(session._student.name, filters.student)) return false;
    if (filters.company && !includes(session._company, filters.company)) return false;
    if (filters.category && !includes(session._category, filters.category)) return false;
    if (filters.details && !includes(session._details, filters.details)) return false;
    if (filters.duration.trim()) {
      const raw = filters.duration.trim();
      const value = Number(raw.replace(/[<>= ]/g, ""));
      if (Number.isFinite(value)) {
        if (raw.startsWith(">") && !(session.minutes > value)) return false;
        else if (raw.startsWith("<") && !(session.minutes < value)) return false;
        else if (raw.startsWith("=") && !(session.minutes === value)) return false;
        else if (!/[<>=]/.test(raw) && !String(session.minutes).includes(String(value))) return false;
      }
    }
    return true;
  });
  const setFilter = (key, value) => setFilters((prev) => ({ ...prev, [key]: value }));
  const clearFilters = () => setFilters({ date: "", student: "", company: "", category: "", details: "", duration: "" });
  const hasFilters = Object.values(filters).some(Boolean);

  return (
    <div className="view">
      <Card>
        <SectionHead
          title="Coaching Running Log"
          count={filtered.length}
          action={hasFilters && <Button variant="ghost" size="sm" onClick={clearFilters}>Clear filters</Button>}
        />
        <div className="running-log">
          <div className="running-log-head">
            <FilterHead label="Date" value={filters.date} onChange={(value) => setFilter("date", value)} placeholder="23/02/26" />
            <FilterHead label="Student" value={filters.student} onChange={(value) => setFilter("student", value)} placeholder="Yunlong" />
            <FilterHead label="Company" value={filters.company} onChange={(value) => setFilter("company", value)} placeholder="OCC" />
            <FilterHead label="Coaching Category" value={filters.category} onChange={(value) => setFilter("category", value)} placeholder="Case" />
            <FilterHead label="Details" value={filters.details} onChange={(value) => setFilter("details", value)} placeholder="Framework" />
            <FilterHead label="Duration" value={filters.duration} onChange={(value) => setFilter("duration", value)} placeholder=">60" alignRight />
          </div>
          {filtered.map((session) => (
            <div key={session.id} className="running-log-row" onClick={() => goStudent(session._student.id)}>
              <span className="mono muted">{session._date}</span>
              <span className="cell-student">
                <Avatar name={session._student.name} size={24} /> {session._student.name}
              </span>
              <span>{session._company || "-"}</span>
              <span>{session._category || "-"}</span>
              <span className="cell-topic">
                {session._details || "-"}
                {session.pinned && <Icon.pin size={12} />}
              </span>
              <span className="ta-r mono">{fmt.hrs(session.minutes)}</span>
            </div>
          ))}
          {filtered.length === 0 && (
            <EmptyState icon={<Icon.filter size={24} />} title="No matching sessions" hint="Adjust or clear the column filters." />
          )}
        </div>
      </Card>
    </div>
  );
}

function FilterHead({ label, value, onChange, placeholder, alignRight }) {
  return (
    <label className={"running-filter" + (alignRight ? " ta-r" : "")}>
      <span>{label}</span>
      <input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        onClick={(event) => event.stopPropagation()}
        placeholder={placeholder}
      />
    </label>
  );
}

window.Dashboard = Dashboard;