import { createSignal, Show, Switch, Match } from "solid-js";
import { sendMessage } from "../App";
import { RuneCanvas } from "../components/RuneCanvas";

interface PanicProps {
  onCancel: () => void;
  onOpenExport: () => void;
  onDestroyed: () => void | Promise<void>;
}

// Pseudo-random spread of PeachScript PUA codepoints for the Step 3 backdrop.
const PANIC_RUNES = Array.from({ length: 80 }, (_, i) =>
  String.fromCodePoint(0xe000 + (i * 19 + 7) % 256)
).join("");

function OverlayHeader(props: { title: string; onBack: () => void }) {
  return (
    <div class="peach-overlay-header">
      <button
        class="peach-btn peach-btn--ghost peach-btn--sm peach-icon-btn"
        onClick={props.onBack}
        aria-label="Back"
      >
        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 1L1 6L6 11" />
        </svg>
      </button>
      <span class="peach-overlay-title">{props.title}</span>
      <div class="peach-overlay-spacer"></div>
    </div>
  );
}

export function PanicView(props: PanicProps) {
  const [step, setStep] = createSignal<1 | 2 | 3>(1);
  const [confirmText, setConfirmText] = createSignal("");
  const [destroying, setDestroying] = createSignal(false);

  const canDestroy = () => confirmText() === "DESTROY";

  async function handleDestroy() {
    if (destroying()) return;
    setDestroying(true);
    const res = await sendMessage({ type: "DESTROY_VAULT" });
    if (!res?.ok) {
      setDestroying(false);
      return;
    }
    await props.onDestroyed();
  }

  return (
    <div class="peach-overlay-view ov-enter-right" style="display:flex;flex-direction:column">
      <Switch>
        <Match when={step() === 1}>
          <OverlayHeader title="danger zone" onBack={props.onCancel} />
          <div class="peach-panic">
            <h2 class="peach-panic-title">Before you destroy your vault</h2>
            <p class="peach-panic-body">
              Once destroyed, your vault cannot be recovered. Ever. There is no
              undo, no support ticket, no way back.
            </p>
            <p class="peach-panic-body">
              If you haven't already, export your vault now. It takes ten
              seconds and you'll be glad you did.
            </p>
            <button
              class="peach-panic-button peach-panic-button--primary"
              onClick={() => props.onOpenExport()}
            >
              Export my vault first
            </button>
            <div class="peach-panic-divider"></div>
            <p class="peach-panic-body">
              I have already exported my vault or I don't want to.
            </p>
            <button class="peach-panic-link" onClick={() => setStep(2)}>
              Continue to destruction →
            </button>
          </div>
        </Match>

        <Match when={step() === 2}>
          <div class="peach-panic peach-panic-step2">
            <span class="peach-panic-icon" aria-hidden="true">⚠</span>
            <h2 class="peach-panic-title peach-panic-title--severe">
              This will permanently destroy your vault.
            </h2>
            <p class="peach-panic-body peach-panic-body--severe">
              Every password, card, passkey, note, and setting will be wiped
              from this device. This cannot be undone.
            </p>
            <p class="peach-panic-confirm-label">Type DESTROY to confirm:</p>
            <input
              class="peach-panic-confirm-input"
              classList={{ "peach-panic-confirm-input--match": canDestroy() }}
              type="text"
              value={confirmText()}
              onInput={(e) => setConfirmText(e.currentTarget.value)}
              autocomplete="off"
              spellcheck={false}
              autocapitalize="off"
              aria-label="Type DESTROY to confirm"
            />
            <div class="peach-panic-actions">
              <button
                class="peach-panic-button peach-panic-button--danger"
                disabled={!canDestroy()}
                onClick={() => setStep(3)}
              >
                Yes, destroy my vault
              </button>
              <button
                class="peach-panic-button peach-panic-button--ghost"
                onClick={() => {
                  setConfirmText("");
                  props.onCancel();
                }}
              >
                Cancel — keep my vault
              </button>
            </div>
          </div>
        </Match>

        <Match when={step() === 3}>
          <div class="peach-panic peach-panic-step3">
            <div class="peach-panic-rune-bg" aria-hidden="true">
              <RuneCanvas runeString={PANIC_RUNES} width={320} height={480} />
            </div>
            <div class="peach-panic-bar">THIS IS YOUR LAST CHANCE</div>
            <p class="peach-panic-body peach-panic-body--final-intro">
              Your vault is about to be permanently destroyed.
            </p>
            <p class="peach-panic-body peach-panic-body--final">
              There is no recovery.
              <br />
              There is no support.
              <br />
              There is no undo.
            </p>
            <div class="peach-panic-divider"></div>
            <div class="peach-panic-actions">
              <button
                class="peach-panic-final-button"
                disabled={destroying()}
                onClick={() => void handleDestroy()}
              >
                {destroying() ? "Destroying…" : "Destroy my vault forever"}
              </button>
              <Show when={!destroying()}>
                <button
                  class="peach-panic-button peach-panic-button--ghost"
                  onClick={() => {
                    setConfirmText("");
                    setStep(1);
                  }}
                >
                  No — take me back
                </button>
              </Show>
            </div>
          </div>
        </Match>
      </Switch>
    </div>
  );
}