/* global React, I, DATA, Sparkline */
var { useState, useEffect, useRef } = React;

/* ============ Welcome row ============ */
function Welcome() {
  const now = new Date(2026, 3, 19); // Apr 19, 2026
  const dateStr = now.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
  return (
    <div className="welcome">
      <div>
        <h1>Good morning, Andy <span style={{ display: 'inline-block', animation: 'wave 1.8s ease-in-out 1' }}>👋</span></h1>
        <div className="date">{dateStr} · Here's what's happening today.</div>
      </div>
      <div className="actions">
        <button className="btn btn-ghost"><I.download/> Export CSV</button>
        <button className="btn btn-primary"><I.plus/> New</button>
      </div>
    </div>
  );
}

/* ============ KPI cards ============ */
function KpiCard({ item, loading }) {
  const Icn = item.icon;
  const up = item.trend >= 0;
  const sparkColor = up ? '#34D399' : '#F87171';

  if (loading) {
    return (
      <div className="card kpi">
        <div className="kpi-head">
          <div className="skeleton sk-icon"/>
          <div className="skeleton sk-label"/>
        </div>
        <div className="skeleton sk-value"/>
        <div className="kpi-foot">
          <div className="skeleton sk-trend"/>
          <div className="skeleton sk-spark"/>
        </div>
      </div>
    );
  }

  return (
    <div className="card kpi"
         onMouseMove={(e) => {
           const r = e.currentTarget.getBoundingClientRect();
           e.currentTarget.style.setProperty('--mx', `${e.clientX - r.left}px`);
           e.currentTarget.style.setProperty('--my', `${e.clientY - r.top}px`);
         }}>
      <div className="kpi-head">
        <div className={`kpi-icon ${item.tone === 'green' ? 'green' : item.tone === 'red' ? 'red' : item.tone === 'amber' ? 'amber' : ''}`}>
          <Icn/>
        </div>
        <div className="kpi-label">{item.label}</div>
      </div>
      <div className="kpi-value">{item.value}</div>
      <div className="kpi-foot">
        <span className={`trend ${up ? 'up' : 'down'}`}>
          {up ? <I.arrowUp/> : <I.arrowDown/>}
          {up ? '+' : ''}{item.trend}%
          <span className="period">vs last month</span>
        </span>
        <Sparkline data={item.spark} color={sparkColor}/>
      </div>
    </div>
  );
}

function KpiRow({ loading }) {
  return (
    <div className="kpis">
      {DATA.kpis.map(k => <KpiCard key={k.key} item={k} loading={loading}/>)}
    </div>
  );
}

Object.assign(window, { Welcome, KpiRow });