import { Show, createSignal } from "solid-js";

export interface AdoptionConsentModalProps {
  receiverDeviceName: string;
  sas: string;
  verifyMasterPassword(password: string): Promise<boolean>;
  onCancel(): void;
  onApprove(): Promise<void>;
}

export function AdoptionConsentModal(props: AdoptionConsentModalProps) {
  const [password, setPassword] = createSignal("");
  const [error, setError] = createSignal("");
  const [busy, setBusy] = createSignal(false);

  async function submit() {
    if (!password() || busy()) return;
    setBusy(true);
    setError("");
    try {
      const ok = await props.verifyMasterPassword(password());
      if (!ok) {
        setPassword("");
        setError("Incorrect password");
        queueMicrotask(() => document.getElementById("adoption-consent-password")?.focus());
        return;
      }
      await props.onApprove();
    } finally {
      setBusy(false);
    }
  }

  return (
    <div class="peach-adoption-consent-backdrop" role="presentation">
      <section
        class="peach-adoption-consent"
        role="dialog"
        aria-modal="true"
        aria-labelledby="adoption-consent-title"
      >
        <div class="peach-adoption-consent-icon" aria-hidden="true">!</div>
        <h2 id="adoption-consent-title">Share vault with new device?</h2>
        <p class="peach-adoption-consent-device">
          <strong>{props.receiverDeviceName}</strong> wants to join this vault.
        </p>
        <p class="peach-adoption-consent-warning">
          This copies your entire vault including all passwords and Pro to that device.
        </p>
        <div class="peach-adoption-consent-sas">
          <span>Confirm the code matches</span>
          <strong>{props.sas}</strong>
        </div>
        <label class="peach-label" for="adoption-consent-password">
          Enter your master password to approve
        </label>
        <input
          id="adoption-consent-password"
          class="peach-underline-input"
          type="password"
          autocomplete="current-password"
          value={password()}
          disabled={busy()}
          aria-invalid={error() ? "true" : "false"}
          aria-describedby={error() ? "adoption-consent-error" : undefined}
          onInput={(event) => {
            setPassword((event.target as HTMLInputElement).value);
            if (error()) setError("");
          }}
          onKeyDown={(event) => {
            if (event.key === "Enter") void submit();
            if (event.key === "Escape") props.onCancel();
          }}
        />
        <Show when={error()}>
          <p id="adoption-consent-error" class="peach-hint peach-hint-error">{error()}</p>
        </Show>
        <div class="peach-adoption-consent-actions">
          <button
            type="button"
            class="peach-btn peach-btn--ghost peach-btn--md"
            disabled={busy()}
            onClick={props.onCancel}
          >
            Cancel
          </button>
          <button
            type="button"
            class="peach-btn peach-btn--accent peach-btn--md peach-adoption-consent-share"
            disabled={!password() || busy()}
            onClick={() => void submit()}
          >
            {busy() ? "Sharing..." : "Share vault ->"}
          </button>
        </div>
      </section>
    </div>
  );
}