'use client';

import * as Icons from './Icons';
import { en } from '@/lib/i18n/locales/en';
import { LIGHTBOX_SHORTCUTS, shortcutDisplayKeys } from '@/lib/lightboxShortcuts';
import PageHeader from './PageHeader';

/**
 * The admin help section.
 *
 * It exists because parts of the portfolio have no control of their own. The
 * lightbox is the clearest case: its keys are deliberately unadvertised to
 * visitors, which also left the site owner with no way to learn they exist
 * (#473). This is where the owner finds out what their portfolio can do.
 *
 * Labels come from the English dictionary rather than being retyped, so what
 * this page promises is what a visitor is actually shown. The admin panel is
 * English-only, hence `en` directly.
 */
export default function HelpView() {
  return (
    <div className="settings-panel">
      <PageHeader
        kicker="System"
        title="Help"
        description="What your portfolio can do that has no button of its own."
      />

      <div className="settings-group">
        <div className="settings-group-head">
          <span className="settings-group-title">
            <Icons.IconFilm size={13} />
            Image viewer
          </span>
          <span className="settings-group-desc">
            Keys a visitor can press in the lightbox. There is deliberately no toolbar for these — a
            permanent control over a photograph costs every visitor something — but visitors can
            call up the same list with <kbd className="help-kbd">?</kbd> or{' '}
            <kbd className="help-kbd">H</kbd>.
          </span>
        </div>

        <dl className="help-shortcuts">
          {LIGHTBOX_SHORTCUTS.map((shortcut) => (
            <div key={shortcut.labelKey} className="help-shortcuts-row">
              <dt className="help-shortcuts-keys">
                {shortcutDisplayKeys(shortcut).map((key) => (
                  <kbd key={key} className="help-kbd">
                    {key}
                  </kbd>
                ))}
              </dt>
              <dd className="help-shortcuts-label">
                {en.lightbox[shortcut.labelKey]}
                {shortcut.note && <span className="help-shortcuts-note">{shortcut.note}</span>}
              </dd>
            </div>
          ))}
        </dl>
      </div>

      <div className="settings-group">
        <div className="settings-group-head">
          <span className="settings-group-title">
            <Icons.IconShieldCheck size={13} />
            Diagnostics
          </span>
          <span className="settings-group-desc">
            Checks the things that fail silently — a wrong proxy hop count, a deleted album ID, a
            plaintext password, an album Immich does not consider shared. Open it from the{' '}
            <strong>Diagnostics</strong> tab in the top bar; the status badge next to it still gives
            a quick read on whether anything needs attention right now.
          </span>
        </div>
      </div>
    </div>
  );
}