/* My Day hero — daily briefing header */

function MyDayHero({ tasks, compact = false, onStartFocus, onSelect }) {
  const now = TODAY;
  const hour = 9; // simulated; you wake to the workstation at 9 am
  const greet = hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening';

  const urgent  = tasks.filter(t => t.priority === 'urgent' && t.statusId !== 6);
  const calls   = tasks.filter(t => t.title.toLowerCase().includes('call') || t.tags?.some(id => tagById(id)?.name === 'urgent-call'));
  const overdue = tasks.filter(t => t.dueDate && dayDelta(t.dueDate) < 0 && t.statusId !== 6);
  const estTotal = tasks.reduce((s, t) => s + (t.estimateMins || 0), 0);
  const focusTask = tasks.find(t => t.priority === 'urgent') || tasks[0];

  const dateLine = now.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' });

  if (compact) {
    return (
      <div style={{
        margin: '0 0 16px',
        padding: '14px 18px',
        background: 'linear-gradient(135deg, rgb(var(--accent-soft)), rgb(var(--accent-soft) / 0.4))',
        border: '1px solid rgb(var(--rule))',
        borderRadius: 12,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div>
          <p style={{ margin: 0, fontSize: 12, color: 'rgb(var(--muted))' }}>{dateLine}</p>
          <h2 style={{ margin: '2px 0 0', fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em' }}>{greet}, Alex</h2>
        </div>
        <span style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 16 }}>
          <Stat n={urgent.length}  l="urgent"  c="rgb(var(--brick))" />
          <Stat n={overdue.length} l="overdue" c="rgb(var(--brick))" />
          <Stat n={tasks.length}   l="today"   c="rgb(var(--accent))" />
        </div>
      </div>
    );
  }

  return (
    <div style={{
      margin: '0 0 18px',
      padding: '22px 24px',
      background: 'linear-gradient(135deg, rgb(var(--accent-soft)) 0%, rgb(var(--surface)) 60%)',
      border: '1px solid rgb(var(--rule))',
      borderRadius: 16,
      position: 'relative',
      overflow: 'hidden',
      boxShadow: 'var(--sh-sm)',
    }}>
      {/* Decorative blob */}
      <span aria-hidden style={{
        position: 'absolute', top: -60, right: -60,
        width: 220, height: 220, borderRadius: '50%',
        background: 'rgb(var(--accent) / 0.12)',
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />

      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, position: 'relative' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <p style={{
            margin: 0, fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
            color: 'rgb(var(--accent-2))', textTransform: 'uppercase',
          }}>{dateLine}</p>
          <h2 style={{
            margin: '4px 0 0',
            fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em',
            color: 'rgb(var(--ink))',
            lineHeight: 1.15,
          }}>{greet}, Alex.</h2>
          <p style={{ margin: '6px 0 0', fontSize: 14, color: 'rgb(var(--ink-2))', maxWidth: 540 }}>
            You have <strong>{tasks.length} task{tasks.length === 1 ? '' : 's'}</strong> on My Day,
            {urgent.length > 0 && <> including <strong style={{ color: 'rgb(var(--brick))' }}>{urgent.length} urgent</strong>,</>}
            {' '}with about <strong>{fmtMins(estTotal) || '0m'}</strong> of estimated work.
            {overdue.length > 0 && <> <span style={{ color: 'rgb(var(--brick))', fontWeight: 600 }}>⚠ {overdue.length} overdue</span>.</>}
          </p>

          {focusTask && (
            <div style={{
              marginTop: 16, padding: '12px 14px',
              background: 'rgb(var(--surface))',
              border: '1px solid rgb(var(--rule))',
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 12,
              boxShadow: 'var(--sh-sm)',
              cursor: 'pointer',
              transition: 'box-shadow .15s, transform .06s',
            }}
              onClick={() => onSelect?.(focusTask.id)}
              onMouseEnter={e => e.currentTarget.style.boxShadow = 'var(--sh-md)'}
              onMouseLeave={e => e.currentTarget.style.boxShadow = 'var(--sh-sm)'}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: 'rgb(var(--accent))',
                color: 'white',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16, fontWeight: 700,
              }}>▶</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: 'rgb(var(--accent))', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Start with</div>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: 'rgb(var(--ink))', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{focusTask.title}</div>
                <div style={{ fontSize: 11.5, color: 'rgb(var(--muted))', display: 'flex', alignItems: 'center', gap: 8, marginTop: 3 }}>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>{focusTask.ticket}</span>
                  {focusTask.estimateMins > 0 && <>· {fmtMins(focusTask.estimateMins)} estimated</>}
                  · {focusTask.assignees.length} assignee{focusTask.assignees.length === 1 ? '' : 's'}
                </div>
              </div>
              <button onClick={(e) => { e.stopPropagation(); onStartFocus?.(focusTask); }} className="btn btn-accent" style={{ fontSize: 12.5 }}>Focus mode →</button>
            </div>
          )}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10,
          minWidth: 260,
        }}>
          <BriefCard n={urgent.length}  l="Urgent"  c="rgb(var(--brick))"  soft="rgb(var(--brick-soft))" />
          <BriefCard n={calls.length}   l="Calls"   c="rgb(var(--accent))" soft="rgb(var(--accent-soft))" />
          <BriefCard n={overdue.length} l="Overdue" c="rgb(var(--warm))"   soft="rgb(var(--warm-soft))" />
          <BriefCard n={fmtMins(estTotal) || '0m'} l="Estimated" c="rgb(var(--forest))" soft="rgb(var(--forest-soft))" isText />
        </div>
      </div>
    </div>
  );
}

function Stat({ n, l, c }) {
  return (
    <div style={{ textAlign: 'right' }}>
      <div className="num" style={{ fontSize: 18, fontWeight: 700, color: c, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
      <div style={{ fontSize: 10, fontWeight: 600, color: 'rgb(var(--muted))', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{l}</div>
    </div>
  );
}

function BriefCard({ n, l, c, soft, isText }) {
  return (
    <div style={{
      padding: '10px 14px',
      background: soft,
      borderRadius: 10,
    }}>
      <div className="num" style={{ fontSize: isText ? 18 : 24, fontWeight: 700, color: c, letterSpacing: '-0.025em', lineHeight: 1 }}>{n}</div>
      <div style={{ fontSize: 11, fontWeight: 600, color: c, marginTop: 4, opacity: 0.8 }}>{l}</div>
    </div>
  );
}

window.MyDayHero = MyDayHero;