import type { PlanningView } from "@batch-cooking/shared";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { apiClient } from "../api/client";
import "./HomePage.scss";

/** Load state for the `GET /planning/current` call — a discriminated union so a stale/impossible combination (e.g. "loading" with data) can't be represented. */
type PlanningState =
  | { status: "loading" }
  | { status: "loaded"; planning: PlanningView | null }
  | { status: "error" };

/**
 * Landing page for an authenticated visitor — the household's current
 * planning. Behind {@link RequireAuth} (via `AppLayout`), so this only
 * renders once a session is confirmed; the planning itself still has to be
 * fetched separately, hence the loading/error/empty/loaded states below.
 * `null` from the API is a normal, common state (no planning created yet),
 * not an error — see `apps/api`'s `planning.service.ts`.
 */
export function HomePage() {
  const { t } = useTranslation();
  const [state, setState] = useState<PlanningState>({ status: "loading" });

  useEffect(() => {
    // Guards against setting state after unmount (e.g. the user navigates
    // away before the request resolves) — no cleanup-worthy resource here,
    // just avoids a "set state on unmounted component" warning.
    let cancelled = false;

    apiClient
      .getCurrentPlanning()
      .then((planning) => {
        if (!cancelled) setState({ status: "loaded", planning });
      })
      .catch(() => {
        if (!cancelled) setState({ status: "error" });
      });

    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <div className="home-page">
      <h1>{t("home.title")}</h1>

      {state.status === "loading" && <p className="home-page__status">{t("home.loading")}</p>}

      {state.status === "error" && (
        <p className="home-page__status home-page__status--error">{t("home.error")}</p>
      )}

      {state.status === "loaded" && state.planning === null && (
        <p className="home-page__status">{t("home.empty")}</p>
      )}

      {state.status === "loaded" && state.planning !== null && (
        <table className="planning-table">
          <thead>
            <tr>
              <th>{t("home.table.day")}</th>
              <th>{t("home.table.meal")}</th>
              <th>{t("home.table.recipe")}</th>
            </tr>
          </thead>
          <tbody>
            {state.planning.items.map((item) => (
              <tr key={item.id}>
                <td>{item.weekDay}</td>
                <td>{item.meal}</td>
                <td>{item.recipe.name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}