// Analytics.jsx
function Donut({ value, max = 100, label, sublabel }) {
  const r = 72;
  const c = 2 * Math.PI * r;
  const pct = value / max;
  return (
    <div className="donut">
      <svg width={180} height={180}>
        <circle cx="90" cy="90" r={r} stroke="var(--color-grey-200)" strokeWidth="14" fill="none"/>
        <circle cx="90" cy="90" r={r} stroke="var(--color-yellow)" strokeWidth="14" fill="none"
          strokeDasharray={c} strokeDashoffset={c * (1 - pct)} strokeLinecap="round"/>
      </svg>
      <div className="donut__center">
        <div className="donut__value">{value}%</div>
        <div style={{fontSize: 12, color: 'var(--color-grey-500)', marginTop: 2}}>{sublabel}</div>
      </div>
    </div>
  );
}

function HBar({ label, value, max, color = 'var(--color-navy)' }) {
  return (
    <div style={{marginBottom: 12}}>
      <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 4, fontSize: 13}}>
        <span style={{fontWeight: 600, color: 'var(--color-navy)'}}>{label}</span>
        <span style={{color: 'var(--color-grey-500)'}}>{value}</span>
      </div>
      <div style={{height: 8, background: 'var(--color-grey-100)', borderRadius: 4, overflow: 'hidden'}}>
        <div style={{height: '100%', width: (value / max * 100) + '%', background: color, borderRadius: 4}}/>
      </div>
    </div>
  );
}

