// board.jsx — Kanban board, task cards, task detail drawer

const { useState: useStateB, useEffect: useEffectB } = React;
const { STAGES: STAGES_B, USERS: USERS_B } = window.SEED;

function dueTone(due) {
  // light heuristic just for visual variety — not real date math
  if (/Jun (1[4-9]|2\d)|Jun 1[0-3]/.test(due)) return 'soon';
  return 'normal';
}

function TaskCard({ task, onOpen, onDragStart, dragging }) {
  const u = window.userById(task.assignee);
  return (
    <article
      draggable
      onDragStart={(e) => { e.dataTransfer.effectAllowed = 'move'; onDragStart(task.id); }}
      onClick={() => onOpen(task.id)}
      className="task-card"
      style={{ opacity: dragging ? 0.4 : 1 }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'flex-start' }}>
        <p style={{ margin: 0, fontSize: 14.5, fontWeight: 600, lineHeight: 1.35, color: 'var(--text)', textWrap: 'pretty' }}>{task.title}</p>
        {task.cost > 0 && (
          <span style={{ flex: 'none', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-mono)',
            color: 'var(--text-dim)', background: 'var(--track)', borderRadius: 7, padding: '3px 8px', whiteSpace: 'nowrap' }}>
            {window.fmtMoney(task.cost)}
          </span>
        )}
      </div>
      {task.desc && (
        <p style={{ margin: '7px 0 0', fontSize: 12.5, lineHeight: 1.45, color: 'var(--text-dim)', textWrap: 'pretty',
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{task.desc}</p>
      )}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, gap: 8 }}>
        <window.PriorityTag level={task.priority} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {task.comments && task.comments.length > 0 && (
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11.5, fontWeight: 600,
              fontFamily: 'var(--font-mono)', color: 'var(--text-faint)' }} title={task.comments.length + ' comments'}>
              <window.Icon name="comment" size={13} stroke={2} />{task.comments.length}
            </span>
          )}
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11.5, fontWeight: 600,
            fontFamily: 'var(--font-mono)', color: dueTone(task.due) === 'soon' ? 'oklch(0.55 0.16 28)' : 'var(--text-dim)' }}>
            <window.Icon name="clock" size={12} stroke={2.2} />{task.due}
          </span>
          <window.Avatar id={task.assignee} size={24} />
        </div>
      </div>
    </article>
  );
}

function Column({ stage, tasks, onOpen, onDrop, dragId, setDragId, onAdd }) {
  const [over, setOver] = useStateB(false);
  const accent = { pending: 38, inprocess: 'var(--primary-h)', complete: 152 }[stage.id];
  const dotColor = stage.id === 'inprocess' ? 'var(--primary)' : `oklch(0.6 0.15 ${accent})`;
  return (
    <section
      className="kcol"
      onDragOver={(e) => { e.preventDefault(); setOver(true); }}
      onDragLeave={() => setOver(false)}
      onDrop={(e) => { e.preventDefault(); setOver(false); onDrop(stage.id); }}
      style={{ outline: over ? '2px dashed var(--primary)' : '2px dashed transparent', outlineOffset: -2 }}
    >
      <header style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '2px 4px 0' }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: dotColor, flex: 'none' }} />
        <h3 style={{ margin: 0, fontSize: 13.5, fontWeight: 700, letterSpacing: '.01em', color: 'var(--text)' }}>{stage.label}</h3>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)',
          background: 'var(--track)', borderRadius: 99, padding: '1px 8px' }}>{tasks.length}</span>
        <button className="icon-btn" style={{ marginLeft: 'auto' }} onClick={() => onAdd(stage.id)} title="Add task">
          <window.Icon name="plus" size={16} />
        </button>
      </header>
      <div className="kcol-body">
        {tasks.map((t) => (
          <TaskCard key={t.id} task={t} onOpen={onOpen} dragging={dragId === t.id}
            onDragStart={setDragId} />
        ))}
        {tasks.length === 0 && (
          <div style={{ padding: '18px 12px', textAlign: 'center', fontSize: 12.5, color: 'var(--text-faint)',
            border: '1.5px dashed var(--border)', borderRadius: 12, fontFamily: 'var(--font-mono)' }}>
            Drop tasks here
          </div>
        )}
        <button className="add-task-row" onClick={() => onAdd(stage.id)}>
          <window.Icon name="plus" size={15} /> Add task
        </button>
      </div>
    </section>
  );
}

