import { Button } from "@/components/ui/button";
import { useSaveBar } from "@/hooks/useSaveBar";
import { useCompleteWizardMutation } from "@/store/api/toolsApi";
import { __, sprintf } from "@wordpress/i18n";
import { useState } from "react";
import { useNavigate } from "react-router";
import ShopPreview from "../buttons/components/ShopPreview";
import FieldsPreview from "../fields/components/FieldsPreview";
import WizardHeader from "./components/WizardHeader";
import LookStep from "./steps/LookStep";
import PlacementStep from "./steps/PlacementStep";
import RowsStep from "./steps/RowsStep";

const STEPS = [
  {
    label: __("Placement", "product-comparison-for-woocommerce"),
    title: __(
      "Where should shoppers compare?",
      "product-comparison-for-woocommerce",
    ),
    Body: PlacementStep,
    Aside: ShopPreview,
  },
  {
    label: __("Rows", "product-comparison-for-woocommerce"),
    title: __(
      "Which rows should the table show?",
      "product-comparison-for-woocommerce",
    ),
    Body: RowsStep,
    Aside: FieldsPreview,
  },
  {
    label: __("Look", "product-comparison-for-woocommerce"),
    title: __("How should it look?", "product-comparison-for-woocommerce"),
    Body: LookStep,
    Aside: ShopPreview,
  },
];

/**
 * First-run setup in three steps. Finish saves everything and marks setup
 * done; Skip keeps the defaults. Either way it leads to the General tab.
 */
const Wizard = () => {
  const [step, setStep] = useState(0);
  const { save, discard, saving } = useSaveBar();
  const [complete, { isLoading }] = useCompleteWizardMutation();
  const navigate = useNavigate();
  const { title, Body, Aside } = STEPS[step];
  const last = step === STEPS.length - 1;

  const finish = async (keep) => {
    if (keep) {
      await save();
    } else {
      discard();
    }
    await complete().unwrap();
    window.PCFW = { ...window.PCFW, wizard_done: true };
    navigate("/");
  };

  return (
    <div className="ino:flex ino:min-h-[calc(100vh-32px)] ino:flex-col">
      <WizardHeader
        steps={STEPS.map((s) => s.label)}
        current={step}
        onSkip={() => finish(false)}
      />
      <main className="ino:mx-auto ino:grid ino:w-full ino:max-w-5xl ino:flex-1 ino:grid-cols-[repeat(auto-fit,minmax(320px,1fr))] ino:items-start ino:gap-8 ino:px-8 ino:py-8">
        <div>
          <h1 className="ino:mt-0 ino:mb-2 ino:text-2xl ino:font-semibold">
            {title}
          </h1>
          <p className="ino:mt-0 ino:mb-6 ino:text-sm ino:text-muted-foreground">
            {__(
              "Everything is on by default, so the Compare button works the moment you finish. You can change any of this later.",
              "product-comparison-for-woocommerce",
            )}
          </p>
          <Body />
        </div>
        <Aside />
      </main>
      <footer className="ino:sticky ino:bottom-0 ino:border-t ino:border-border ino:bg-background/95 ino:px-8 ino:py-3 ino:backdrop-blur">
        <div className="ino:mx-auto ino:flex ino:max-w-5xl ino:items-center ino:justify-between ino:gap-3">
          <Button
            variant="outline"
            disabled={step === 0}
            onClick={() => setStep(step - 1)}
          >
            {__("Back", "product-comparison-for-woocommerce")}
          </Button>
          <span className="ino:text-sm ino:text-muted-foreground">
            {sprintf(
              /* translators: 1: step number, 2: number of steps */
              __("Step %1$d of %2$d", "product-comparison-for-woocommerce"),
              step + 1,
              STEPS.length,
            )}
          </span>
          {last ? (
            <Button onClick={() => finish(true)} disabled={saving || isLoading}>
              {__("Finish setup", "product-comparison-for-woocommerce")}
            </Button>
          ) : (
            <Button onClick={() => setStep(step + 1)}>
              {sprintf(
                /* translators: %s: next step name */
                __("Continue to %s", "product-comparison-for-woocommerce"),
                STEPS[step + 1].label.toLowerCase(),
              )}
            </Button>
          )}
        </div>
      </footer>
    </div>
  );
};

export default Wizard;