// DRAFT DESTINATION: src/popup/components/AdoptionConsentModal.tsx
// Phase 4: source-device consent modal for granting full vault adoption.

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

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("");
    const ok = await props.verifyMasterPassword(password());
    if (!ok) {
      setPassword("");
      setError("Incorrect password");
      setBusy(false);
      queueMicrotask(() => document.getElementById("adoption-consent-password")?.focus());
      return;
    }
    await props.onApprove();
    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">
          "{props.receiverDeviceName}" 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.replace(/(\d)(?=\d)/g, "$1 ")}</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()}
          onInput={(event) => setPassword((event.target as HTMLInputElement).value)}
          onKeyDown={(event) => {
            if (event.key === "Enter") void submit();
            if (event.key === "Escape") props.onCancel();
          }}
        />
        <Show when={error()}>
          <p 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>
  );
}

// DRAFT DESTINATION: src/popup/popup.css
// Add amber/warning styling. Keep it visually distinct from standard confirm.
export const ADOPTION_CONSENT_CSS = `
.peach-adoption-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 10, 5, 0.72);
}
.peach-adoption-consent {
  width: min(100%, 340px);
  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));
  border-radius: 8px;
  padding: 18px;
  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));
  color: var(--peach-t0);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}
.peach-adoption-consent-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f59e0b;
  color: #1f1304;
  font-weight: 800;
}
.peach-adoption-consent h2 {
  margin: 12px 0 8px;
  font-size: 1.22rem;
  line-height: 1.15;
}
.peach-adoption-consent-device,
.peach-adoption-consent-warning {
  margin: 0 0 12px;
  color: var(--peach-t1);
  line-height: 1.35;
}
.peach-adoption-consent-warning {
  color: #ffd79a;
}
.peach-adoption-consent-sas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
}
.peach-adoption-consent-sas strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.peach-adoption-consent-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.peach-adoption-consent-actions > button {
  flex: 1;
}
`;