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

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: "One rule.",
    body: [
      "Your master password is yours alone. Peach cannot recover it. There is no reset.",
      "Choose something you will remember. Write it down somewhere safe.",
    ],
    warning: "If you forget it, your vault cannot be opened.",
  },
  {
    headline: "Everything\nyou need.",
    body: [
      "Passwords, passkeys, cards, secure notes, two-factor codes.",
      "Autofills on every site. Generates strong passwords. Detects breaches.",
      "Free forever. Pro adds sync, mobile, and passkeys.",
    ],
    warning: null,
  },
];

const CARDS: OnboardingCard[] = BASE_CARDS;

const CARD_EXIT_MS = 120;
const CARD_ENTER_GAP_MS = 60;

interface OnboardingProps {
  onComplete: () => 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);
      try {
        await storageSet("peach_onboarded", "true");
      } catch {
        // storage unavailable — still complete the flow
      }
      window.setTimeout(() => {
        void props.onComplete();
      }, 200);
    }
  }

  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>
      </div>

      <div class="peach-onboarding-nav">
        <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 ? "Get started →" : "next →"}
        </button>
      </div>
    </section>
  );
}