/* ============================================================
   share-panel.jsx — owner-side: create/manage reviewlinks
   ============================================================ */

function SharePanel() {
  const { currentDocId } = useApp();
  const [links, setLinks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [label, setLabel] = useState('');
  const [perm, setPerm] = useState('comment');
  const [expires, setExpires] = useState(''); // '' | '7' | '30' | '90'
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const [copiedId, setCopiedId] = useState(null);

  const hasSupabase = window.HAS_SUPABASE && currentDocId && currentDocId !== 'local';

  const reload = async () => {
    if (!hasSupabase) return;
    setLoading(true);
    try {
      const list = await listReviewLinks(currentDocId);
      setLinks(list);
    } catch (e) { setErr(e.message); }
    finally { setLoading(false); }
  };

  useEffect(() => { reload(); }, [currentDocId]);

  const create = async () => {
    if (!hasSupabase) return;
    setBusy(true); setErr(null);
    try {
      const days = expires ? parseInt(expires, 10) : null;
      await createReviewLink(currentDocId, {
        label: label.trim() || null,
        permissions: perm,
        expiresInDays: days,
      });
      setLabel('');
      await reload();
    } catch (e) { setErr(e.message || String(e)); }
    finally { setBusy(false); }
  };

  const copy = async (link) => {
    const url = reviewLinkUrl(link.token);
    try {
      await navigator.clipboard.writeText(url);
      setCopiedId(link.id);
      setTimeout(() => setCopiedId(null), 1800);
    } catch (e) {
      prompt('Kopieer deze link:', url);
    }
  };

  const revoke = async (id) => {
    if (!confirm('Link intrekken? Bestaande reviewers kunnen er dan niet meer bij.')) return;
    try { await revokeReviewLink(id); await reload(); }
    catch (e) { alert('Kon niet intrekken: ' + (e.message || e)); }
  };

  const del = async (id) => {
    if (!confirm('Definitief verwijderen?')) return;
    try { await deleteReviewLink(id); await reload(); }
    catch (e) { alert('Kon niet verwijderen: ' + (e.message || e)); }
  };

  if (!hasSupabase) {
    return (
      <div className="share-panel">
        <h4>Deel met reviewers</h4>
        <p className="share-hint">
          Reviewlinks zijn alleen beschikbaar als je bent ingelogd en het document
          in de cloud is opgeslagen.
        </p>
      </div>
    );
  }

  const active = links.filter(l => !l.revoked_at);
  const old    = links.filter(l =>  l.revoked_at);

  return (
    <div className="share-panel">
      <h4>Deel met reviewers</h4>
      <p className="share-hint">
        Maak een link die je kunt delen met interne collega's of externe partners.
        Zij hoeven niet in te loggen.
      </p>

      <div className="share-create">
        <input className="share-input"
               placeholder="Label (bv. 'RVO review')"
               value={label}
               onChange={e => setLabel(e.target.value)}/>
        <div className="share-create-row">
          <select className="share-select" value={perm} onChange={e => setPerm(e.target.value)}>
            <option value="view">Alleen lezen</option>
            <option value="comment">Commentaar plaatsen</option>
            <option value="suggest">Voorstellen + comments</option>
          </select>
          <select className="share-select" value={expires} onChange={e => setExpires(e.target.value)}>
            <option value="">Geen vervaldatum</option>
            <option value="7">Verloopt na 7 dagen</option>
            <option value="30">Verloopt na 30 dagen</option>
            <option value="90">Verloopt na 90 dagen</option>
          </select>
        </div>
        <button className="btn btn-primary share-create-btn" onClick={create} disabled={busy}>
          {busy ? 'Bezig…' : '+ Reviewlink maken'}
        </button>
        {err && <div className="share-error">{err}</div>}
      </div>

      {loading && <div className="share-loading">Laden…</div>}

      {active.length > 0 && (
        <div className="share-list">
          {active.map(l => <LinkRow key={l.id} link={l} onCopy={copy} onRevoke={revoke} onDelete={del} copied={copiedId === l.id}/>)}
        </div>
      )}

      {active.length === 0 && !loading && (
        <div className="share-empty">Nog geen actieve reviewlinks.</div>
      )}

      {old.length > 0 && (
        <details className="share-old">
          <summary>Ingetrokken links ({old.length})</summary>
          <div className="share-list">
            {old.map(l => <LinkRow key={l.id} link={l} onDelete={del} revoked/>)}
          </div>
        </details>
      )}
    </div>
  );
}

function LinkRow({ link, onCopy, onRevoke, onDelete, copied, revoked }) {
  const permLabels = { view: 'Alleen lezen', comment: 'Comments', suggest: 'Voorstellen' };
  const expired = link.expires_at && new Date(link.expires_at) < new Date();
  const status = revoked ? 'Ingetrokken' : (expired ? 'Verlopen' : 'Actief');
  const url = reviewLinkUrl(link.token);

  return (
    <div className={'share-row' + (revoked || expired ? ' inactive' : '')}>
      <div className="share-row-body">
        <div className="share-row-top">
          <span className="share-label">{link.label || '(zonder label)'}</span>
          <span className="share-perm">{permLabels[link.permissions] || link.permissions}</span>
          <span className={'share-status share-status-' + (revoked || expired ? 'off' : 'on')}>{status}</span>
        </div>
        <div className="share-url" title={url}>{url}</div>
        <div className="share-meta">
          {link.expires_at
            ? `Verloopt ${new Date(link.expires_at).toLocaleDateString('nl-NL', { day: 'numeric', month: 'short' })}`
            : 'Geen vervaldatum'}
        </div>
      </div>
      <div className="share-row-actions">
        {!revoked && !expired && (
          <button className="btn share-btn-copy" onClick={() => onCopy(link)}>
            {copied ? '✓ Gekopieerd' : 'Kopieer'}
          </button>
        )}
        {!revoked && onRevoke && (
          <button className="btn share-btn-revoke" onClick={() => onRevoke(link.id)}>
            Intrekken
          </button>
        )}
        {onDelete && (
          <button className="share-btn-del" onClick={() => onDelete(link.id)} title="Verwijderen">×</button>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { SharePanel });