// Void-1-style expandable project card: status (inline-editable), Research (Eithan
// stub), Edit, Delete (confirm), and an expandable research panel.
import { el } from '../dom.js';
import { api } from '../api.js';
import { renderMarkdown } from '../markdown.js';
import { openProjectModal } from './project_modal.js';

const STATUSES = ['idea', 'active', 'paused', 'done', 'abandoned'];
const _open = new Set();   // expanded project ids (persist across re-renders)

function ago(ts) {
  if (!ts) return '';
  const s = (Date.now() - new Date(ts)) / 1000;
  if (s < 60) return 'just now';
  if (s < 3600) return Math.floor(s / 60) + 'm ago';
  if (s < 86400) return Math.floor(s / 3600) + 'h ago';
  return Math.floor(s / 86400) + 'd ago';
}

// o: { reload() — refetch+render, rerender() — render from current data }
export function projectCard(p, o) {
  const open = _open.has(p.id);
  const card = el('div', { class: 'proj-card' + (open ? ' open' : '') });
  const busy = p.research_status === 'requested' || p.research_status === 'researching';

  const statusSel = el('select', {
    class: 'proj-status st-' + p.status,
    onclick: (e) => e.stopPropagation(),
    onchange: async (e) => { try { await api.patch('/api/projects/' + p.id, { status: e.target.value }); o.reload(); } catch (err) { alert('failed: ' + err.message); } }
  }, STATUSES.map(s => el('option', { value: s, selected: s === p.status }, s)));

  const research = el('button', {
    class: 'proj-btn' + (busy ? ' busy' : ''),
    title: busy ? 'Queued for Eithan' : 'Ask Eithan to research this project',
    onclick: async (e) => { e.stopPropagation(); try { await api.post('/api/projects/' + p.id + '/research'); o.reload(); } catch (err) { alert('failed: ' + err.message); } }
  }, busy ? '↻ Queued' : '↻ Research');

  const header = el('div', { class: 'proj-head', onclick: () => { open ? _open.delete(p.id) : _open.add(p.id); o.rerender(); } },
    el('span', { class: 'proj-chev' }, '›'),
    el('div', { class: 'proj-meta' },
      el('div', { class: 'proj-title' }, p.name),
      p.description ? el('div', { class: 'proj-desc' }, p.description) : null),
    el('div', { class: 'proj-actions', onclick: (e) => e.stopPropagation() },
      statusSel, research,
      el('button', { class: 'proj-btn', onclick: () => openProjectModal(p.space_id, p, o.reload) }, 'Edit'),
      el('button', {
        class: 'proj-btn danger', title: 'Delete project',
        onclick: async () => { if (!confirm(`Delete project "${p.name}"? This cannot be undone.`)) return; try { await api.del('/api/projects/' + p.id); o.reload(); } catch (err) { alert('failed: ' + err.message); } }
      }, '✕')));
  card.appendChild(header);

  if (open) {
    const panel = el('div', { class: 'proj-panel' });
    panel.appendChild(el('div', { class: 'proj-section-h' }, 'Eithan research' + (p.last_researched_at ? ` · ${ago(p.last_researched_at)}` : '')));
    if (busy) panel.appendChild(el('div', { class: 'muted' }, "Queued for Eithan — he'll fill this in once the agent ships."));
    else if (p.research_notes) { const n = el('div', { class: 'md-preview' }); n.innerHTML = renderMarkdown(p.research_notes); panel.appendChild(n); }
    else panel.appendChild(el('div', { class: 'muted' }, 'No research yet — press ↻ Research to queue it for Eithan.'));
    card.appendChild(panel);
  }
  return card;
}