function AnalyticsPage() {
  const monthly = [
    { m: 'Nov', v: 98 }, { m: 'Dec', v: 112 }, { m: 'Jan', v: 105 },
    { m: 'Feb', v: 121 }, { m: 'Mar', v: 134 }, { m: 'Apr', v: 142, accent: true },
  ];
  const max = Math.max(...monthly.map(d => d.v));

  return (
    <div className="content">
      <div className="stats-grid" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
        <StatCard icon="DollarSign" iconKind="yellow" label="Revenue (April)" value="RM 287k" delta="+12.4%" deltaDir="up"/>
        <StatCard icon="Briefcase" label="Total Jobs" value="142" delta="+18%" deltaDir="up"/>
        <StatCard icon="Activity" iconKind="green" label="Completion Rate" value="96%" delta="+1.2pt" deltaDir="up"/>
        <StatCard icon="DollarSign" iconKind="red" label="Diesel Surcharge" value="RM 28.4k" delta="+RM 2.1k vs Mar" deltaDir="up"/>
      </div>

      <div className="two-col">
        <div className="card">
          <div className="card__header">
            <div className="card__title">Total Jobs by Month</div>
            <span className="badge badge--gray badge--no-dot">Last 6 months</span>
          </div>
          <div className="chart-bar" style={{height: 240}}>
            {monthly.map(d => (
              <div key={d.m} className="chart-bar__col">
                <div style={{fontSize: 12, fontWeight: 700, color: d.accent ? 'var(--color-yellow-700)' : 'var(--color-navy)', marginBottom: 4}}>{d.v}</div>
                <div className="chart-bar__bar-wrap">
                  <div className={"chart-bar__bar " + (d.accent ? 'chart-bar__bar--accent' : '')} style={{height: (d.v / max * 100) + '%'}}/>
                </div>
                <div className="chart-bar__label">{d.m}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center'}}>
          <div className="card__title" style={{alignSelf: 'flex-start', marginBottom: 12}}>Crane Utilization</div>
          <Donut value={78} sublabel="Apr avg"/>
          <div style={{display: 'flex', gap: 24, marginTop: 24, fontSize: 13}}>
            <div><div style={{fontWeight: 700, color: 'var(--color-navy)', fontFamily: 'var(--font-display)', fontSize: 20}}>22</div><div style={{color: 'var(--color-grey-500)'}}>Active</div></div>
            <div><div style={{fontWeight: 700, color: 'var(--color-navy)', fontFamily: 'var(--font-display)', fontSize: 20}}>3</div><div style={{color: 'var(--color-grey-500)'}}>In Repair</div></div>
            <div><div style={{fontWeight: 700, color: 'var(--color-navy)', fontFamily: 'var(--font-display)', fontSize: 20}}>2</div><div style={{color: 'var(--color-grey-500)'}}>Idle</div></div>
          </div>
        </div>
      </div>

      <div className="two-col" style={{marginTop: 24}}>
        <div className="card">
          <div className="card__header">
            <div className="card__title">Revenue by Crane Type</div>
          </div>
          <HBar label="250t Liebherr LTM 1250" value={92500} max={92500}/>
          <HBar label="100t Grove GMK4100L" value={68200} max={92500}/>
          <HBar label="90t Liebherr LTM 1090" value={54000} max={92500}/>
          <HBar label="50t Tadano GR-500EX" value={42100} max={92500}/>
          <HBar label="30t Tadano GR-300EX" value={18400} max={92500}/>
          <HBar label="25t Tadano GR-250N" value={11800} max={92500}/>
        </div>

        <div className="card">
          <div className="card__header">
            <div className="card__title">Top Customers (Apr)</div>
          </div>
          <HBar label="Greenword Sdn Bhd" value={48} max={48} color="var(--color-yellow)"/>
          <HBar label="Ace Engineering" value={32} max={48} color="var(--color-yellow)"/>
          <HBar label="MTC Petrochem" value={24} max={48} color="var(--color-yellow)"/>
          <HBar label="DYC Aviation" value={18} max={48} color="var(--color-yellow)"/>
          <HBar label="QRE Logistics" value={12} max={48} color="var(--color-yellow)"/>
          <HBar label="Other" value={8} max={48} color="var(--color-yellow)"/>
        </div>
      </div>

      <div className="two-col" style={{marginTop: 24}}>
        <div className="card">
          <div className="card__header">
            <div className="card__title">Operator Workload</div>
            <span className="badge badge--gray badge--no-dot">Hours · April</span>
          </div>
          <HBar label="Chong Kah Hoe" value={184} max={200} color="var(--color-navy)"/>
          <HBar label="Razak Hassan" value={172} max={200} color="var(--color-navy)"/>
          <HBar label="Mohd Hafiz" value={156} max={200} color="var(--color-navy)"/>
          <HBar label="Yong Ah Seng" value={138} max={200} color="var(--color-navy)"/>
          <HBar label="Idris Yaakub" value={124} max={200} color="var(--color-navy)"/>
        </div>

        <div className="card">
          <div className="card__header">
            <div className="card__title">Pending vs Completed</div>
          </div>
          <div style={{display: 'flex', gap: 16, marginTop: 8}}>
            <div style={{flex: 1, padding: 20, background: 'rgba(34,197,94,0.08)', borderRadius: 12, textAlign: 'center'}}>
              <div style={{fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, color: '#15803d'}}>136</div>
              <div style={{fontSize: 13, color: 'var(--color-grey-700)', fontWeight: 600}}>Completed</div>
            </div>
            <div style={{flex: 1, padding: 20, background: 'rgba(245,158,11,0.10)', borderRadius: 12, textAlign: 'center'}}>
              <div style={{fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, color: '#b45309'}}>4</div>
              <div style={{fontSize: 13, color: 'var(--color-grey-700)', fontWeight: 600}}>Pending</div>
            </div>
            <div style={{flex: 1, padding: 20, background: 'rgba(239,68,68,0.08)', borderRadius: 12, textAlign: 'center'}}>
              <div style={{fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, color: 'var(--color-danger)'}}>2</div>
              <div style={{fontSize: 13, color: 'var(--color-grey-700)', fontWeight: 600}}>Issues</div>
            </div>
          </div>
          <div style={{marginTop: 24, fontSize: 13, color: 'var(--color-grey-500)', lineHeight: 1.6}}>
            Completion rate <strong style={{color: 'var(--color-navy)'}}>96%</strong> — 1.2pt above March. Two pending issues are awaiting customer schedule confirmation; both expected to clear within 48 hours.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AnalyticsPage });