/* Atlas Ledger — shared components: icons, charts, logo, data */

const HB = {
  bg: '#F1F4F7', panel: '#FFFFFF', ink: '#0D1B2A', muted: '#5D6C7E', faint: '#93A1B1',
  line: '#E2E8F0', lineSoft: '#ECF1F5',
  teal: '#0B5D66', tealDeep: '#07444B', tealTint: '#E1EEEF',
  green: '#0E7A4D', greenTint: '#E2F2EA',
  amber: '#A95E08', amberTint: '#FBF0DC',
  red: '#C0392B', redTint: '#FAE8E5',
  grot: '"Schibsted Grotesk", "Noto Sans TC", sans-serif',
};

const HBPATHS = {
  home: ['M3.5 10.5L12 3.5l8.5 7', 'M5.5 9v11h13V9'],
  bank: ['M12 3L3.5 8.5h17L12 3z', 'M5.5 11.5v5.5M9.8 11.5v5.5M14.2 11.5v5.5M18.5 11.5v5.5', 'M3.5 20.5h17'],
  coins: ['M14.5 9.5a5 5 0 1 0-5 5', 'M19.5 14.5a5 5 0 1 1-10 0 5 5 0 0 1 10 0z'],
  doc: ['M6.5 3.5h7l4 4v13h-11v-17z', 'M13.5 3.5v4h4'],
  tasks: ['M4.5 5.5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-13z', 'M8 12.2l2.8 2.8L16.5 9'],
  chart: ['M5 19.5v-6M10.3 19.5V7.5M15.6 19.5v-9', 'M3.5 19.5h17'],
  shield: ['M12 3l7.5 2.8V12c0 4.6-3.2 7-7.5 8.5C7.7 19 4.5 16.6 4.5 12V5.8L12 3z'],
  chevR: ['M9.5 6l6 6-6 6'],
  chevL: ['M14.5 6l-6 6 6 6'],
  chevD: ['M6 9.5l6 6 6-6'],
  send: ['M20.5 3.5L10 14', 'M20.5 3.5L14 20.5l-3.5-6.5L4 10.5l16.5-7z'],
  clip: ['M20 12.5l-7.8 7.8a5 5 0 0 1-7-7L13 5.5a3.3 3.3 0 0 1 4.7 4.7L10 18'],
  spark: ['M12 3.5l1.7 5 5 1.7-5 1.7-1.7 5-1.7-5-5-1.7 5-1.7 1.7-5z'],
  lock: ['M6.5 11h11v9.5h-11V11z', 'M8.5 11V7.5a3.5 3.5 0 0 1 7 0V11'],
  pen: ['M4 20l1-4L16.5 4.5a2 2 0 0 1 3 3L8 19l-4 1z'],
  arrowUR: ['M7 17L17 7', 'M9.5 7H17v7.5'],
  phone: ['M5 4.5h3.5l1.8 4.5-2.3 1.5a11.5 11.5 0 0 0 5.5 5.5l1.5-2.3 4.5 1.8V19a2 2 0 0 1-2 2A15.5 15.5 0 0 1 3 6.5a2 2 0 0 1 2-2z'],
  check: ['M5 12.5l4.5 4.5L19 7'],
  checks: ['M2.5 12.5l4 4L14 9', 'M10.5 14.5l2 2L21 8'],
  upload: ['M12 16V4.5', 'M7.5 9L12 4.5 16.5 9', 'M5 16.5v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3'],
  x: ['M6 6l12 12M18 6L6 18'],
  camera: ['M4.5 7.5h3l1.5-2h6l1.5 2h3v11h-15v-11z', 'M12 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'],
  msg: ['M4 5.5h16v11H9l-5 4v-15z'],
  cal: ['M4.5 6.5h15v13h-15v-13z', 'M4.5 10.5h15', 'M8.5 4v4M15.5 4v4'],
  search: ['M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z', 'M15.5 15.5L20 20'],
  receipt: ['M5.5 3.5h13v17l-2.2-1.5-2.1 1.5-2.2-1.5-2.1 1.5-2.2-1.5-2.2 1.5v-17z', 'M8.5 8h7M8.5 11.5h7M8.5 15h4'],
  whatsapp: ['M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.4-1.2A8.5 8.5 0 1 0 12 3.5z', 'M9 8.5c0 4 2.5 6.5 6.5 6.5'],
};

