import { useEffect, useRef } from "react";

export function HelpDialog({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const ref = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    const dialog = ref.current;
    if (!dialog) return;
    if (open && !dialog.open) dialog.showModal();
    if (!open && dialog.open) dialog.close();
  }, [open]);
  return (
    <dialog ref={ref} className="tool-dialog" onClose={onClose}>
      <div className="dialog-heading">
        <div>
          <p className="eyebrow">Local authentication laboratory</p>
          <h2>OTP & Passkey Tools help</h2>
        </div>
        <button
          className="icon-button"
          type="button"
          aria-label="Close help"
          onClick={onClose}
        >
          ×
        </button>
      </div>
      <div className="dialog-body prose">
        <h3>Handle secrets deliberately</h3>
        <p>
          OTP seeds are equivalent to a second-factor credential. This app keeps
          them in memory only, masks them by default and clears them on reload.
          Plain URI/CSV exports are explicit and unencrypted. The encrypted
          backup option authenticates its contents with AES-GCM and a password;
          it is still not a recovery service or persistent browser vault.
        </p>
        <h3>OTP clock and counters</h3>
        <p>
          TOTP is computed from this device’s clock. A rejected valid-looking
          value commonly means clock drift, a different T0/period, or the wrong
          hash/digit profile. The timeline and drift finder are diagnostics;
          HOTP counters must remain synchronized.
        </p>
        <p>
          Migration QR codes and plaintext exports reveal OTP seeds. Aegis and
          PSKC password decryption happens locally. Collection snapshots omit
          seeds but include stable fingerprints that can correlate accounts.
          Camera scanning starts only after your click and stops automatically.
        </p>
        <h3>Passkey inspection</h3>
        <p>
          Inspection is offline. Verification is layered: client-data
          expectations, RP ID hash, authenticator flags, counter and
          cryptographic signature are reported separately. Attestation signature
          validity, metadata status and trust are distinct results. Metadata is
          imported explicitly and never fetched silently.
        </p>
        <h3>Live ceremonies</h3>
        <p>
          WebAuthn credentials belong to an exact RP ID. Live tests are enabled
          only on localhost or the dedicated authentication hostname. The shared
          Toolbox origin remains inspect-only so unrelated apps do not share its
          credential namespace.
        </p>
        <p>
          Extension results are browser/authenticator capabilities, not security
          guarantees. Redacted ceremony traces retain signed evidence for replay
          and may therefore still contain correlatable identifiers.
        </p>
        <p>
          No authentication material, file, telemetry or request leaves this
          tab.
        </p>
      </div>
      <div className="dialog-actions">
        <a
          className="secondary-button"
          href="https://git.add-ideas.de/lotobo/auth-tools"
          target="_blank"
          rel="noreferrer"
        >
          Source and issues
        </a>
        <button className="primary-button" type="button" onClick={onClose}>
          Done
        </button>
      </div>
    </dialog>
  );
}