/* eslint-disable */
// admin-panel.jsx — Live in-page content editor

const ADMIN_REPO = 'nukedart/peterdziedzicfilms';
const ADMIN_PATH = 'site/content.json';
const ADMIN_KEY  = 'pdf_admin_token';

function AdminPanel({ content, onUpdate }) {
  const { useState: S, useEffect: E } = React;
  const [open, setOpen]         = S(false);
  const [authed, setAuthed]     = S(false);
  const [tok, setTok]           = S(() => localStorage.getItem(ADMIN_KEY) || '');
  const [tokInput, setTokInput] = S('');
  const [sha, setSha]           = S(null);
  const [saving, setSaving]     = S(false);
  const [msg, setMsg]           = S('');
  const [dirty, setDirty]       = S(false);
  const [tab, setTab]           = S('films');
  const [authErr, setAuthErr]   = S('');

  // Trigger is hidden from visitors — only visible to admins
  const [showTrigger, setShowTrigger] = S(() => {
    const hasToken = !!localStorage.getItem(ADMIN_KEY);
    const urlEdit  = new URLSearchParams(window.location.search).has('edit');
    return hasToken || urlEdit;
  });

  // Secret keyboard shortcut: press 'a' three times quickly to reveal trigger
  E(() => {
    const seq = [];
    const handler = (e) => {
      if (e.key.toLowerCase() !== 'a') { seq.length = 0; return; }
      seq.push(1);
      if (seq.length === 3) { setShowTrigger(true); seq.length = 0; }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  E(() => { if (tok) verify(tok); }, []);

  async function ghGet(t, path) {
    const r = await fetch('https://api.github.com' + path, {
      headers: { Authorization: 'token ' + t, Accept: 'application/vnd.github+json' }
    });
    if (!r.ok) throw new Error((await r.json()).message || r.statusText);
    return r.json();
  }

  async function verify(t) {
    try {
      await ghGet(t, '/repos/' + ADMIN_REPO);
      const data = await ghGet(t, '/repos/' + ADMIN_REPO + '/contents/' + ADMIN_PATH);
      setSha(data.sha);
      setTok(t);
      setAuthed(true);
      setShowTrigger(true);
      localStorage.setItem(ADMIN_KEY, t);
      setAuthErr('');
    } catch (e) {
      setAuthErr('Auth failed: ' + e.message);
      setAuthed(false);
    }
  }

  function update(fn) {
    onUpdate(fn);
    setDirty(true);
    setMsg('Unsaved changes');
  }

  async function save() {
    setSaving(true);
    setMsg('Saving...');
    const json = JSON.stringify(content, null, 2);
    const encoded = btoa(unescape(encodeURIComponent(json)));
    const body = { message: 'Update site content via admin panel', content: encoded };
    if (sha) body.sha = sha;
    try {
      const r = await fetch('https://api.github.com/repos/' + ADMIN_REPO + '/contents/' + ADMIN_PATH, {
        method: 'PUT',
        headers: { Authorization: 'token ' + tok, Accept: 'application/vnd.github+json', 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });
      if (!r.ok) throw new Error((await r.json()).message);
      const res = await r.json();
      setSha(res.content.sha);
      setDirty(false);
      setMsg('Saved · deploying (~30s)');
      setTimeout(() => setMsg('Live'), 35000);
    } catch (e) {
      setMsg('Error: ' + e.message);
    } finally {
      setSaving(false);
    }
  }

  const TABS = [
    { id: 'films', label: 'Films' },
    { id: 'testimonials', label: 'Testimonials' },
    { id: 'marquee', label: 'Marquee' },
    { id: 'packages', label: 'Packages' },
    { id: 'faqs', label: 'FAQs' },
    { id: 'settings', label: 'Settings' },
  ];

  return (
    <>
      {showTrigger && (
        <button className="ap-trigger" onClick={() => setOpen(o => !o)} title="Edit site content">
          ✏
        </button>
      )}

      {open && <div className="ap-backdrop" onClick={() => setOpen(false)} />}

      <div className={'ap-panel' + (open ? ' ap-open' : '')}>
        {!authed ? (
          <div className="ap-login">
            <div className="ap-login-logo">Peter Dziedzic Films</div>
            <div className="ap-login-title">Site Admin</div>
            <p className="ap-login-sub">
              Enter a GitHub Personal Access Token with <code>repo</code> scope to edit the site live.
            </p>
            <div className="ap-steps">
              1. github.com → Settings → Developer settings → Tokens (classic)<br />
              2. Generate token · check <strong>repo</strong> scope<br />
              3. Paste below
            </div>
            <div className="ap-field">
              <label className="ap-label">Personal Access Token</label>
              <input
                className="ap-input"
                type="password"
                placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
                value={tokInput}
                onChange={e => setTokInput(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && verify(tokInput)}
              />
            </div>
            {authErr && <div className="ap-error">{authErr}</div>}
            <button className="ap-btn-primary ap-full" onClick={() => { setAuthErr(''); verify(tokInput); }}>
              Sign In →
            </button>
          </div>
        ) : (
          <>
            <div className="ap-header">
              <div className="ap-header-left">
                <span className="ap-title">Edit Site</span>
                <span className={'ap-status' + (dirty ? ' ap-dirty' : '')}>{msg || 'Saved'}</span>
              </div>
              <div className="ap-header-right">
                <button className="ap-btn-primary" onClick={save} disabled={saving || !dirty}>
                  {saving ? 'Saving…' : 'Save & Deploy'}
                </button>
                <button className="ap-btn-ghost" onClick={() => setOpen(false)} title="Close">✕</button>
              </div>
            </div>

            <div className="ap-tabs">
              {TABS.map(t => (
                <button key={t.id} className={'ap-tab' + (tab === t.id ? ' ap-tab-active' : '')}
                        onClick={() => setTab(t.id)}>
                  {t.label}
                </button>
              ))}
            </div>

            <div className="ap-body">
              {tab === 'films'        && <FilmsEditor content={content} update={update} />}
              {tab === 'testimonials' && <TestimonialsEditor content={content} update={update} />}
              {tab === 'marquee'      && <MarqueeEditor content={content} update={update} />}
              {tab === 'packages'     && <PackagesEditor content={content} update={update} />}
              {tab === 'faqs'         && <FaqsEditor content={content} update={update} />}
              {tab === 'settings'     && <SettingsEditor content={content} update={update} />}
            </div>

            <div className="ap-footer">
              <button className="ap-btn-link" onClick={() => {
                localStorage.removeItem(ADMIN_KEY);
                setTok(''); setAuthed(false); setTokInput('');
                setShowTrigger(false); setOpen(false);
              }}>Sign out</button>
              <a className="ap-btn-link" href="admin.html" target="_blank">Full admin →</a>
            </div>
          </>
        )}
      </div>
    </>
  );
}

// ── Films ─────────────────────────────────────────────────────
function FilmsEditor({ content, update }) {
  const [openIdx, setOpenIdx] = React.useState(null);
  const films = content.films || [];

  const setFilm = (i, key, val) => update(c => {
    const f = [...c.films]; f[i] = { ...f[i], [key]: val }; return { ...c, films: f };
  });

  const addFilm = () => {
    update(c => ({ ...c, films: [...c.films, { id: Date.now(), couple: '', venue: '', location: '', season: '', tier: 'highlight', runtime: '', thumb: '', vimeoId: '' }] }));
    setOpenIdx(films.length);
  };

  const delFilm = (i) => {
    if (!confirm('Delete "' + (films[i].couple || 'this film') + '"?')) return;
    update(c => ({ ...c, films: c.films.filter((_, j) => j !== i) }));
    setOpenIdx(null);
  };

  return (
    <div>
      {films.map((f, i) => (
        <div key={f.id || i} className="ap-card">
          <div className="ap-card-header" onClick={() => setOpenIdx(openIdx === i ? null : i)}>
            <div className="ap-card-info">
              {f.thumb && <img src={f.thumb} className="ap-card-thumb" alt="" onError={e => e.target.style.display='none'} />}
              <div>
                <div className="ap-card-title">{f.couple || 'Untitled'}</div>
                <div className="ap-card-meta">
                  {f.venue}{f.venue && ' · '}<span className={'ap-badge ap-badge-' + (f.tier || 'highlight')}>{f.tier}</span>
                </div>
              </div>
            </div>
            <div className="ap-card-actions">
              <button className="ap-icon-btn" onClick={e => { e.stopPropagation(); delFilm(i); }}>🗑</button>
              <span className="ap-chevron">{openIdx === i ? '▲' : '▼'}</span>
            </div>
          </div>
          {openIdx === i && (
            <div className="ap-card-body">
              <div className="ap-field-row">
                <ApField label="Couple" value={f.couple} onChange={v => setFilm(i,'couple',v)} />
                <ApField label="Season" value={f.season} onChange={v => setFilm(i,'season',v)} placeholder="Autumn 2025" />
              </div>
              <div className="ap-field-row">
                <ApField label="Venue" value={f.venue} onChange={v => setFilm(i,'venue',v)} />
                <ApField label="Location" value={f.location} onChange={v => setFilm(i,'location',v)} />
              </div>
              <div className="ap-field-row">
                <ApSelect label="Tier" value={f.tier} onChange={v => setFilm(i,'tier',v)}
                  options={[['highlight','Highlight'],['feature','Feature'],['documentary','Documentary']]} />
                <ApField label="Runtime" value={f.runtime} onChange={v => setFilm(i,'runtime',v)} placeholder="4 min" />
              </div>
              <ApField label="Thumbnail URL" value={f.thumb} onChange={v => setFilm(i,'thumb',v)} placeholder="https://images.unsplash.com/..." />
              <ApField label="Vimeo ID" value={f.vimeoId} onChange={v => setFilm(i,'vimeoId',v)} placeholder="e.g. 123456789" />
              <div className="ap-hint">Find in your Vimeo URL: vimeo.com/<strong>123456789</strong></div>
            </div>
          )}
        </div>
      ))}
      <button className="ap-add-btn" onClick={addFilm}>+ Add Film</button>
    </div>
  );
}

// ── Testimonials ──────────────────────────────────────────────
function TestimonialsEditor({ content, update }) {
  const items = content.testimonials || [];
  const set = (i, key, val) => update(c => {
    const t = [...c.testimonials]; t[i] = { ...t[i], [key]: val }; return { ...c, testimonials: t };
  });
  return (
    <div>
      {items.map((t, i) => (
        <div key={i} className="ap-card ap-card-open">
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:10 }}>
            <span className="ap-card-meta">Testimonial {i+1}</span>
            <button className="ap-icon-btn" onClick={() => {
              if (!confirm('Delete?')) return;
              update(c => ({ ...c, testimonials: c.testimonials.filter((_,j) => j!==i) }));
            }}>🗑</button>
          </div>
          <ApTextarea label="Quote" value={t.quote} onChange={v => set(i,'quote',v)} rows={3} />
          <ApField label="Attribution" value={t.author} onChange={v => set(i,'author',v)} placeholder="— First + Last" />
        </div>
      ))}
      <button className="ap-add-btn" onClick={() => update(c => ({ ...c, testimonials: [...(c.testimonials||[]), { quote:'', author:'—' }] }))}>
        + Add Testimonial
      </button>
    </div>
  );
}

// ── Marquee ───────────────────────────────────────────────────
function MarqueeEditor({ content, update }) {
  const items = content.marquee || [];
  const set = (i, key, val) => update(c => {
    const m = [...c.marquee]; m[i] = { ...m[i], [key]: val }; return { ...c, marquee: m };
  });
  return (
    <div>
      {items.map((item, i) => (
        <div key={i} className="ap-card ap-card-open">
          <div style={{ display:'flex', gap:8, alignItems:'flex-end' }}>
            <div style={{ flex:1 }}><ApField label="Label" value={item.label} onChange={v => set(i,'label',v)} placeholder="Now Booking" /></div>
            <div style={{ flex:1.3 }}><ApField label="Value" value={item.value} onChange={v => set(i,'value',v)} placeholder="Autumn 2026" /></div>
            <button className="ap-icon-btn" style={{ marginBottom:14 }} onClick={() =>
              update(c => ({ ...c, marquee: c.marquee.filter((_,j) => j!==i) }))}>🗑</button>
          </div>
        </div>
      ))}
      <button className="ap-add-btn" onClick={() => update(c => ({ ...c, marquee: [...(c.marquee||[]), { label:'Now Booking', value:'' }] }))}>
        + Add Item
      </button>
    </div>
  );
}

// ── Packages ──────────────────────────────────────────────────
function PackagesEditor({ content, update }) {
  const pkgs = content.packages || [];
  const setPkg = (i, key, val) => update(c => {
    const p = [...c.packages]; p[i] = { ...p[i], [key]: val }; return { ...c, packages: p };
  });
  const setLine = (i, j, val) => update(c => {
    const p = [...c.packages];
    const inc = [...p[i].includes]; inc[j] = val;
    p[i] = { ...p[i], includes: inc };
    return { ...c, packages: p };
  });
  return (
    <div>
      {pkgs.map((p, i) => (
        <div key={i} className="ap-card ap-card-open" style={{ marginBottom:12 }}>
          <div className="ap-card-title" style={{ marginBottom:12 }}>{p.name}</div>
          <div className="ap-field-row">
            <ApField label="Name" value={p.name} onChange={v => setPkg(i,'name',v)} />
            <ApField label="Price" value={p.price} onChange={v => setPkg(i,'price',v)} placeholder="$3,800" />
          </div>
          <div className="ap-field-row">
            <ApField label="Tagline" value={p.tagline} onChange={v => setPkg(i,'tagline',v)} />
            <ApField label="Badge" value={p.badge||''} onChange={v => setPkg(i,'badge',v||null)} placeholder="Most Popular" />
          </div>
          <div className="ap-field">
            <label className="ap-label">What's Included</label>
            {(p.includes||[]).map((line,j) => (
              <div key={j} style={{ display:'flex', gap:6, marginBottom:6 }}>
                <input className="ap-input" value={line} onChange={e => setLine(i,j,e.target.value)} style={{ flex:1 }} />
                <button className="ap-icon-btn" onClick={() => update(c => {
                  const pkgs = [...c.packages]; pkgs[i].includes = pkgs[i].includes.filter((_,k) => k!==j);
                  return { ...c, packages: pkgs };
                })}>×</button>
              </div>
            ))}
            <button className="ap-add-inline" onClick={() => update(c => {
              const pkgs = [...c.packages]; pkgs[i].includes = [...(pkgs[i].includes||[]), ''];
              return { ...c, packages: pkgs };
            })}>+ Add line item</button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── FAQs ──────────────────────────────────────────────────────
function FaqsEditor({ content, update }) {
  const faqs = content.faqs || [];
  const set = (i, key, val) => update(c => {
    const f = [...c.faqs]; f[i] = { ...f[i], [key]: val }; return { ...c, faqs: f };
  });
  return (
    <div>
      {faqs.map((f, i) => (
        <div key={i} className="ap-card ap-card-open">
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
            <span className="ap-card-meta">FAQ {i+1}</span>
            <button className="ap-icon-btn" onClick={() => {
              if (!confirm('Delete?')) return;
              update(c => ({ ...c, faqs: c.faqs.filter((_,j) => j!==i) }));
            }}>🗑</button>
          </div>
          <ApField label="Question" value={f.q} onChange={v => set(i,'q',v)} />
          <ApTextarea label="Answer" value={f.a} onChange={v => set(i,'a',v)} rows={3} />
        </div>
      ))}
      <button className="ap-add-btn" onClick={() => update(c => ({ ...c, faqs: [...(c.faqs||[]), { q:'', a:'' }] }))}>
        + Add FAQ
      </button>
    </div>
  );
}

// ── Settings ──────────────────────────────────────────────────
function SettingsEditor({ content, update }) {
  const s = content.settings || {};
  const set = (key, val) => update(c => ({ ...c, settings: { ...c.settings, [key]: val } }));
  return (
    <div>
      <div className="ap-card ap-card-open" style={{ marginBottom:12 }}>
        <div className="ap-card-title" style={{ marginBottom:12 }}>Global Toggles</div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'8px 0' }}>
          <div>
            <div style={{ fontSize:13 }}>Show Prices</div>
            <div className="ap-hint">Display $ amounts on Investment page</div>
          </div>
          <button className={'ap-toggle' + (s.showPrices ? ' ap-toggle-on' : '')} onClick={() => set('showPrices', !s.showPrices)}>
            <i />
          </button>
        </div>
      </div>

      <div className="ap-card ap-card-open" style={{ marginBottom:12 }}>
        <div className="ap-card-title" style={{ marginBottom:12 }}>Images</div>
        <ApField label="Hero Image URL" value={s.heroImage||''} onChange={v => set('heroImage',v)} placeholder="https://..." />
        <ApField label="Portrait Image URL" value={s.portraitImage||''} onChange={v => set('portraitImage',v)} placeholder="https://..." />
      </div>

      <div className="ap-card ap-card-open" style={{ marginBottom:12 }}>
        <div className="ap-card-title" style={{ marginBottom:12 }}>Contact & Links</div>
        <div className="ap-field-row">
          <ApField label="Email" value={s.email||''} onChange={v => set('email',v)} />
          <ApField label="Instagram URL" value={s.instagramUrl||''} onChange={v => set('instagramUrl',v)} />
        </div>
        <ApField label="Booking Window" value={s.bookingWindow||''} onChange={v => set('bookingWindow',v)} placeholder="Currently accepting 2026 & 2027 dates" />
      </div>

      <div className="ap-card ap-card-open">
        <div className="ap-card-title" style={{ marginBottom:6 }}>Form Submissions</div>
        <div className="ap-hint" style={{ marginBottom:10 }}>
          Create a free form at <strong>formspree.io</strong> then paste the Form ID below to receive inquiry emails.
        </div>
        <ApField label="Formspree Form ID" value={s.formspreeId||''} onChange={v => set('formspreeId',v)} placeholder="xabcdefg" />
      </div>
    </div>
  );
}

// ── Atoms ─────────────────────────────────────────────────────
function ApField({ label, value, onChange, placeholder, type='text' }) {
  return (
    <div className="ap-field">
      {label && <label className="ap-label">{label}</label>}
      <input className="ap-input" type={type} value={value||''} placeholder={placeholder||''}
             onChange={e => onChange(e.target.value)} />
    </div>
  );
}
function ApTextarea({ label, value, onChange, rows=3 }) {
  return (
    <div className="ap-field">
      {label && <label className="ap-label">{label}</label>}
      <textarea className="ap-input" rows={rows} value={value||''} onChange={e => onChange(e.target.value)} />
    </div>
  );
}
function ApSelect({ label, value, onChange, options }) {
  return (
    <div className="ap-field">
      {label && <label className="ap-label">{label}</label>}
      <select className="ap-input" value={value||''} onChange={e => onChange(e.target.value)}>
        {options.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
      </select>
    </div>
  );
}

Object.assign(window, { AdminPanel });