"use client";
import { useI18n } from "@/components/I18nProvider";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowRight, Timer, ZoomIn } from "lucide-react";
import { difficulties, type Difficulty } from "@/shared/protocol";
import { api } from "@/lib/client-api";
export { api } from "@/lib/client-api";
export function StartGame({ datasetId }: { datasetId: string }) {
  const { t } = useI18n();
  const [difficulty, setDifficulty] = useState<Difficulty>("normal"),
    [loading, setLoading] = useState(false),
    [error, setError] = useState("");
  const router = useRouter();
  async function start() {
    setLoading(true);
    setError("");
    try {
      const session = await api<{ id: string }>("sessions", {
        datasetId,
        difficulty,
      });
      router.push("/play/" + session.id);
    } catch (e) {
      setError((e as Error).message);
      setLoading(false);
    }
  }
  return (
    <div className="start-panel">
      <span className="eyebrow">{t("YOUR EXPEDITION")}</span>
      <h2>{t("Choose your challenge.")}</h2>
      <div className="difficulty-options">
        {Object.entries(difficulties).map(([key, value]) => (
          <button
            key={key}
            aria-pressed={difficulty === key}
            className={difficulty === key ? "selected" : ""}
            onClick={() => setDifficulty(key as Difficulty)}
          >
            <strong>{t(value.label)}</strong>
            <span>
              <Timer size={13} />
              {value.seconds}
              {t("s per round")}
            </span>
            <span>
              <ZoomIn size={13} />
              {value.zoom ? t("Zoom allowed") : t("No zoom")}
            </span>
          </button>
        ))}
      </div>
      <p className="muted">
        {t("5 rounds · 25,000 possible points · No movement")}
      </p>
      <button
        className="button primary full"
        onClick={start}
        disabled={loading}
      >
        {loading ? t("Preparing your world…") : t("Start exploring")}
        <ArrowRight size={17} />
      </button>
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
    </div>
  );
}