function Board({ project, onOpen, moveTask, onAdd }) {
  const [dragId, setDragId] = useStateB(null);
  return (
    <div className="board-scroll">
      <div className="board-grid">
        {STAGES_B.map((stage) => (
          <Column key={stage.id} stage={stage}
            tasks={project.tasks.filter((t) => t.stage === stage.id)}
            onOpen={onOpen}
            onAdd={onAdd}
            dragId={dragId} setDragId={setDragId}
            onDrop={(stageId) => { if (dragId) moveTask(dragId, stageId); setDragId(null); }}
          />
        ))}
      </div>
    </div>
  );
}

// ---- task detail drawer ----
function TaskDrawer({ task, project, onClose, onChange, onAddComment }) {
  useEffectB(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);
  if (!task) return null;
  const stage = STAGES_B.find((s) => s.id === task.stage);
  return (
    <div className="drawer-scrim" onMouseDown={onClose}>
      <aside className="drawer" onMouseDown={(e) => e.stopPropagation()}>
        <header className="drawer-head">
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-faint)' }}>
            {project.name} · {task.id.toUpperCase()}
          </span>
          <button className="icon-btn" onClick={onClose}><window.Icon name="x" size={18} /></button>
        </header>

        <div className="drawer-body">
          <input className="drawer-title-input" value={task.title}
            onChange={(e) => onChange({ title: e.target.value })} />

          <div className="field-grid">
            <FieldLabel icon="board" text="Stage" />
            <div className="seg">
              {STAGES_B.map((s) => (
                <button key={s.id} onClick={() => onChange({ stage: s.id })}
                  className={'seg-btn' + (task.stage === s.id ? ' on' : '')}>{s.label}</button>
              ))}
            </div>

            <FieldLabel icon="user" text="Assignee" />
            <div className="assignee-row">
              {project.team.map((id) => {
                const u = window.userById(id);
                const on = task.assignee === id;
                return (
                  <button key={id} onClick={() => onChange({ assignee: id })}
                    className={'assignee-chip' + (on ? ' on' : '')} title={u.name}>
                    <window.Avatar id={id} size={22} />
                    <span style={{ fontSize: 12.5, fontWeight: 600 }}>{u.name.split(' ')[0]}</span>
                  </button>
                );
              })}
            </div>

            <FieldLabel icon="flag" text="Priority" />
            <div className="seg">
              {['high', 'medium', 'low'].map((lv) => (
                <button key={lv} onClick={() => onChange({ priority: lv })}
                  className={'seg-btn' + (task.priority === lv ? ' on' : '')}
                  style={{ textTransform: 'capitalize' }}>{lv}</button>
              ))}
            </div>

            <FieldLabel icon="calendar" text="Due" />
            <input className="mini-input" value={task.due}
              onChange={(e) => onChange({ due: e.target.value })} placeholder="e.g. Jun 20" />

            <FieldLabel icon="wallet" text="Cost" />
            <div className="money-input">
              <span className="money-pre">Rs</span>
              <input type="number" min="0" step="1000" value={task.cost || ''}
                onChange={(e) => onChange({ cost: Math.max(0, parseInt(e.target.value || '0', 10)) })}
                placeholder="0" />
            </div>

            <FieldLabel icon="calendar" text="Spent on" />
            <input type="date" className="mini-input date-input" value={task.spentOn || ''}
              onChange={(e) => onChange({ spentOn: e.target.value })} />
          </div>

          <div style={{ marginTop: 22 }}>
            <FieldLabel icon="spark" text="Description" />
            <textarea className="drawer-desc" value={task.desc}
              onChange={(e) => onChange({ desc: e.target.value })}
              placeholder="Add detail, acceptance criteria, links…" rows={5} />
          </div>

          <div style={{ marginTop: 22 }}>
            <FieldLabel icon="comment" text={`Comments${task.comments && task.comments.length ? ' · ' + task.comments.length : ''}`} />
            <div style={{ marginTop: 10 }}>
              <window.CommentThread comments={task.comments || []} onAdd={onAddComment}
                placeholder="Comment on this task…" empty="No comments on this task yet." autoScroll />
            </div>
          </div>
        </div>

        <footer className="drawer-foot">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--text-dim)', fontSize: 13 }}>
            Currently in <strong style={{ color: 'var(--text)' }}>{stage.label}</strong>
          </span>
          <button className="btn-primary" onClick={onClose}>Done</button>
        </footer>
      </aside>
    </div>
  );
}

function FieldLabel({ icon, text }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, fontWeight: 650,
      color: 'var(--text-dim)', fontFamily: 'var(--font-ui)', paddingTop: 7 }}>
      <window.Icon name={icon} size={14} stroke={2} />{text}
    </span>
  );
}

Object.assign(window, { Board, TaskDrawer });