import { html, render, useEffect, useRef, useState } from './vendor/htm-preact.js';
import { t } from './i18n.js';

/**
 * Ask why a file is being reported, drawn by the page like `ask.js`.
 *
 * Resolves `{ reason, detail }`, or null when cancelled. The reasons are the
 * hub's own closed list (api/moderation.py `ReportRequest`), and the detail is
 * bounded to what the hub keeps (256 characters).
 */

const REASONS = ['illegal', 'spam', 'copyright', 'other'];

function ReportDialog({ name, onDone }) {
  const [reason, setReason] = useState('illegal');
  const [detail, setDetail] = useState('');
  const firstRef = useRef(null);
  useEffect(() => { if (firstRef.current) firstRef.current.focus(); }, []);

  return html`
    <div class="video-overlay" onClick=${(e) => {
      if (e.target.classList.contains('video-overlay')) onDone(null);
    }}>
      <form class="music-detail playlist-modal" role="dialog" aria-modal="true"
        onKeyDown=${(e) => { if (e.key === 'Escape') { e.preventDefault(); onDone(null); } }}
        onSubmit=${(e) => {
          e.preventDefault();
          onDone({ reason, detail: detail.trim() || null });
        }}>
        <div class="playlist-modal-body">
          <div class="ask-message"><strong>${t('report.title')}</strong></div>
          <div class="ask-message file-name">${name}</div>
          <p class="settings-hint">${t('report.hint')}</p>
          <select ref=${firstRef} value=${reason}
            onChange=${(e) => setReason(e.target.value)}>
            ${REASONS.map((r) => html`
              <option key=${r} value=${r}>${t('report.reason_' + r)}</option>`)}
          </select>
          <textarea maxlength="256" placeholder=${t('report.detail_placeholder')}
            value=${detail} onInput=${(e) => setDetail(e.target.value)} />
          <div class="playlist-modal-actions">
            <button type="button" class="tb-btn" onClick=${() => onDone(null)}>
              ${t('dialog.cancel')}</button>
            <button type="submit" class="admin-btn">${t('report.send')}</button>
          </div>
        </div>
      </form>
    </div>
  `;
}

export function askReport(name) {
  return new Promise((resolve) => {
    const host = document.createElement('div');
    document.body.appendChild(host);
    const previous = document.activeElement;
    let settled = false;
    const onDone = (value) => {
      if (settled) return;
      settled = true;
      render(null, host);
      host.remove();
      if (previous && previous.isConnected && typeof previous.focus === 'function') {
        previous.focus();
      }
      resolve(value);
    };
    render(html`<${ReportDialog} name=${String(name)} onDone=${onDone} />`, host);
  });
}