import { useState } from "react";
import { useT } from "../../../i18n-context";
import { useOnboardingStore } from "../use-onboarding-store";
import { useConfigStore } from "../../../stores/config-store";
import { MicSimpleIcon } from "../../../../shared/icons";
import styles from "../OnboardingOverlay.module.scss";
import btn from "../../shared/buttons.module.scss";

type HudChoice = "enable" | "later";

export function HudDemoStep() {
  const t = useT();
  const next = useOnboardingStore((s) => s.next);
  const updateConfig = useConfigStore((s) => s.updateConfig);
  const saveConfig = useConfigStore((s) => s.saveConfig);
  const [choice, setChoice] = useState<HudChoice>("enable");

  const config = useConfigStore((s) => s.config);

  const handleContinue = async () => {
    if (choice === "enable") {
      updateConfig({ showHud: true, showHudActions: true });
      await saveConfig(false);
    } else if (choice === "later" && config?.showHud !== true) {
      updateConfig({ showHud: false });
      await saveConfig(false);
    }
    next();
  };

  return (
    <div className={styles.stepContent}>
      <h2 className={styles.stepTitle}>
        {t("onboarding.hud.stepLabel", { current: "5", total: "9" })}
        {" — "}
        {t("onboarding.hud.title")}
      </h2>
      <p className={styles.description}>{t("onboarding.hud.description")}</p>

      <div className={styles.hudPreview}>
        <span className={styles.hudPreviewLabel}>
          {t("onboarding.hud.previewLabel")}
        </span>
        <div className={styles.hudPreviewScene}>
          <div className={styles.hudPreviewButton}>
            <MicSimpleIcon width={20} height={20} />
          </div>
          <svg className={styles.hudPreviewCursor} width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M5 3l14 8-6.5 1.5L11 19z" fill="var(--color-text-tertiary)" stroke="var(--color-text-primary)" strokeWidth="1.5"/>
          </svg>
          <div className={styles.hudTextPanelDemo}>
            {/* eslint-disable-next-line i18next/no-literal-string */}
            <span>hello this is a live preview...</span>
          </div>
        </div>
      </div>

      <div className={styles.modelList}>
        {(["enable", "later"] as const).map((opt) => (
          <label
            key={opt}
            className={`${styles.modelRow} ${choice === opt ? styles.modelRowSelected : ""}`}
          >
            <input
              type="radio"
              name="hud-choice"
              checked={choice === opt}
              onChange={() => setChoice(opt)}
            />
            <div className={styles.modelInfo}>
              <span className={styles.modelName}>
                {t(`onboarding.hud.choice.${opt}`)}
                {opt === "enable" && (
                  <span className={styles.recommendedBadge}>{t("onboarding.model.recommended")}</span>
                )}
              </span>
              <span className={styles.modelDesc}>{t(`onboarding.hud.choice.${opt}Desc`)}</span>
            </div>
          </label>
        ))}
      </div>

      <div className={styles.hudButtonRow}>
        <button
          className={`${btn.btn} ${btn.primary} ${styles.ctaButton}`}
          onClick={handleContinue}
        >
          {t("onboarding.navigation.continue")}
        </button>
        <button
          className={`${btn.btn} ${btn.secondary}`}
          onClick={() => next()}
        >
          {t("onboarding.hud.choice.skip")}
        </button>
      </div>
    </div>
  );
}
