/* global React, API, useApp */
const { useState, useEffect, useCallback } = React;

const fmtDate = v => v ? new Date(v).toLocaleDateString('nl-NL', { day:'numeric', month:'short', year:'numeric' }) : '—';

const PLATFORMS = ['linkedin', 'twitter', 'instagram', 'other'];

/* ── Link modal — paste the post URL ── */
function LinkModal({ post, onSave, onClose }) {
  const [url, setUrl]   = useState(post?.url || '');
  const [busy, setBusy] = useState(false);
  const { toast } = useApp();

  async function save() {
    if (!url.trim()) return;
    setBusy(true);
    try {
      await API.put(`/social/${post.id}`, { url: url.trim() });
      toast('Post linked');
      onSave();
    } catch (e) { toast(e.error || 'Error', 'error'); }
    finally { setBusy(false); }
  }

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{ maxWidth: 480 }}>
        <div className="modal-head">
          <span className="modal-title">Link LinkedIn post</span>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label className="field-label">Post URL</label>
            <input
              className="field-input"
              type="url"
              placeholder="https://www.linkedin.com/feed/update/urn:li:activity:…"
              value={url}
              onChange={e => setUrl(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && save()}
              autoFocus
            />
            <div style={{ marginTop: 6, fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-subtle)' }}>
              Open the post on LinkedIn, copy the URL from the address bar, paste it here.
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn--primary" onClick={save} disabled={busy || !url.trim()}>Save link</button>
        </div>
      </div>
    </div>
  );
}

/* ── New post modal ── */
function NewPostModal({ onSave, onClose }) {
  const [form, setForm] = useState({ title: '', platform: 'linkedin', post_date: new Date().toISOString().split('T')[0], description: '' });
  const [busy, setBusy] = useState(false);
  const { toast } = useApp();
  const f = k => e => setForm(p => ({ ...p, [k]: e.target.value }));

  async function save() {
    if (!form.title.trim()) return;
    setBusy(true);
    try {
      await API.post('/social', form);
      toast('Post added');
      onSave();
    } catch (e) { toast(e.error || 'Error', 'error'); }
    finally { setBusy(false); }
  }

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="modal-head">
          <span className="modal-title">New social post</span>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          <div className="form-grid">
            <div className="field field--full">
              <label className="field-label">Title / description</label>
              <input className="field-input" value={form.title} onChange={f('title')} autoFocus />
            </div>
            <div className="field">
              <label className="field-label">Platform</label>
              <select className="field-select" value={form.platform} onChange={f('platform')}>
                {PLATFORMS.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">Post date</label>
              <input className="field-input" type="date" value={form.post_date} onChange={f('post_date')} />
            </div>
            <div className="field field--full">
              <label className="field-label">Notes (optional)</label>
              <textarea className="field-textarea" rows={2} value={form.description} onChange={f('description')} />
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn--primary" onClick={save} disabled={busy || !form.title.trim()}>Add post</button>
        </div>
      </div>
    </div>
  );
}

