import { useEffect, useState } from "react";
import { api } from "../api/client";
import { ProgressionChart } from "../components/charts/ProgressionChart";
import type { ProgressionMetric, ProgressionPoint, WorkoutKind } from "../types/api";

const METRICS: { key: ProgressionMetric; label: string }[] = [
  { key: "pace", label: "Pace" },
  { key: "hr", label: "Heart Rate" },
  { key: "vo2max", label: "VO2max" },
  { key: "aerobic_te", label: "Aerobic Training Effect" },
  { key: "anaerobic_te", label: "Anaerobic Training Effect" },
  { key: "efficiency_factor", label: "Efficiency Factor" },
];

export function Analysis() {
  const [kinds, setKinds] = useState<WorkoutKind[]>([]);
  const [selectedKindId, setSelectedKindId] = useState<number | null>(null);
  const [metric, setMetric] = useState<ProgressionMetric>("pace");
  const [points, setPoints] = useState<ProgressionPoint[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    api
      .listWorkoutKinds()
      .then((k) => {
        setKinds(k);
        if (k.length > 0) setSelectedKindId(k[0].ID);
      })
      .catch((e) => setError(String(e)));
  }, []);

  useEffect(() => {
    if (selectedKindId == null) return;
    setLoading(true);
    setError(null);
    api
      .progression(selectedKindId, metric)
      .then(setPoints)
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false));
  }, [selectedKindId, metric]);

  return (
    <div className="page">
      {kinds.length === 0 ? (
        <p className="empty-state">
          No training types defined yet. See the Training types card on the Profile page to start seeing progression
          here.
        </p>
      ) : (
        <>
          <div className="controls">
            <label>
              Training types
              <select
                value={selectedKindId ?? ""}
                onChange={(e) => setSelectedKindId(Number(e.target.value))}
              >
                {kinds.map((k) => (
                  <option key={k.ID} value={k.ID}>
                    {k.Name}
                  </option>
                ))}
              </select>
            </label>

            <label>
              Metric
              <select value={metric} onChange={(e) => setMetric(e.target.value as ProgressionMetric)}>
                {METRICS.map((m) => (
                  <option key={m.key} value={m.key}>
                    {m.label}
                  </option>
                ))}
              </select>
            </label>
          </div>

          {error && <p className="error">{error}</p>}
          {loading ? <p>Loading...</p> : <ProgressionChart points={points} metric={metric} />}
        </>
      )}
    </div>
  );
}