/* global React */

/* ============ Icons (inline SVG, 20px stroke) ============ */
const Icon = ({ d, size = 18, fill, stroke = 'currentColor', sw = 1.8, children, viewBox = '0 0 24 24' }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill || 'none'} stroke={stroke}
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {d ? <path d={d} /> : children}
  </svg>
);

const I = {
  logo: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="white" {...p}>
      <path d="M4 4 L4 20 L8 20 L8 11 L16 20 L20 20 L20 4 L16 4 L16 13 L8 4 Z"/>
    </svg>
  ),
  search: (p) => <Icon {...p} size={15}><circle cx="11" cy="11" r="7"/><path d="M20 20 L17 17"/></Icon>,
  bell: (p) => <Icon {...p} size={17}><path d="M6 9a6 6 0 0 1 12 0c0 7 2 8 2 8H4s2-1 2-8"/><path d="M10 21a2 2 0 0 0 4 0"/></Icon>,
  chevDown: (p) => <Icon {...p} size={13}><path d="M6 9l6 6 6-6"/></Icon>,
  chevLeft: (p) => <Icon {...p} size={16}><path d="M15 18l-6-6 6-6"/></Icon>,
  chevRight: (p) => <Icon {...p} size={16}><path d="M9 6l6 6-6 6"/></Icon>,
  menu: (p) => <Icon {...p} size={16}><path d="M3 12h13M3 6h18M3 18h18"/></Icon>,
  plus: (p) => <Icon {...p} size={16}><path d="M12 5v14M5 12h14"/></Icon>,
  download: (p) => <Icon {...p} size={15}><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></Icon>,
  check: (p) => <Icon {...p} size={14}><path d="M5 12l5 5L20 7"/></Icon>,
  arrowUp: (p) => <Icon {...p} size={12}><path d="M12 19V5M5 12l7-7 7 7"/></Icon>,
  arrowDown: (p) => <Icon {...p} size={12}><path d="M12 5v14M5 12l7 7 7-7"/></Icon>,

  // sidebar
  sDash: (p) => <Icon {...p}><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></Icon>,
  sAnalytics: (p) => <Icon {...p}><path d="M3 20h18"/><path d="M7 16V10"/><path d="M12 16V6"/><path d="M17 16v-9"/></Icon>,
  sCustomers: (p) => <Icon {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="7" r="2.5"/><path d="M15 13.5c3.3 0 6 2 6 5.5"/></Icon>,
  sOrders: (p) => <Icon {...p}><path d="M5 7l1.5-3h11L19 7"/><path d="M4 7h16v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/><path d="M9 11c0 1.7 1.3 3 3 3s3-1.3 3-3"/></Icon>,
  sProducts: (p) => <Icon {...p}><path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.3 7L12 12l8.7-5M12 22V12"/></Icon>,
  sMarketing: (p) => <Icon {...p}><path d="M3 11v2a2 2 0 0 0 2 2h1l3 5h3v-5h1l8 4V4l-8 4h-8a2 2 0 0 0-2 2z"/></Icon>,
  sSettings: (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></Icon>,

  // kpi
  dollar: (p) => <Icon {...p}><path d="M12 3v18M17 6H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></Icon>,
  users: (p) => <Icon {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="7" r="2.5"/><path d="M15 13.5c3.3 0 6 2 6 5.5"/></Icon>,
  target: (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></Icon>,
  cart: (p) => <Icon {...p}><path d="M3 4h2l2.7 12.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="9" cy="20" r="1.2"/><circle cx="18" cy="20" r="1.2"/></Icon>,
  sparkle: (p) => <Icon {...p}><path d="M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z"/></Icon>,
  filter: (p) => <Icon {...p} size={13}><path d="M4 5h16l-6 8v5l-4 2v-7z"/></Icon>,
  sort: (p) => <Icon {...p} size={11}><path d="M8 6l-4 4h8zM16 18l4-4h-8z" fill="currentColor" stroke="none"/></Icon>,
  sortUp: (p) => <Icon {...p} size={11}><path d="M12 6l-5 6h10z" fill="currentColor" stroke="none"/></Icon>,
  sortDown: (p) => <Icon {...p} size={11}><path d="M12 18l5-6H7z" fill="currentColor" stroke="none"/></Icon>,

  // home/mobile
  home: (p) => <Icon {...p}><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></Icon>,
};

/* ============ Data ============ */
const DATA = {
  user: { name: 'Andy', role: 'Admin', initials: 'AN' },
  sidebar: [
    { key: 'dashboard', label: 'Dashboard', icon: I.sDash },
    { key: 'analytics', label: 'Analytics', icon: I.sAnalytics },
    { key: 'customers', label: 'Customers', icon: I.sCustomers, badge: '12' },
    { key: 'orders',    label: 'Orders',    icon: I.sOrders, badge: '3' },
    { key: 'products',  label: 'Products',  icon: I.sProducts },
    { key: 'marketing', label: 'Marketing', icon: I.sMarketing },
    { key: 'settings',  label: 'Settings',  icon: I.sSettings },
  ],
  kpis: [
    { key: 'rev', label: 'Total Revenue', value: '$48,290', raw: 48290, trend: +12.5, icon: I.dollar, tone: 'purple', spark: [22,28,24,32,30,36,34,40,38,44,42,48,52,50,54,58,60,65,62,68,72,70,74,78,82,80,85,90,92,96] },
    { key: 'usr', label: 'Active Users',  value: '12,439', raw: 12439, trend: +8.2,  icon: I.users,  tone: 'green',  spark: [40,42,38,44,46,42,48,50,52,48,54,56,58,60,58,62,64,66,62,68,70,72,70,76,78,74,80,82,84,86] },
    { key: 'cnv', label: 'Conversion Rate', value: '3.4%',  raw: 3.4,  trend: -0.3, icon: I.target, tone: 'red',    spark: [60,58,62,56,60,54,58,52,50,54,48,52,46,48,44,46,42,44,40,42,38,40,36,38,34,36,32,34,30,32] },
    { key: 'aov', label: 'Avg Order',      value: '$389',   raw: 389,  trend: +5.1, icon: I.cart,   tone: 'amber',  spark: [30,32,28,34,36,38,34,40,42,44,42,46,48,44,50,52,48,54,56,52,58,60,56,62,64,60,66,68,64,70] },
  ],
  products: [
    { icon: '🎧', name: 'Wireless Audio Pro',    sub: 'Electronics', pct: 84, units: '2,847 units' },
    { icon: '⌚', name: 'Smart Watch Series 7',   sub: 'Wearables',   pct: 71, units: '2,102 units' },
    { icon: '💻', name: 'Ultrabook M2',           sub: 'Computers',   pct: 58, units: '1,689 units' },
    { icon: '📱', name: 'Pixel Phone 9',          sub: 'Mobile',      pct: 42, units: '1,245 units' },
    { icon: '🎮', name: 'Controller Elite',       sub: 'Gaming',      pct: 31, units: '892 units'  },
  ],
  activity: [
    { who: 'Sarah Chen',    init: 'SC', grad: ['#A78BFA','#7C3AED'], action: 'placed a new order for', obj: 'Wireless Audio Pro', time: '2 min ago' },
    { who: 'Marcus Reed',   init: 'MR', grad: ['#34D399','#10B981'], action: 'signed up for the',      obj: 'Pro plan',            time: '14 min ago' },
    { who: 'Priya Patel',   init: 'PP', grad: ['#FBBF24','#F59E0B'], action: 'left a 5-star review on', obj: 'Smart Watch Series 7', time: '38 min ago' },
    { who: 'Jordan Lee',    init: 'JL', grad: ['#60A5FA','#3B82F6'], action: 'refunded order',          obj: '#ORD-9821',           time: '1 hr ago' },
    { who: 'Alex Morgan',   init: 'AM', grad: ['#F87171','#EF4444'], action: 'updated inventory for',   obj: 'Ultrabook M2',         time: '3 hr ago' },
    { who: 'Lina Okonkwo',  init: 'LO', grad: ['#F472B6','#EC4899'], action: 'completed checkout for',  obj: 'Controller Elite',     time: '5 hr ago' },
  ],
  orders: [
    { id: '#ORD-9847', cust: 'Emma Richardson', em: 'emma.r@mail.com',   init: 'ER', grad: ['#A78BFA','#7C3AED'], product: 'Wireless Audio Pro',   amount: 299,  status: 'ok',   date: 'Apr 18, 2026' },
    { id: '#ORD-9846', cust: 'Liam Zhang',      em: 'liam.z@mail.com',   init: 'LZ', grad: ['#34D399','#10B981'], product: 'Smart Watch Series 7', amount: 449,  status: 'ok',   date: 'Apr 18, 2026' },
    { id: '#ORD-9845', cust: 'Noah Bennett',    em: 'noah.b@mail.com',   init: 'NB', grad: ['#60A5FA','#3B82F6'], product: 'Pixel Phone 9',        amount: 899,  status: 'wait', date: 'Apr 18, 2026' },
    { id: '#ORD-9844', cust: 'Olivia Martinez', em: 'olivia.m@mail.com', init: 'OM', grad: ['#FBBF24','#F59E0B'], product: 'Controller Elite',     amount: 149,  status: 'ok',   date: 'Apr 17, 2026' },
    { id: '#ORD-9843', cust: 'Ethan Park',      em: 'ethan.p@mail.com',  init: 'EP', grad: ['#F87171','#EF4444'], product: 'Ultrabook M2',         amount: 1299, status: 'err',  date: 'Apr 17, 2026' },
    { id: '#ORD-9842', cust: 'Ava Thompson',    em: 'ava.t@mail.com',    init: 'AT', grad: ['#F472B6','#EC4899'], product: 'Wireless Audio Pro',   amount: 299,  status: 'ok',   date: 'Apr 17, 2026' },
    { id: '#ORD-9841', cust: 'Mason Garcia',    em: 'mason.g@mail.com',  init: 'MG', grad: ['#22D3EE','#06B6D4'], product: 'Smart Watch Series 7', amount: 449,  status: 'wait', date: 'Apr 16, 2026' },
    { id: '#ORD-9840', cust: 'Isabella Kim',    em: 'bella.k@mail.com',  init: 'IK', grad: ['#A78BFA','#6366F1'], product: 'Pixel Phone 9',        amount: 899,  status: 'ok',   date: 'Apr 16, 2026' },
    { id: '#ORD-9839', cust: 'Lucas Silva',     em: 'lucas.s@mail.com',  init: 'LS', grad: ['#34D399','#059669'], product: 'Controller Elite',     amount: 149,  status: 'ok',   date: 'Apr 16, 2026' },
    { id: '#ORD-9838', cust: 'Mia Johansson',   em: 'mia.j@mail.com',    init: 'MJ', grad: ['#FBBF24','#D97706'], product: 'Ultrabook M2',         amount: 1299, status: 'err',  date: 'Apr 15, 2026' },
  ],
};

/* ============ Revenue series generator ============ */
function generateRevenueSeries(days, seed = 7) {
  let s = seed;
  const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const points = [];
  const now = new Date(2026, 3, 18); // Apr 18, 2026
  let base = days >= 360 ? 38000 : days >= 80 ? 44000 : days >= 20 ? 46000 : 48000;
  const volatility = days >= 360 ? 4200 : days >= 80 ? 3200 : days >= 20 ? 2400 : 1800;
  const drift = days >= 360 ? 32 : days >= 80 ? 64 : days >= 20 ? 120 : 180;
  for (let i = 0; i < days; i++) {
    const d = new Date(now); d.setDate(now.getDate() - (days - 1 - i));
    // weekend dip
    const dow = d.getDay();
    const weekend = (dow === 0 || dow === 6) ? -1800 : 0;
    const n = (rand() - 0.5) * 2;
    const wave = Math.sin(i / 4.5) * 1200;
    base += drift * (0.6 + rand() * 0.8);
    const v = Math.max(12000, base + n * volatility + wave + weekend);
    points.push({ date: d, value: Math.round(v) });
  }
  return points;
}

Object.assign(window, { I, DATA, generateRevenueSeries });