/* ============================================================
   Bizia — Leads / mini-CRM  (/app/leads)  [add-on]
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Card, Badge, Button, Icon, PageHeader, Drawer, Avatar, Input } = window;

  const channelIcon = { globe: 'Website form', whatsapp: 'WhatsApp', google: 'Google', instagram: 'Instagram', users: 'Referral' };
  const stageTone = { New: 'info', Contacted: 'primary', Quoted: 'accent', Won: 'success', Lost: 'neutral' };

  function LeadCard({ lead, onClick }) {
    return React.createElement('div', { onClick, draggable: true,
      style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)', padding: 13, cursor: 'pointer', boxShadow: 'var(--sh-xs)', transition: 'box-shadow .15s, transform .15s' },
      onMouseEnter: (e) => { e.currentTarget.style.boxShadow = 'var(--sh-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; },
      onMouseLeave: (e) => { e.currentTarget.style.boxShadow = 'var(--sh-xs)'; e.currentTarget.style.transform = 'none'; } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9 } },
        React.createElement(Avatar, { name: lead.name, size: 30 }),
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { style: { fontSize: 13.5, fontWeight: 650, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, lead.name),
          React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted)' } }, lead.when)),
        lead.value > 0 ? React.createElement('span', { style: { fontSize: 12.5, fontWeight: 700, color: 'var(--secondary)' } }, '$' + lead.value) : null),
      React.createElement('p', { style: { fontSize: 12.5, color: 'var(--text-2)', marginTop: 9, lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, lead.message),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 } },
        React.createElement(Badge, { tone: 'neutral', size: 'sm', icon: lead.channel }, channelIcon[lead.channel] || lead.source),
        lead.assigned ? React.createElement('div', { style: { marginLeft: 'auto' } }, React.createElement(Avatar, { name: lead.assigned, size: 22 })) : null),
    );
  }

  function LeadsPage() {
    const data = window.DATA;
    const [leads, setLeads] = useState(data.leads || []);
    const [active, setActive] = useState(null);
    // 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;

    useEffect(() => {
      if (!projectId) return;
      window.API.leads.list(projectId).then(r => { if (r?.length) setLeads(r); }).catch(() => {});
    }, [projectId]);
    const [q, setQ] = useState('');
    const filtered = q ? leads.filter(l => (l.name + l.message + l.source).toLowerCase().includes(q.toLowerCase())) : leads;

    return React.createElement('div', { className: 'bz-anim-up' },
      React.createElement(PageHeader, {
        icon: 'inbox', title: 'Leads', badge: React.createElement(Badge, { tone: 'neutral', size: 'sm' }, 'Add-on'),
        sub: 'Every enquiry from your website forms, in one simple pipeline. Track, reply and close.',
        actions: React.createElement('div', { style: { display: 'flex', gap: 10 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, height: 40, padding: '0 12px', borderRadius: 'var(--r-md)', background: 'var(--surface)', border: '1px solid var(--border-strong)' } },
            React.createElement(Icon, { name: 'search', size: 16, style: { color: 'var(--muted)' } }),
            React.createElement('input', { value: q, onChange: (e) => setQ(e.target.value), placeholder: 'Search leads…', style: { border: 'none', outline: 'none', background: 'transparent', fontSize: 13.5, color: 'var(--text)', width: 140 } })),
          React.createElement(Button, { variant: 'outline', icon: 'filter', onClick: () => window.toast({ title: 'Filters', tone: 'info' }) }, 'Filter')),
      }),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(5,minmax(220px,1fr))', gap: 14, overflowX: 'auto', paddingBottom: 8 } },
        data.leadStages.map(stage => {
          const items = filtered.filter(l => l.stage === stage);
          return React.createElement('div', { key: stage, style: { minWidth: 220 } },
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, padding: '0 2px' } },
              React.createElement('span', { style: { width: 8, height: 8, borderRadius: 999, background: 'var(--' + (stageTone[stage] === 'neutral' ? 'muted-2' : stageTone[stage]) + ')' } }),
              React.createElement('span', { style: { fontSize: 13.5, fontWeight: 650 } }, stage),
              React.createElement('span', { style: { fontSize: 12, color: 'var(--muted)', background: 'var(--surface-3)', borderRadius: 999, padding: '1px 8px' } }, items.length)),
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--r-md)', padding: 10, minHeight: 120, border: '1px solid var(--border-soft)' } },
              items.length ? items.map(l => React.createElement(LeadCard, { key: l.id, lead: l, onClick: () => setActive(l) }))
                : React.createElement('div', { style: { fontSize: 12, color: 'var(--muted-2)', textAlign: 'center', padding: '18px 0' } }, 'No leads')));
        }),
      ),

      // detail drawer
      React.createElement(Drawer, { open: !!active, onClose: () => setActive(null), width: 440 },
        active ? React.createElement('div', { style: { padding: 24 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 } },
            React.createElement(Badge, { tone: stageTone[active.stage], dot: true }, active.stage),
            React.createElement(window.IconButton, { name: 'x', label: 'Close', onClick: () => setActive(null) })),
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 13 } },
            React.createElement(Avatar, { name: active.name, size: 48 }),
            React.createElement('div', null,
              React.createElement('div', { style: { fontSize: 18, fontWeight: 700 } }, active.name),
              React.createElement('div', { style: { fontSize: 13, color: 'var(--muted)' } }, active.email))),
          React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 16 } },
            React.createElement(Button, { variant: 'primary', size: 'sm', icon: 'mail', style: { flex: 1 }, onClick: () => window.toast({ title: 'Reply sent (demo)', tone: 'success' }) }, 'Reply'),
            React.createElement(Button, { variant: 'outline', size: 'sm', icon: 'phone', onClick: () => {} }, 'Call'),
            React.createElement(Button, { variant: 'outline', size: 'sm', icon: 'whatsapp', onClick: () => {} })),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, margin: '20px 0', background: 'var(--border-soft)', borderRadius: 'var(--r-md)', overflow: 'hidden', border: '1px solid var(--border-soft)' } },
            [['Source', channelIcon[active.channel] || active.source], ['Page', active.page], ['Device', active.device], ['Assigned', active.assigned || 'Unassigned']].map((r, i) =>
              React.createElement('div', { key: i, style: { padding: '12px 14px', background: 'var(--surface)' } },
                React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted)' } }, r[0]),
                React.createElement('div', { style: { fontSize: 13.5, fontWeight: 600, marginTop: 2 } }, r[1])))),
          React.createElement('div', { style: { fontSize: 12.5, fontWeight: 650, color: 'var(--muted)', marginBottom: 7 } }, 'Message'),
          React.createElement('div', { style: { padding: 14, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', fontSize: 13.5, lineHeight: 1.5 } }, active.message),
          // AI reply
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, margin: '18px 0 8px' } }, React.createElement(window.BiziaMark, { size: 20 }), React.createElement('span', { style: { fontSize: 13, fontWeight: 650 } }, 'Suggested reply')),
          React.createElement('div', { style: { padding: 14, borderRadius: 'var(--r-md)', background: 'var(--primary-soft)', fontSize: 13, lineHeight: 1.5, color: 'var(--primary-700)' } },
            'Hi ' + active.name.split(' ')[0] + ', thanks for reaching out! We’d love to help with this. Are you available for a quick call this week to go over the details?'),
          React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 10 } },
            React.createElement(Button, { variant: 'soft', size: 'sm', icon: 'check', onClick: () => window.toast({ title: 'Reply inserted', tone: 'success' }) }, 'Use reply'),
            React.createElement(Button, { variant: 'ghost', size: 'sm', icon: 'refresh', onClick: () => {} }, 'Regenerate')),
          active.notes ? React.createElement('div', { style: { marginTop: 18 } },
            React.createElement('div', { style: { fontSize: 12.5, fontWeight: 650, color: 'var(--muted)', marginBottom: 7 } }, 'Notes'),
            React.createElement('div', { style: { fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5, padding: 12, borderRadius: 'var(--r-md)', background: 'var(--surface-2)' } }, active.notes)) : null,
        ) : null,
      ),
    );
  }

  window.LeadsPage = LeadsPage;
})();