import { For, Show, createSignal } from "solid-js";
import { PeachWordmark } from "../components/PeachMark";
import { RuneBackground } from "../components/RuneBackground";

interface OnboardingCard {
  headline: string;
  body: string[];
  warning: string | null;
}

const BASE_CARDS: OnboardingCard[] = [
  {
    headline: "Your passwords\nlive here.\nNowhere else.",
    body: [
      "No account. No server. No one but you can ever see your vault.",
      "Everything is encrypted on your device with a password only you know.",
    ],
    warning: null,
  },
  {
    headline: "Two keys.",
    body: [
      "Your master password is yours alone. Peach never sees it.",
      "If you forget it, your 12 recovery words can reset it from settings — save them somewhere safe.",
    ],
    warning: "Lose both and your vault cannot be opened.",
  },
  {
    headline: "Everything\nyou need.",
    body: [
      "Free includes passwords, cards, secure notes, two-factor codes, autofill, strong passwords, and breach checks.",
      "Pro adds encrypted sync, Peach Codex paper restore, passkeys, advanced vault health, canary entries, and duress tools.",
    ],
    warning: null,
  },
];

const CARDS: OnboardingCard[] = BASE_CARDS;

const CARD_EXIT_MS = 120;
const CARD_ENTER_GAP_MS = 60;

interface OnboardingProps {
  onComplete: () => void | Promise<void>;
  onRestore?: () => void | Promise<void>;
  onAdopt?: () => void | Promise<void>;
}

export function Onboarding(props: OnboardingProps) {
  const [card, setCard] = createSignal(0);
  const [exiting, setExiting] = createSignal(false);
  const [completing, setCompleting] = createSignal(false);

  async function advance() {
    if (exiting() || completing()) return;
    if (card() < CARDS.length - 1) {
      setExiting(true);
      window.setTimeout(() => {
        setCard((c) => c + 1);
        setExiting(false);
      }, CARD_EXIT_MS + CARD_ENTER_GAP_MS);
    } else {
      setCompleting(true);
      // Don't persist peach_onboarded here. App.tsx persists it only when a
      // vault actually exists — so a user who quits mid-vault-creation
      // returns to the start of onboarding instead of getting stranded on
      // the create-vault screen with no back path.
      window.setTimeout(() => {
        void props.onComplete();
      }, 200);
    }
  }

  function goBack() {
    if (exiting() || completing()) return;
    if (card() === 0) return;
    setExiting(true);
    window.setTimeout(() => {
      setCard((c) => c - 1);
      setExiting(false);
    }, CARD_EXIT_MS + CARD_ENTER_GAP_MS);
  }

  return (
    <section
      class="peach-screen peach-theme peach-onboarding"
      classList={{ "is-completing": completing() }}
    >
      <RuneBackground opacity={0.07} />

      <header class="peach-screen-header peach-onboarding-header">
        <PeachWordmark class="peach-wordmark-wrap" />
      </header>

      <div
        class="peach-onboarding-card"
        classList={{ "is-exiting": exiting() }}
        onClick={advance}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            advance();
          }
        }}
      >
        <h2 class="peach-onboarding-card-headline">
          {CARDS[card()]!.headline}
        </h2>
        <hr class="peach-onboarding-divider" />
        <For each={CARDS[card()]!.body}>
          {(para) => <p class="peach-onboarding-body">{para}</p>}
        </For>
        <Show when={CARDS[card()]!.warning}>
          <p class="peach-onboarding-warning">
            <span class="peach-onboarding-warning-icon" aria-hidden="true">⚠</span>
            <span>{CARDS[card()]!.warning}</span>
          </p>
        </Show>
        <Show when={card() === CARDS.length - 1}>
          <div class="peach-onboarding-choice-row">
            <button
              type="button"
              class="peach-onboarding-choice"
              onClick={(e) => {
                e.stopPropagation();
                void props.onRestore?.();
              }}
            >
              Restore from backup
            </button>
            <button
              type="button"
              class="peach-onboarding-choice peach-onboarding-choice--adopt"
              onClick={(e) => {
                e.stopPropagation();
                void props.onAdopt?.();
              }}
            >
              I already have Peach
            </button>
          </div>
        </Show>
      </div>

      <div class="peach-onboarding-nav">
        <Show when={card() > 0} fallback={<div class="peach-onboarding-back-spacer" />}>
          <button
            class="peach-onboarding-back"
            onClick={(e) => {
              e.stopPropagation();
              goBack();
            }}
            disabled={completing()}
          >
            ← back
          </button>
        </Show>
        <div class="peach-onboarding-dots" aria-hidden="true">
          <For each={CARDS}>
            {(_, i) => (
              <div
                class="peach-onboarding-dot"
                classList={{ "is-active": i() === card() }}
              />
            )}
          </For>
        </div>
        <button
          class="peach-onboarding-next"
          onClick={(e) => {
            e.stopPropagation();
            advance();
          }}
          disabled={completing()}
        >
          {card() === CARDS.length - 1 ? "Create vault" : "next →"}
        </button>
      </div>
    </section>
  );
}