import { useEffect, useRef } from 'react';
import applicationLicenseUrl from '../../LICENSE?url&no-inline';
import dejavuFontLicenseUrl from '../../LICENSES/DEJAVU_FONTS.txt?url&no-inline';
import ffmpegWasmLicenseUrl from '../../LICENSES/ffmpeg.wasm-MIT.txt?url&no-inline';
import gplLicenseUrl from '../../LICENSES/GPL-2.0-or-later.txt?url&no-inline';
import licenseStatusUrl from '../../LICENSES/README.md?url&no-inline';
import sourceRecordUrl from '../../SOURCE.md?url&no-inline';
import thirdPartyNoticesUrl from '../../THIRD_PARTY_NOTICES.md?url&no-inline';
import {
  APP_VERSION,
  FFMPEG_CORE_BUILD_ID,
  FFMPEG_ENGINE_VERSION,
  FFMPEG_UTIL_VERSION,
  FFMPEG_WRAPPER_VERSION,
} from '../version';
import { Icon } from './Icon';

export interface HelpDialogProps {
  open: boolean;
  onClose: () => void;
}

export function HelpDialog({ open, onClose }: HelpDialogProps) {
  const dialog = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const element = dialog.current;
    if (!element) return;
    if (open && !element.open) element.showModal();
    if (!open && element.open) element.close();
  }, [open]);

  return (
    <dialog
      ref={dialog}
      className="modal"
      aria-labelledby="help-title"
      onClose={onClose}
      onClick={(event) => {
        if (event.target === event.currentTarget) onClose();
      }}
    >
      <div className="modal__panel">
        <header>
          <div>
            <p className="eyebrow">Local media studio</p>
            <h2 id="help-title">Audio & Video Tools</h2>
          </div>
          <button
            className="icon-action"
            type="button"
            aria-label="Close help"
            onClick={onClose}
          >
            <Icon name="cancel" />
          </button>
        </header>
        <div className="help-grid">
          <section>
            <span className="step-number">1</span>
            <h3>Add media</h3>
            <p>
              Pick or drop local files. The browser gives FFmpeg direct,
              read-only access when WORKERFS is available. If it must use the
              bounded memory-copy fallback, the job log reports the exact copied
              byte count.
            </p>
          </section>
          <section>
            <span className="step-number">2</span>
            <h3>Choose an operation</h3>
            <p>
              Quick Convert produces one output. Edit arranges non-destructive
              clips on a sequential timeline.
            </p>
          </section>
          <section>
            <span className="step-number">3</span>
            <h3>Export locally</h3>
            <p>
              The FFmpeg WebAssembly core runs here. Source media is never
              uploaded and the result is saved by your browser.
            </p>
          </section>
        </div>
        <section className="about-licenses" aria-labelledby="licenses-title">
          <header>
            <div>
              <p className="eyebrow">Versions, source and legal context</p>
              <h3 id="licenses-title">About &amp; licences</h3>
            </div>
            <span>av-tools {APP_VERSION}</span>
          </header>
          <dl className="about-version-grid">
            <div>
              <dt>FFmpeg engine</dt>
              <dd>{FFMPEG_ENGINE_VERSION}</dd>
            </div>
            <div>
              <dt>ffmpeg.wasm wrapper</dt>
              <dd>{FFMPEG_WRAPPER_VERSION}</dd>
            </div>
            <div>
              <dt>FFmpeg WASM cores</dt>
              <dd>{FFMPEG_CORE_BUILD_ID} · ST &amp; MT</dd>
            </div>
            <div>
              <dt>ffmpeg.wasm utilities</dt>
              <dd>{FFMPEG_UTIL_VERSION}</dd>
            </div>
          </dl>
          <div className="about-license-grid">
            <section>
              <h4>Application licence</h4>
              <p>
                <strong>
                  Copyright © 2026 Albrecht Degering. GPL-3.0-or-later.
                </strong>{' '}
                This program comes with absolutely no warranty. You may
                redistribute and modify it under GPL version 3 or, at your
                option, a later version. Third-party components retain their own
                notices and terms.
              </p>
              <div className="about-link-list">
                <a
                  href={applicationLicenseUrl}
                  target="_blank"
                  rel="noreferrer"
                >
                  Application GPL
                </a>
                <a href={licenseStatusUrl} target="_blank" rel="noreferrer">
                  Licence guide
                </a>
                <a href={sourceRecordUrl} target="_blank" rel="noreferrer">
                  Source &amp; reproducibility record
                </a>
              </div>
            </section>
            <section>
              <h4>Bundled runtime notices</h4>
              <ul>
                <li>
                  ffmpeg.wasm wrapper and utilities — MIT
                  <a
                    href={ffmpegWasmLicenseUrl}
                    target="_blank"
                    rel="noreferrer"
                  >
                    MIT text
                  </a>
                </li>
                <li>
                  FFmpeg single- and multithread cores — package declares
                  GPL-2.0-or-later
                  <a href={gplLicenseUrl} target="_blank" rel="noreferrer">
                    GPL text
                  </a>
                </li>
                <li>
                  DejaVu Sans 2.37 — Bitstream Vera and Arev font terms
                  <a
                    href={dejavuFontLicenseUrl}
                    target="_blank"
                    rel="noreferrer"
                  >
                    Font licence
                  </a>
                </li>
                <li>
                  FFmpeg, linked codecs, Toolbox SDK, React and other runtime
                  packages retain their respective terms.
                  <a
                    href={thirdPartyNoticesUrl}
                    target="_blank"
                    rel="noreferrer"
                  >
                    Complete inventory
                  </a>
                </li>
              </ul>
            </section>
          </div>
        </section>
        <aside className="privacy-callout">
          <Icon name="check" />
          <div>
            <strong>Private by architecture</strong>
            <p>
              No backend, analytics, third-party scripts, remote fonts, or
              automatic remote media requests. Source files stay inside the
              browser session and are not persisted by the app; only regenerable
              derivatives may use local browser storage.
            </p>
          </div>
        </aside>
        <footer>
          <a
            href="https://git.add-ideas.de/lotobo/av-tools"
            target="_blank"
            rel="noreferrer"
          >
            View source
          </a>
          <button className="button button--primary" onClick={onClose}>
            Start working
          </button>
        </footer>
      </div>
    </dialog>
  );
}
