/* Redaktion / Moderator area — logged-in editors create project
   reports (title, category, text, images). Prototype only: the
   real auth + storage is wired in Lovable/Supabase (see HANDOFF). */
(function () {
  const { useState, useRef } = React;
  const Icon = window.Icon;
  const { Btn } = window;

  const Moderator = ({ lang, navigate }) => {
    const t = (v) => window.tr(lang, v);
    const cats = window.SITE.categories;
    const [authed, setAuthed] = useState(false);
    const [drafts, setDrafts] = useState([]);
    const [form, setForm] = useState({ title: '', cat: cats[0].id, place: '', year: String(new Date().getFullYear()), text: '' });
    const [imgs, setImgs] = useState([]);
    const [flash, setFlash] = useState(false);
    const fileRef = useRef(null);

    const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
    const onFiles = (files) => {
      const next = Array.from(files).slice(0, 6 - imgs.length).map((f) => ({ url: URL.createObjectURL(f), name: f.name }));
      setImgs((p) => p.concat(next));
    };
    const removeImg = (i) => setImgs((p) => p.filter((_, j) => j !== i));
    const publish = () => {
      if (!form.title.trim()) return;
      setDrafts((d) => [{ ...form, id: Date.now(), imgs: imgs.slice() }, ...d]);
      setForm({ title: '', cat: cats[0].id, place: '', year: form.year, text: '' });
      setImgs([]);
      setFlash(true); setTimeout(() => setFlash(false), 2600);
    };
    const catName = (id) => t((cats.find((c) => c.id === id) || {}).title);

    if (!authed) {
      return React.createElement('section', { className: 'section' },
        React.createElement('div', { className: 'container' },
          React.createElement('div', { className: 'login-card' },
            React.createElement('div', { className: 'login-card__icon' }, React.createElement(Icon, { name: 'lock', size: 24 })),
            React.createElement('h1', { className: 'display display--md' }, t({ de: 'Redaktion', en: 'Editor login' })),
            React.createElement('hr', { className: 'rule', style: { marginInline: 'auto' } }),
            React.createElement('p', { className: 'lead', style: { fontSize: 'var(--text-sm)', marginInline: 'auto', marginBottom: 'var(--space-5)' } },
              t({ de: 'Geschützter Bereich für Objektberichte. Anmeldung über E-Mail, Magic-Link oder Passkey (im finalen System).', en: 'Protected area for project reports. Sign in via e-mail, magic link or passkey (in the final system).' })),
            React.createElement('div', { className: 'field', style: { textAlign: 'left' } },
              React.createElement('label', null, 'E-Mail'),
              React.createElement('input', { className: 'input', placeholder: 'redaktion@inventions-einstein.de' })),
            React.createElement('div', { className: 'field', style: { textAlign: 'left' } },
              React.createElement('label', null, t({ de: 'Passwort', en: 'Password' })),
              React.createElement('input', { className: 'input', type: 'password', placeholder: '••••••••' })),
            React.createElement(Btn, { variant: 'primary', icon: 'lock', onClick: () => setAuthed(true), style: { width: '100%' } },
              t({ de: 'Anmelden', en: 'Sign in' })),
            React.createElement('p', { className: 'mod-note' }, t({ de: 'Demo — Anmeldung wird im finalen System aktiviert.', en: 'Demo — auth is enabled in the final system.' })))
        )
      );
    }

    return React.createElement('section', { className: 'section' },
      React.createElement('div', { className: 'container' },
        React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, marginBottom: 'var(--space-7)' } },
          React.createElement('div', null,
            React.createElement('p', { className: 'eyebrow' }, t({ de: 'Redaktion', en: 'Editor' })),
            React.createElement('h1', { className: 'display display--md', style: { marginTop: 10 } }, t({ de: 'Objektbericht anlegen', en: 'Create a project report' }))),
          React.createElement(Btn, { variant: 'ghost', size: 'sm', onClick: () => setAuthed(false) }, t({ de: 'Abmelden', en: 'Sign out' }))),

        flash ? React.createElement('div', { className: 'banner' },
          React.createElement(Icon, { name: 'check', size: 18 }),
          t({ de: 'Bericht gespeichert (lokale Vorschau). Im Live-System wird er veröffentlicht.', en: 'Report saved (local preview). It is published in the live system.' })) : null,

        React.createElement('div', { className: 'mod-shell' },
          /* form */
          React.createElement('div', { className: 'mod-panel' },
            React.createElement('div', { className: 'field' },
              React.createElement('label', null, t({ de: 'Titel', en: 'Title' })),
              React.createElement('input', { className: 'input', value: form.title, onChange: set('title'), placeholder: t({ de: 'z. B. Marktplatz mit großem Format', en: 'e.g. Market square, large format' }) })),
            React.createElement('div', { className: 'field' },
              React.createElement('label', null, t({ de: 'Kategorie', en: 'Category' })),
              React.createElement('select', { className: 'input select', value: form.cat, onChange: set('cat') },
                cats.map((c) => React.createElement('option', { key: c.id, value: c.id }, t(c.title))))),
            React.createElement('div', { style: { display: 'flex', gap: 12 } },
              React.createElement('div', { className: 'field', style: { flex: 1 } },
                React.createElement('label', null, t({ de: 'Ort', en: 'Place' })),
                React.createElement('input', { className: 'input', value: form.place, onChange: set('place'), placeholder: 'Aachen' })),
              React.createElement('div', { className: 'field', style: { width: 110 } },
                React.createElement('label', null, t({ de: 'Jahr', en: 'Year' })),
                React.createElement('input', { className: 'input', value: form.year, onChange: set('year'), maxLength: 4 }))),
            React.createElement('div', { className: 'field' },
              React.createElement('label', null, t({ de: 'Beschreibung', en: 'Description' })),
              React.createElement('textarea', { className: 'input', value: form.text, onChange: set('text'), placeholder: t({ de: 'Beschreiben Sie das Objekt …', en: 'Describe the project …' }) })),
            React.createElement('div', { className: 'field' },
              React.createElement('label', null, t({ de: 'Bilder', en: 'Images' })),
              React.createElement('div', { className: 'dropzone', onClick: () => fileRef.current && fileRef.current.click() },
                React.createElement(Icon, { name: 'image', size: 26, style: { color: 'var(--brand)' } }),
                React.createElement('p', { style: { margin: '8px 0 0', fontSize: 'var(--text-sm)' } }, t({ de: 'Bilder hierher ziehen oder auswählen', en: 'Drop images here or choose' }))),
              React.createElement('input', { ref: fileRef, type: 'file', accept: 'image/*', multiple: true, style: { display: 'none' }, onChange: (e) => onFiles(e.target.files) }),
              imgs.length ? React.createElement('div', { className: 'thumbs' },
                imgs.map((im, i) => React.createElement('div', { className: 'thumb', key: i },
                  React.createElement('img', { src: im.url, alt: im.name }),
                  React.createElement('button', { onClick: () => removeImg(i), 'aria-label': 'remove' }, React.createElement(Icon, { name: 'x', size: 12 }))))) : null),
            React.createElement(Btn, { variant: 'primary', icon: 'plus', onClick: publish, style: { width: '100%' } }, t({ de: 'Bericht veröffentlichen', en: 'Publish report' })),
            React.createElement('p', { className: 'mod-note' }, t({ de: 'Speichern, Versionierung & Freigabe laufen im finalen System über das Backend.', en: 'Saving, versioning & approval run via the backend in the final system.' }))
          ),

          /* live preview list */
          React.createElement('div', null,
            React.createElement('h2', { className: 'display display--md', style: { fontSize: 'var(--h3)', marginBottom: 'var(--space-5)' } }, t({ de: 'Vorschau', en: 'Preview' })),
            drafts.length === 0
              ? React.createElement('div', { style: { border: '2px dashed var(--border-default)', borderRadius: 'var(--radius-md)', padding: 'var(--space-9)', textAlign: 'center', color: 'var(--text-faint)' } },
                React.createElement(Icon, { name: 'edit', size: 28, style: { margin: '0 auto 12px' } }),
                React.createElement('p', { style: { margin: 0 } }, t({ de: 'Noch kein Bericht angelegt. Formular links ausfüllen.', en: 'No report yet. Fill in the form on the left.' })))
              : React.createElement('div', { className: 'report-grid', style: { gridTemplateColumns: 'repeat(2,1fr)' } },
                drafts.map((d) => React.createElement('article', { key: d.id, className: 'report' },
                  React.createElement('div', { className: 'report__img', style: !d.imgs.length ? { background: 'repeating-linear-gradient(135deg,var(--gray-100) 0 12px,var(--gray-50) 12px 24px)' } : null },
                    d.imgs.length ? React.createElement('img', { src: d.imgs[0].url, alt: d.title }) : null),
                  React.createElement('div', { className: 'report__body' },
                    React.createElement('p', { className: 'report__meta' }, React.createElement('span', null, d.place || '—'), React.createElement('span', null, d.year)),
                    React.createElement('h3', { className: 'report__title' }, d.title),
                    d.text ? React.createElement('p', { className: 'report__excerpt' }, d.text) : null,
                    React.createElement('span', { className: 'tag report__cat' }, catName(d.cat))))))
          )
        )
      )
    );
  };

  window.Moderator = Moderator;
})();