function HIcon({ name, size = 20, color = 'currentColor', sw = 1.7, style }) {
  const paths = HBPATHS[name] || [];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style} aria-hidden="true">
      {paths.map((d, i) => (
        <path key={i} d={d} stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
      ))}
    </svg>
  );
}

function HBTile({ size = 30, accent }) {
  const c = accent || HB.teal;
  return (
    <div style={{ width: size, height: size, borderRadius: size * 0.28, background: c, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 18 18">
        <rect x="1" y="10" width="4" height="7" rx="1.2" fill="#fff" opacity=".75" />
        <rect x="7" y="5.5" width="4" height="11.5" rx="1.2" fill="#fff" opacity=".9" />
        <rect x="13" y="1" width="4" height="16" rx="1.2" fill="#fff" />
      </svg>
    </div>
  );
}

function HBArea({ data, w = 300, h = 80, color = HB.teal, fill = 'rgba(11,93,102,.09)', sw = 2, dot = true }) {
  const min = Math.min(...data), max = Math.max(...data);
  const px = (i) => 3 + (i / (data.length - 1)) * (w - 8);
  const py = (v) => h - 4 - ((v - min) / ((max - min) || 1)) * (h - 16);
  const pts = data.map((v, i) => px(i) + ',' + py(v)).join(' ');
  return (
    <svg width={w} height={h} viewBox={'0 0 ' + w + ' ' + h} style={{ display: 'block', maxWidth: '100%' }}>
      <polygon points={'3,' + h + ' ' + pts + ' ' + (w - 5) + ',' + h} fill={fill} />
      <polyline points={pts} fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
      {dot && <circle cx={px(data.length - 1)} cy={py(data[data.length - 1])} r="3.5" fill={color} />}
    </svg>
  );
}

/* ── scenario data ── */
const HBD = {
  date: '12 June 2026',
  company: 'ABC Trading Ltd',
  user: 'David',
  cashTrendK: [982, 1004, 1061, 1027, 1093, 1152, 1188, 1245],
  accounts: [
    { name: 'HSBC Current', tail: '4821', bal: 823400, note: 'Synced to 31 May', ok: true },
    { name: 'HSBC Savings', tail: '4839', bal: 312600, note: 'USD equiv. · synced', ok: true },
    { name: 'BOC Current', tail: '7702', bal: 109300, note: 'May statement needed', ok: false },
  ],
  pl: [
    ['Revenue', 380000], ['Cost of sales', -190000], ['Gross profit', 190000, 'sub'],
    ['Rent', -28000], ['Advertising', -42000], ['Salaries & MPF', -18600], ['Other opex', -6400],
  ],
  compliance: [
    { due: '30 Jun', label: 'NAR1 Annual Return', status: 'amber', note: 'Confirm company details — 1 min' },
    { due: '30 Jun', label: 'BIR51 Profits Tax Return', status: 'amber', note: 'Ready for your signature' },
    { due: '14 Aug', label: 'Business Registration renewal', status: 'green', note: 'We will prepare it' },
    { due: 'Done', label: 'MPF remittance · May', status: 'green', note: 'Filed 8 Jun' },
  ],
  documents: [
    { name: 'office_rent_invoice_jun.pdf', via: 'Email forward', when: 'Today 09:12', st: 'Booked' },
    { name: 'IMG_4402.jpg (taxi receipt)', via: 'WhatsApp', when: 'Today 08:55', st: 'Booked' },
    { name: 'shopify_payout_may.csv', via: 'Shopify sync', when: 'Yesterday', st: 'Booked' },
    { name: 'wk_logistics_invoice.pdf', via: 'Drive folder', when: '2 days ago', st: 'Needs answer' },
  ],
};

const fmtHKD = (n) => (n < 0 ? '(' + Math.abs(n).toLocaleString('en-US') + ')' : n.toLocaleString('en-US'));

Object.assign(window, { HB, HIcon, HBTile, HBArea, HBD, fmtHKD });