/* ── Main page ── */
function SocialPosts() {
  const [posts, setPosts]   = useState([]);
  const [modal, setModal]   = useState(null); // { type: 'link'|'new', post? }
  const [busy, setBusy]     = useState(null); // id of post being reset
  const { toast } = useApp();

  const load = useCallback(() => {
    API.get('/social').then(setPosts).catch(() => {});
  }, []);

  useEffect(() => { load(); }, [load]);

  async function reset(post) {
    if (!confirm(`Remove the LinkedIn link from "${post.title}"? The post record stays, only the URL is cleared.`)) return;
    setBusy(post.id);
    try {
      await API.put(`/social/${post.id}`, { url: null });
      toast('Link cleared — slot ready to re-link');
      load();
    } catch (e) { toast(e.error || 'Error', 'error'); }
    finally { setBusy(null); }
  }

  async function del(post) {
    if (!confirm(`Delete "${post.title}"?`)) return;
    await API.del(`/social/${post.id}`).catch(e => toast(e.error || 'Error', 'error'));
    toast('Deleted');
    load();
  }

  const published = posts.filter(p => p.status === 'published');
  const pending   = posts.filter(p => p.status !== 'published');

  function PostRow({ post }) {
    const isPublished = post.status === 'published';
    const isBusy = busy === post.id;
    return (
      <tr>
        <td>
          <div style={{ fontWeight: 500 }}>{post.title}</div>
          {post.description && <div style={{ fontSize: 11, color: 'var(--fg-subtle)', marginTop: 2 }}>{post.description}</div>}
        </td>
        <td><span className="badge">{post.platform}</span></td>
        <td className="mono">{fmtDate(post.post_date)}</td>
        <td>
          {isPublished
            ? <span style={{ color: 'var(--signal)', fontSize: 12, fontFamily: 'var(--font-mono)', fontWeight: 600 }}>published</span>
            : <span style={{ color: 'var(--fg-subtle)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>pending</span>}
        </td>
        <td>
          <div className="row-actions">
            {isPublished ? (
              <>
                <a
                  className="btn btn--ghost btn--sm"
                  href={post.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ fontSize: '0.72rem' }}
                >
                  View on LinkedIn ↗
                </a>
                <button
                  className="btn btn--ghost btn--sm"
                  style={{ fontSize: '0.72rem', color: 'var(--fg-subtle)' }}
                  disabled={isBusy}
                  onClick={() => reset(post)}
                  title="Remove the linked URL — use if you posted the wrong link"
                >
                  Reset
                </button>
              </>
            ) : (
              <button
                className="btn btn--primary btn--sm"
                style={{ fontSize: '0.72rem' }}
                onClick={() => setModal({ type: 'link', post })}
              >
                Link post
              </button>
            )}
            <button
              className="btn btn--danger btn--sm"
              onClick={() => del(post)}
            >
              Del
            </button>
          </div>
        </td>
      </tr>
    );
  }

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Social posts</h1>
          <div className="page-subtitle">LinkedIn and other channels — post history</div>
        </div>
        <div className="page-actions">
          <button className="btn btn--primary" onClick={() => setModal({ type: 'new' })}>
            + New post
          </button>
        </div>
      </div>

      {/* Pending — need a link */}
      {pending.length > 0 && (
        <div className="card" style={{ marginBottom: 24, borderColor: 'rgba(255,168,107,0.25)' }}>
          <div className="card-head">
            <span className="card-title">Waiting for link</span>
            <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-subtle)' }}>
              Click "Link post" after publishing manually
            </span>
          </div>
          <div className="table-wrap">
            <table className="data-table">
              <thead><tr><th>Post</th><th>Platform</th><th>Date</th><th>Status</th><th></th></tr></thead>
              <tbody>
                {pending.map(p => <PostRow key={p.id} post={p} />)}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Published */}
      <div className="card" style={{ margin: 0 }}>
        <div className="card-head">
          <span className="card-title">Published</span>
          <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-subtle)' }}>
            {published.length} post{published.length !== 1 ? 's' : ''}
          </span>
        </div>
        <div className="table-wrap">
          <table className="data-table">
            <thead><tr><th>Post</th><th>Platform</th><th>Date</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {published.length === 0 && (
                <tr><td colSpan={5}><div className="empty-state">No published posts yet</div></td></tr>
              )}
              {published.map(p => <PostRow key={p.id} post={p} />)}
            </tbody>
          </table>
        </div>
      </div>

      {modal?.type === 'link' && (
        <LinkModal
          post={modal.post}
          onSave={() => { load(); setModal(null); }}
          onClose={() => setModal(null)}
        />
      )}
      {modal?.type === 'new' && (
        <NewPostModal
          onSave={() => { load(); setModal(null); }}
          onClose={() => setModal(null)}
        />
      )}
    </div>
  );
}
window.SocialPosts = SocialPosts;