import { useCallback, useEffect, useState } from "react";

import type { AnalyticsGroup, Coverage } from "../api/analytics-types.ts";

import { api } from "../api/client.ts";
import { AnalyticsPanels } from "./analytics-panels.tsx";

// The footnote every panel is read under. Two of the three classes of row
// were reconstructed rather than observed, and a chart that does not say so
// is a chart that quietly overstates what is known.
export function Sources({ coverage: measured }: Readonly<{ coverage: Coverage }>): React.JSX.Element {
  return (
    <p className="footnote" data-testid="sources">
      {measured.events} recorded {measured.events === 1 ? "use" : "uses"} over{" "}
      {measured.days} {measured.days === 1 ? "day" : "days"}
      {measured.first_day === "" ? "" : ` (${measured.first_day} – ${measured.last_day})`}.{" "}
      <strong>{measured.sources.live}</strong> observed live,{" "}
      <strong>{measured.sources.journald}</strong> reconstructed from the journal with a real hour,{" "}
      <strong>{measured.sources.daily_uses}</strong> recovered as daily counts with no hour at
      all — those are counted everywhere and excluded from every chart with an hour on
      its axis, because they have none.
      {measured.enough_for_a_trend
        ? ""
        : " Too few days to state a trend; the series is drawn, the direction is not claimed."}
    </p>
  );
}

export function Analytics(): React.JSX.Element {
  const [groups, setGroups] = useState<AnalyticsGroup[] | null>(null);
  const [group, setGroup] = useState<null | string>(null);

  const refresh = useCallback(() => {
    void api.analyticsGroups().then((body) => {
      setGroups(body.groups);
    });
  }, []);

  useEffect(refresh, [refresh]);

  const pick = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
    setGroup(event.target.value === "" ? null : event.target.value);
  }, []);

  if (groups === null) {
    return <p>Reading the database…</p>;
  }

  return (
    <section>
      <h2>Analytics</h2>
      <label>
        Group{" "}
        {/* A group id is 44 characters of base64, so it is picked and never
            typed -- the same reason the Settings tab renders one as a select. */}
        <select data-testid="group-picker" onChange={pick} value={group ?? ""}>
          <option value="">Every group ({groups.length})</option>
          {groups.map((one) => {
            return (
              <option key={one.id} value={one.id}>
                {one.id.slice(0, 18)}… — {one.events} uses
              </option>
            );
          })}
        </select>
      </label>
      <AnalyticsPanels group={group} />
    </section>
  );
}