/* ============================================================
   Bizia — Employee e-cards  (/app/ecards)  [add-on]
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Card, Badge, Button, Icon, PageHeader, Drawer, Avatar, Input, Sparkline } = window;

  function QrMock({ size = 90, color = '#2A2118' }) {
    // deterministic pseudo-QR grid
    const n = 11; const cells = [];
    for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) { const on = (r * 7 + c * 13 + r * c) % 3 === 0 || (r < 3 && c < 3) || (r < 3 && c > n - 4) || (r > n - 4 && c < 3); if (on) cells.push([r, c]); }
    const s = size / n;
    return React.createElement('svg', { width: size, height: size, style: { display: 'block' } },
      React.createElement('rect', { width: size, height: size, fill: '#fff' }),
      cells.map(([r, c], i) => React.createElement('rect', { key: i, x: c * s, y: r * s, width: s, height: s, fill: color, rx: 1 })),
    );
  }

  function ECardPreview({ emp, orgName }) {
    return React.createElement('div', { style: { borderRadius: 'var(--r-lg)', overflow: 'hidden', boxShadow: 'var(--sh-lg)', background: '#fff', border: '1px solid var(--border)' } },
      React.createElement('div', { style: { height: 70, background: 'linear-gradient(120deg,' + emp.color + ',' + emp.color + 'bb)', position: 'relative' } },
        React.createElement('div', { style: { position: 'absolute', left: 18, bottom: -24 } }, React.createElement(Avatar, { name: emp.name, tone: emp.color, size: 56, ring: true }))),
      React.createElement('div', { style: { padding: '32px 18px 18px' } },
        React.createElement('div', { style: { fontSize: 17, fontWeight: 700 } }, emp.name),
        React.createElement('div', { style: { fontSize: 13, color: 'var(--muted)' } }, orgName ? emp.role + ' · ' + orgName : emp.role),
        React.createElement('div', { style: { display: 'flex', gap: 16, marginTop: 16 } },
          React.createElement('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: 8 } },
            [['phone', emp.phone], ['mail', emp.email], ['whatsapp', emp.whatsapp || '—'], ['calendar', emp.booking || 'No booking link']].map((r, i) =>
              React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-2)' } }, React.createElement(Icon, { name: r[0], size: 13, style: { color: emp.color } }), React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, r[1])))),
          React.createElement('div', { style: { textAlign: 'center' } }, React.createElement(QrMock, { size: 78, color: emp.color }), React.createElement('div', { style: { fontSize: 10, color: 'var(--muted)', marginTop: 4, fontFamily: 'var(--font-mono)' } }, 'bizia.app/card/' + emp.slug))),
        React.createElement('div', { style: { display: 'flex', gap: 7, marginTop: 14 } },
          React.createElement('span', { style: { flex: 1, textAlign: 'center', padding: '9px', borderRadius: 9, background: emp.color, color: '#fff', fontSize: 12.5, fontWeight: 650 } }, 'Save contact'),
          React.createElement('span', { style: { padding: '9px 12px', borderRadius: 9, border: '1px solid var(--border)', fontSize: 12.5, fontWeight: 600 } }, 'Share'))),
    );
  }

  function EcardsPage() {
    const data = window.DATA;
    const [employees, setEmployees] = useState(data.employees || []);
    const [active, setActive] = useState(data.employees?.[0] || null);
    const [addOpen, setAddOpen] = useState(false);
    const totalScans = employees.reduce((a, e) => a + e.scans, 0);
    // Hash-routed SPA — the ?project= query string lives inside
    // window.location.hash, not window.location.search (which is always
    // empty here). Reading .search silently fell back to a mock project.
    const projectId = new URLSearchParams(window.location.hash.split('?')[1] || '').get('project') || data.projects?.[0]?.id;
    const [orgName, setOrgName] = useState('');

    useEffect(() => {
      if (!projectId) return;
      window.API.ecards.list(projectId).then(r => { if (r?.length) { setEmployees(r); setActive(a => a || r[0]); } }).catch(() => {});
    }, [projectId]);

    useEffect(() => {
      window.API.auth.getOrgs().then(orgs => { if (orgs?.[0]?.name) setOrgName(orgs[0].name); }).catch(() => {});
    }, []);

    return React.createElement('div', { className: 'bz-anim-up' },
      React.createElement(PageHeader, {
        icon: 'idcard', title: 'Employee e-cards', badge: React.createElement(Badge, { tone: 'neutral', size: 'sm' }, 'Add-on'),
        sub: 'Optional: digital business cards for your team — with QR codes, email signatures and shareable links.',
        actions: React.createElement('div', { style: { display: 'flex', gap: 10 } },
          React.createElement(Button, { variant: 'outline', icon: 'upload', onClick: () => window.toast({ title: 'Bulk upload', desc: 'CSV import mocked.', tone: 'info' }) }, 'Bulk upload'),
          React.createElement(Button, { variant: 'primary', icon: 'plus', onClick: () => setAddOpen(true) }, 'Add employee')),
      }),
      // metrics
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 16, marginBottom: 20 } },
        React.createElement(window.MetricCard, { icon: 'idcard', iconTone: 'primary', label: 'Active e-cards', value: employees.length }),
        React.createElement(window.MetricCard, { icon: 'qr', iconTone: 'secondary', label: 'Total scans', value: window.fmt.k(totalScans), delta: '+24%', deltaDir: 'up' }),
        React.createElement(window.MetricCard, { icon: 'eye', iconTone: 'accent', label: 'Card views (mo)', value: '2,140', delta: '+12%', deltaDir: 'up' }),
      ),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'minmax(0,1.5fr) 320px', gap: 16, alignItems: 'start' }, className: 'bz-ecard-grid' },
        // table
        React.createElement(Card, { pad: 0, style: { overflow: 'hidden' } },
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 80px', gap: 8, padding: '12px 18px', borderBottom: '1px solid var(--border)', fontSize: 12, fontWeight: 600, color: 'var(--muted)' } },
            React.createElement('span', null, 'Employee'), React.createElement('span', null, 'Department'), React.createElement('span', null, 'Scans'), React.createElement('span', null, '')),
          employees.map((e, i) => React.createElement('div', { key: e.id, onClick: () => setActive(e),
            style: { display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 80px', gap: 8, padding: '13px 18px', borderBottom: i < employees.length - 1 ? '1px solid var(--border-soft)' : 'none', cursor: 'pointer', alignItems: 'center', background: active?.id === e.id ? 'var(--surface-3)' : 'transparent' },
            onMouseEnter: (ev) => { if (active?.id !== e.id) ev.currentTarget.style.background = 'var(--surface-2)'; },
            onMouseLeave: (ev) => { if (active?.id !== e.id) ev.currentTarget.style.background = 'transparent'; } },
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 } }, React.createElement(Avatar, { name: e.name, tone: e.color, size: 34 }),
              React.createElement('div', { style: { minWidth: 0 } }, React.createElement('div', { style: { fontSize: 13.5, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, e.name), React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted)' } }, e.role))),
            React.createElement('span', { style: { fontSize: 13, color: 'var(--text-2)' } }, e.dept),
            React.createElement('span', { style: { fontSize: 13, fontWeight: 600 } }, e.scans),
            React.createElement('span', { style: { fontSize: 11.5, fontFamily: 'var(--font-mono)', color: 'var(--primary)' } }, '/' + e.slug))),
        ),
        // preview + signature + chart
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          React.createElement(ECardPreview, { emp: active, orgName }),
          React.createElement(Card, { pad: 18 },
            React.createElement('h4', { style: { fontSize: 13.5, fontWeight: 650, marginBottom: 10 } }, 'Email signature'),
            React.createElement('div', { style: { display: 'flex', gap: 11, padding: 12, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', borderLeft: '3px solid ' + active.color } },
              React.createElement(Avatar, { name: active.name, tone: active.color, size: 40 }),
              React.createElement('div', { style: { minWidth: 0 } },
                React.createElement('div', { style: { fontSize: 13, fontWeight: 700 } }, active.name),
                React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted)' } }, orgName ? active.role + ' · ' + orgName : active.role),
                React.createElement('div', { style: { fontSize: 11, color: active.color, marginTop: 3, fontFamily: 'var(--font-mono)' } }, active.email))),
            React.createElement(Button, { variant: 'ghost', size: 'sm', icon: 'copy', full: true, style: { marginTop: 10 }, onClick: () => window.toast({ title: 'Signature copied', tone: 'success' }) }, 'Copy signature'),
          ),
          React.createElement(Card, { pad: 18 },
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 } }, React.createElement('h4', { style: { fontSize: 13.5, fontWeight: 650 } }, 'Scans (14 days)'), React.createElement('span', { style: { fontSize: 13, fontWeight: 700, color: 'var(--secondary)' } }, active.scans)),
            React.createElement(Sparkline, { data: [4, 7, 5, 9, 8, 12, 10, 14, 11, 16, 13, 18, 15, 17], color: 'var(--secondary)', w: 270, h: 44 })),
        ),
      ),

      React.createElement(Drawer, { open: addOpen, onClose: () => setAddOpen(false), width: 420 },
        React.createElement('div', { style: { padding: 24 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 } }, React.createElement('h2', { style: { fontSize: 19, fontWeight: 700 } }, 'Add employee'), React.createElement(window.IconButton, { name: 'x', label: 'Close', onClick: () => setAddOpen(false) })),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
            React.createElement(Input, { label: 'Full name', icon: 'users', placeholder: 'e.g. Jamie Lee' }),
            React.createElement(Input, { label: 'Role', icon: 'briefcase', placeholder: 'e.g. Barista' }),
            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } }, React.createElement(Input, { label: 'Phone', icon: 'phone', placeholder: '+1…' }), React.createElement(Input, { label: 'Department', icon: 'building', placeholder: 'Floor' })),
            React.createElement(Input, { label: 'Email', icon: 'mail', placeholder: 'name@amazebites.cafe' }),
            React.createElement(Input, { label: 'Card URL', icon: 'link', placeholder: 'jamie', suffix: 'bizia.app/card/' })),
          React.createElement('div', { style: { display: 'flex', gap: 10, marginTop: 20 } },
            React.createElement(Button, { variant: 'ghost', onClick: () => setAddOpen(false), style: { flex: 1 } }, 'Cancel'),
            React.createElement(Button, { variant: 'primary', icon: 'check', style: { flex: 1 }, onClick: () => { window.toast({ title: 'E-card created', tone: 'success' }); setAddOpen(false); } }, 'Create e-card')),
        ),
      ),
      React.createElement('style', null, '@media(max-width:820px){.bz-ecard-grid{grid-template-columns:1fr !important}}'),
    );
  }

  window.EcardsPage = EcardsPage;
})();