// Admin panel — markdown browser + editor + live preview.
// State lives in memory (simulating the /content/*.md filesystem).
// Changes persist to localStorage across reloads; in production, writes would save to disk.

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

function collectFiles() {
  const list = [];
  window.VELO_CONTENT.posts.forEach(p => list.push({ kind: 'post', id: p.id, ref: p, path: p.path, label: p.path.split('/').pop() }));
  window.VELO_CONTENT.episodes.forEach(e => list.push({ kind: 'episode', id: e.id, ref: e, path: `content/episodes/${e.id}.md`, label: `${e.id}.md` }));
  return list;
}

function AdminPanel({ onClose }) {
  const [files, setFiles] = useStateA(collectFiles);
  const [selected, setSelected] = useStateA(files[0].id);
  const current = files.find(f => f.id === selected);
  const [draft, setDraft] = useStateA(current.ref.md);
  const [toast, setToast] = useStateA(false);

  useEffectA(() => {
    setDraft(current.ref.md);
  }, [selected]);

  // load overrides from localStorage on mount
  useEffectA(() => {
    try {
      const overrides = JSON.parse(localStorage.getItem('velo-md-overrides') || '{}');
      [...window.VELO_CONTENT.posts, ...window.VELO_CONTENT.episodes].forEach(item => {
        if (overrides[item.id]) item.md = overrides[item.id];
      });
      setFiles(collectFiles());
      setDraft(files.find(f => f.id === selected).ref.md);
    } catch(e) {}
  }, []);

  const save = () => {
    current.ref.md = draft;
    try {
      const overrides = JSON.parse(localStorage.getItem('velo-md-overrides') || '{}');
      overrides[current.id] = draft;
      localStorage.setItem('velo-md-overrides', JSON.stringify(overrides));
    } catch(e) {}
    setToast(true);
    setTimeout(() => setToast(false), 2000);
    // notify the rest of the app
    window.dispatchEvent(new CustomEvent('velo-content-updated'));
  };

  const revert = () => {
    setDraft(current.ref.md);
  };

  const { meta, body } = useMemoA(() => parseMD(draft), [draft]);
  const previewHTML = useMemoA(() => renderMD(body), [body]);

  const posts = files.filter(f => f.kind === 'post');
  const eps = files.filter(f => f.kind === 'episode');

  return (
    <div className="admin">
      {toast && <div className="admin-saved-toast">Saved · {current.path}</div>}
      <div className="admin-head">
        <div>
          <div className="admin-title">Velo Health · Markdown Admin</div>
          <div className="admin-file">{current.path}</div>
        </div>
        <div style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: 'var(--muted)', letterSpacing: '0.08em' }}>
          Source of truth: /content/*.md · Changes persist locally
        </div>
        <div className="admin-actions">
          <button onClick={revert}>Revert</button>
          <button className="primary" onClick={save}>Save</button>
          <button className="close" onClick={onClose}>✕ Close</button>
        </div>
      </div>
      <div className="admin-main">
        <aside className="admin-side">
          <div className="admin-side-group">content / posts</div>
          {posts.map(f => (
            <div
              key={f.id}
              className={'admin-file-row' + (f.id === selected ? ' active' : '')}
              onClick={() => setSelected(f.id)}
            >
              <span>{f.label}</span>
              <span className="tag">.md</span>
            </div>
          ))}
          <div className="admin-side-group">content / episodes</div>
          {eps.map(f => (
            <div
              key={f.id}
              className={'admin-file-row' + (f.id === selected ? ' active' : '')}
              onClick={() => setSelected(f.id)}
            >
              <span>{f.label}</span>
              <span className="tag">.md</span>
            </div>
          ))}
          <div className="admin-new">+ New post (demo)</div>
        </aside>
        <div className="admin-edit">
          <textarea
            value={draft}
            onChange={e => setDraft(e.target.value)}
            spellCheck={false}
          />
        </div>
        <div className="admin-preview">
          <div className="preview-label">Live preview</div>
          <div className="preview-meta">
            {meta.category || meta.number ? (meta.category || `Episode ${meta.number}`) + ' · ' : ''}
            {meta.date}
          </div>
          <h1>{meta.title}</h1>
          <hr />
          <div dangerouslySetInnerHTML={{ __html: previewHTML }} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminPanel });