// today/lib.jsx — primitives for the Today/Home tab

const PROJECTS = {
  ordentus: { name: 'Ordentus v1',   color: '#5E5CE6' },
  thesis:   { name: 'Thesis',         color: '#AF52DE' },
  flat:     { name: 'New flat',       color: '#FF9500' },
  fitness:  { name: 'Run · half-mara',color: '#34C759' },
};

function ArcRow({ kind = 'upcoming', feed, time, title, location }) {
  return (
    <div className={`arc-row ${kind}`}>
      <div className="when">
        <span className="h" data-num>{time.h}</span>
        <span style={{ fontSize: 11 }}>{time.s}</span>
      </div>
      <div className="swatch" style={{ background: FEED_HEX[feed] || '#007AFF' }}/>
      <div className="body">
        <div className="t">{title}</div>
        {location && <div className="s">{location}</div>}
      </div>
      {kind === 'now' && <span className="pill heavy">Now</span>}
      {kind !== 'now' && <span style={{ color: 'var(--io-label-tertiary)' }}><Icon name="chevron-right" size={14} stroke={2.4}/></span>}
    </div>
  );
}

function TodoRow({ done = false, title, projectColor, due }) {
  return (
    <div className={'todo' + (done ? ' done' : '')}>
      <div className="box">{done && <Icon name="check" size={13} stroke={3}/>}</div>
      <div className="t">{title}</div>
      <div className="meta">
        {due && <span data-num>{due}</span>}
        {projectColor && <span className="proj-dot" style={{ background: projectColor }}/>}
        <span className="grip"><Icon name="ellipsis" size={16} stroke={2}/></span>
      </div>
    </div>
  );
}

function BucketHeader({ title, count, add = true }) {
  return (
    <div className="bucket-hd">
      <div className="lhs">
        <span className="ttl">{title}</span>
        <span className="ct" data-num>{count}</span>
      </div>
      {add && <span className="add"><Icon name="plus" size={20} stroke={2.4} style={{ color: 'var(--io-blue)' }}/></span>}
    </div>
  );
}

function ProjectCard({ proj, taskCount, doneCount, pct }) {
  return (
    <div className="proj-card" style={{ color: PROJECTS[proj].color }}>
      <div className="pn"><span style={{ width: 8, height: 8, borderRadius: 50, background: 'currentColor' }}/> Project</div>
      <div className="pt">{PROJECTS[proj].name}</div>
      <div className="pm" data-num>{doneCount} of {taskCount} done · {pct}%</div>
      <div className="bar"><i style={{ width: `${pct}%` }}/></div>
      <div className="ft">
        <div className="av">L</div><div className="av">M</div><div className="av">+2</div>
        <span className="ct" data-num>3 due this week</span>
      </div>
    </div>
  );
}

function GoalCard({ title, milestone, percent, color = 'var(--io-indigo)' }) {
  return (
    <div className="goal">
      <RingChart percent={percent} size={84} stroke={9} color={color} valueUnit="%"/>
      <div className="gx">
        <div className="nm">Goal</div>
        <div className="gt">{title}</div>
        <div className="ms">Next · {milestone}</div>
        <div className="pct" data-num>{percent}% on track</div>
      </div>
    </div>
  );
}

function ObjectiveRow({ icon, color, title, sub }) {
  return (
    <div className="obj">
      <div className="ic" style={{ background: color }}><Icon name={icon} size={14} stroke={2.4}/></div>
      <div style={{ flex: 1 }}>
        <div className="ot">{title}</div>
        <div className="os">{sub}</div>
      </div>
      <span style={{ color: 'var(--io-label-tertiary)' }}><Icon name="chevron-right" size={16} stroke={2.4}/></span>
    </div>
  );
}

function MilestoneRow({ done = false, title, taskCount, dueDate }) {
  return (
    <div className={'ms-row' + (done ? ' done' : '')}>
      <div className="box">{done && <Icon name="check" size={13} stroke={3}/>}</div>
      <div style={{ flex: 1 }}>
        <div className="t">{title}</div>
        <div className="ct" style={{ marginTop: 4 }} data-num>{taskCount} tasks · due {dueDate}</div>
      </div>
      <span style={{ color: 'var(--io-label-tertiary)' }}><Icon name="chevron-right" size={14} stroke={2.4}/></span>
    </div>
  );
}

Object.assign(window, { PROJECTS, ArcRow, TodoRow, BucketHeader, ProjectCard, GoalCard, ObjectiveRow, MilestoneRow });