// Overview v2 — premium bento: gradient AI briefing, tinted KPI tiles
// with trends + sparklines, color-coded Priority Inbox, priority tasks.
function Greeting() {
  const h = new Date().getHours();
  return h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
}

function Sparkline({ data, color }) {
  const w = 62, h = 26, pad = 2;
  const min = Math.min(...data), max = Math.max(...data), rng = (max - min) || 1;
  const pts = data.map((v, i) => {
    const x = pad + (i / (data.length - 1)) * (w - 2 * pad);
    const y = h - pad - ((v - min) / rng) * (h - 2 * pad);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none" className="t-spark">
      <polyline points={pts.join(' ')} stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" opacity="0.9" />
      <circle cx={pts[pts.length-1].split(',')[0]} cy={pts[pts.length-1].split(',')[1]} r="2.4" fill={color} />
    </svg>
  );
}

const SEV = {
  urgent: { rail:'var(--red-500)',    chipBg:'var(--red-50)',   fg:'var(--red-500)',    pillCls:'b-red',  label:'Urgent' },
  soon:   { rail:'var(--orange-500)', chipBg:'var(--orange-50)',fg:'var(--orange-500)', pillCls:'b-gold', label:'Soon'   },
  info:   { rail:'var(--green-500)',  chipBg:'var(--green-50)', fg:'var(--green-600)',  pillCls:'b-green',label:'Done'   },
};

function Briefing({ user, go }) {
  const b = window.ZD_DATA.briefing;
  return (
    <div className="briefing-hero">
      <div className="bh-top">
        <span className="bh-spark"><Icon name="sparkles" size={20} color="#fff" /></span>
        <div>
          <div className="bh-eye">AI Daily Briefing</div>
          <div className="bh-sub"><span className="bh-dot" /> Updated 2m ago · 128 emails sorted</div>
        </div>
        <span className="bh-secure"><Icon name="shield-check" size={13} color="var(--gold-700)" /> Secure</span>
      </div>
      <h2>{Greeting()}, {user.name.split(' ')[0]} 👋</h2>
      <p className="lede">{b.summary}</p>
      <div className="bh-signals">
        <button className="bh-sig" onClick={() => go('tasks')}><span className="d" style={{ background:'var(--red-500)' }} /> 2 replies needed</button>
        <button className="bh-sig" onClick={() => go('bills')}><span className="d" style={{ background:'var(--orange-500)' }} /> $329.21 due this week</button>
        <button className="bh-sig" onClick={() => go('packages')}><span className="d" style={{ background:'var(--green-500)' }} /> 1 package today</button>
      </div>
      <div className="bh-actions">
        <button className="bh-cta" onClick={() => go('chat')}><Icon name="message-square" size={16} color="#fff" /> Chat with AI</button>
        <button className="bh-ghost" onClick={() => go('tasks')}>View today’s plan</button>
      </div>
    </div>
  );
}

function Outlook({ go }) {
  const items = window.ZD_DATA.briefing.outlook;
  return (
    <div className="card card-pad outlook">
      <SectionHeader title="3-Day outlook" sub="What’s coming up" action="Calendar" onAction={() => go('calendar')} />
      {items.map((o, i) => (
        <div className="ol-row" key={i}>
          <span className="ol-day">{o.day}</span>
          <span className="ol-bar" style={{ background: tintFg(o.tint) }} />
          <div style={{ flex:1, minWidth:0 }}>
            <div className="ol-t">{o.label}</div>
            <div className="ol-m">{o.meta}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function Tile({ k, onClick }) {
  return (
    <div className="tile" onClick={onClick} style={{ background: tintBg(k.tint) }}>
      <div className="t-top">
        <span className="t-lbl">{k.label}</span>
        <span className="t-go"><Icon name="arrow-up-right" size={14} /></span>
      </div>
      <div className="t-val">{k.value}</div>
      <div className="t-foot">
        <span className="t-sub">{k.sub}</span>
      </div>
      <Sparkline data={k.spark} color={tintFg(k.tint)} />
    </div>
  );
}

function PriorityInbox({ go }) {
  const [items, setItems] = useState(window.ZD_DATA.attention);
  const route = { task:'tasks', package:'packages', bill:'bills', event:'notifications' };
  const dismiss = (e, id) => { e.stopPropagation(); setItems(items.filter(i => i.id !== id)); };
  return (
    <div className="card card-pad rise" style={{ marginBottom:18 }}>
      <div className="inbox-head">
        <span className="inbox-ic"><Icon name="zap" size={19} color="var(--gold-600)" /></span>
        <div style={{ flex:1 }}>
          <div className="section-h" style={{ margin:0 }}>
            <div>
              <div className="t" style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:17 }}>Priority Inbox</div>
              <div className="s" style={{ fontSize:12.5, color:'var(--fg-3)' }}>Needs your attention today</div>
            </div>
            <span className="badge b-gold">{items.length} threads</span>
          </div>
        </div>
      </div>
      <div className="inbox-list">
        {items.map(a => {
          const s = SEV[a.sev];
          return (
            <div key={a.id} className={`inbox-row sev-${a.sev}`} onClick={() => go(route[a.kind])}>
              <span className="rail" style={{ background: s.rail }} />
              <span className="sv-ic" style={{ background: s.chipBg }}><Icon name={a.icon} size={17} color={s.fg} /></span>
              <div className="imain">
                <div className="it">{a.title}</div>
                <div className="im">{a.meta}</div>
              </div>
              <span className={`sev-pill ${s.pillCls}`}>{s.label}</span>
              <span className="when">{a.when}</span>
              <button className="inbox-x" onClick={(e) => dismiss(e, a.id)} title="Dismiss"><Icon name="x" size={15} /></button>
            </div>
          );
        })}
        {items.length === 0 && (
          <div style={{ textAlign:'center', color:'var(--fg-3)', padding:'28px 0' }}>
            <Icon name="check-circle-2" size={28} color="var(--green-500)" /><div style={{ marginTop:8 }}>Inbox zero — you’re all caught up.</div>
          </div>
        )}
      </div>
    </div>
  );
}

function Overview({ go }) {
  const D = window.ZD_DATA;
  const prioColor = { red:'var(--red-500)', gold:'var(--orange-500)', gray:'var(--fg-4)' };
  return (
    <div className="screen-inner">
      <div className="bento rise">
        <Briefing user={D.user} go={go} />
        <Outlook go={go} />
      </div>

      <div className="kpi-bento rise">
        {D.kpis.map(k => <Tile key={k.id} k={k} onClick={() => go(k.to)} />)}
      </div>

      <PriorityInbox go={go} />

      <div className="cols-2 rise" style={{ marginBottom:18 }}>
        <RecentSpending go={go} />
        <SubscriptionsCard go={go} />
      </div>

      <div className="bento-3 rise">
        <div className="card card-pad">
          <SectionHeader title="Today & upcoming" sub="Your soonest events" action="Calendar" onAction={() => go('calendar')} />
          <div className="list">
            {D.events.length ? D.events.slice(0, 4).map(e => (
              <div className="tl-row" key={e.id} onClick={() => go('calendar')}>
                <span className="tl-dot" style={{ background: tintFg(e.tint) }} />
                <div style={{ flex: 1 }}>
                  <div className="t">{e.title}</div>
                  <div className="when">{e.when}</div>
                </div>
                {e.id === 'e1' && <span className="badge b-purple">Today</span>}
              </div>
            )) : <CardEmpty icon="calendar-check" text="No events in the next 3 days." />}
          </div>
        </div>

        <div className="card card-pad">
          <SectionHeader title="Priority tasks" sub="14 pending — by urgency" action="All" onAction={() => go('tasks')} />
          <div className="list">
            {D.tasks.length ? D.tasks.map(t => (
              <div className="ptask" key={t.id} onClick={() => go('tasks')} style={{ cursor:'pointer' }}>
                <span className="pdot" style={{ background: prioColor[t.prioTint] }} />
                <div className="pmain">
                  <div className="pt">{t.title}</div>
                  <div className="psub">{t.type}</div>
                </div>
                <span className={`pill b-${t.prioTint}`}>{t.prio}</span>
              </div>
            )) : <CardEmpty text="No priority tasks — you’re all clear." />}
          </div>
        </div>

        <MoneyCard go={go} />
      </div>
    </div>
  );
}
window.Overview = Overview;