import { useEffect, useRef } from "react";

export function HelpDialog({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const dialog = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    const node = dialog.current;
    if (!node) return;
    if (open && !node.open) node.showModal();
    if (!open && node.open) node.close();
  }, [open]);
  return (
    <dialog
      ref={dialog}
      className="help-dialog"
      onClose={onClose}
      onCancel={onClose}
      aria-labelledby="help-title"
    >
      <div className="dialog-heading">
        <div>
          <p className="eyebrow">Local-first help</p>
          <h2 id="help-title">About Archive Tools</h2>
        </div>
        <button type="button" onClick={onClose} aria-label="Close help">
          ×
        </button>
      </div>
      <div className="help-copy">
        <p>
          Inspect ZIP/ZIP64, TAR/USTAR/PAX, gzip and tar.gz files without
          uploading them.
        </p>
        <h3>Safe repackaging</h3>
        <p>
          Select regular entries and Archive Tools verifies their content before
          placing it in a newly created ZIP. It never restores archive paths
          directly onto your filesystem.
        </p>
        <h3>Intentional boundaries</h3>
        <p>
          Encryption, split ZIPs, nested archive expansion, GNU TAR extensions,
          symlinks, hardlinks, device nodes and FIFOs are unsupported. Unsafe
          paths, duplicates, excessive sizes and suspicious compression ratios
          are blocked.
        </p>
        <h3>Previews and comparison</h3>
        <p>
          Plain UTF-8 text, bounded hexadecimal data and static JPEG/PNG/WebP
          images can be previewed. Comparisons use normalized path, type,
          expanded size and CRC-32.
        </p>
        <h3>Deterministic creation</h3>
        <p>
          Creation sorts files by path and normalizes timestamps, ownership and
          permissions. ZIP compression is pinned to a fixed implementation and
          level.
        </p>
      </div>
    </dialog>
  );
}