// admin/pages/whatsapp.jsx — WhatsApp CRM automation + broadcast + log

function WhatsAppPage() {
  const admin = useAdmin();
  const s = admin.getSettings();
  const log = admin.getWaLog();
  const customers = admin.getCustomers();
  const [tab, setTab] = React.useState('automation');

  return (
    <div>
      <div className="row" style={{ marginBottom: 20, gap: 8 }}>
        {[['automation', 'Automation'], ['broadcast', 'Broadcast'], ['log', 'Message log']].map(([k, l]) => (
          <button key={k} className={'chip' + (tab === k ? ' active' : '')} onClick={() => setTab(k)}>{l}{k === 'log' ? ' · ' + log.length : ''}</button>
        ))}
      </div>

      {tab === 'automation' && <WaAutomation />}
      {tab === 'broadcast' && <WaBroadcast customers={customers} />}
      {tab === 'log' && <WaLog log={log} />}
    </div>
  );
}

function WaAutomation() {
  const admin = useAdmin();
  const [s, setS] = React.useState(() => admin.getSettings());
  const save = () => { admin.saveSettings(s); HAPStore && HAPStore.notify && HAPStore.notify('WhatsApp settings saved'); };
  const setWa = (patch) => setS(prev => ({ ...prev, whatsapp: { ...prev.whatsapp, ...patch } }));
  const setTpl = (k, v) => setWa({ templates: { ...s.whatsapp.templates, [k]: v } });
  const setAuto = (k, v) => setWa({ autosend: { ...s.whatsapp.autosend, [k]: v } });

  const stages = [
    ['placed', 'Order placed', 'Sent automatically when a customer checks out'],
    ['packed', 'Order packed', 'When you mark an order as Packed'],
    ['shipped', 'Order shipped', 'When you add courier + AWB and mark Shipped'],
    ['out_for_delivery', 'Out for delivery', 'When you mark Out for delivery'],
    ['delivered', 'Delivered', 'When you mark an order Delivered']
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 18, maxWidth: 880 }}>
      <div className="card card-pad">
        <div className="spread">
          <div>
            <h2 style={{ fontSize: '1rem' }}>WhatsApp automation</h2>
            <p className="muted" style={{ fontSize: '.84rem', marginTop: 4 }}>Status messages are queued automatically and logged. Open them pre-filled from any order, or send via your WhatsApp Business number.</p>
          </div>
          <label className="row" style={{ gap: 8 }}>
            <span style={{ fontSize: '.84rem', fontWeight: 600 }}>{s.whatsapp.enabled ? 'On' : 'Off'}</span>
            <input type="checkbox" checked={s.whatsapp.enabled} onChange={e => setWa({ enabled: e.target.checked })} />
          </label>
        </div>
        <div className="field" style={{ marginTop: 14, maxWidth: 300 }}>
          <label>WhatsApp Business number</label>
          <input className="inp" value={s.whatsapp.businessNumber} onChange={e => setWa({ businessNumber: e.target.value })} />
        </div>
      </div>

      {stages.map(([k, label, hint]) => (
        <div className="card card-pad" key={k}>
          <div className="spread" style={{ marginBottom: 10 }}>
            <div>
              <div className="row" style={{ gap: 8 }}><AIcon name="whatsapp" size={16} style={{ color: 'var(--a-green)' }} /><b>{label}</b></div>
              <p className="muted" style={{ fontSize: '.78rem', marginTop: 3 }}>{hint}</p>
            </div>
            <label className="row" style={{ gap: 6, fontSize: '.8rem' }}>Auto-send <input type="checkbox" checked={!!s.whatsapp.autosend[k]} onChange={e => setAuto(k, e.target.checked)} /></label>
          </div>
          <textarea className="ta" value={s.whatsapp.templates[k]} onChange={e => setTpl(k, e.target.value)} />
        </div>
      ))}

      <div className="card card-pad">
        <div className="section-title">Variables you can use</div>
        <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
          {['{name}', '{order}', '{total}', '{courier}', '{awb}', '{track}'].map(v => <span key={v} className="chip" style={{ fontFamily: 'var(--a-mono)', fontSize: '.76rem' }}>{v}</span>)}
        </div>
      </div>

      <div className="row" style={{ justifyContent: 'flex-end' }}>
        <button className="btn btn-primary" onClick={save}><AIcon name="check" size={15} />Save automation</button>
      </div>
    </div>
  );
}

function WaBroadcast({ customers }) {
  const admin = useAdmin();
  const s = admin.getSettings();
  const [msg, setMsg] = React.useState(s.whatsapp.templates.promo);
  const [seg, setSeg] = React.useState('all');
  const segments = {
    all: customers,
    repeat: customers.filter(c => c.orders > 1),
    recent: customers.filter(c => c.lastOrderAt && c.lastOrderAt > Date.now() - 30 * 86400000),
    lapsed: customers.filter(c => c.lastOrderAt && c.lastOrderAt < Date.now() - 60 * 86400000)
  };
  const target = segments[seg].filter(c => c.phone);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="bc-grid">
      <div className="card card-pad">
        <div className="section-title">Compose broadcast</div>
        <div className="field" style={{ marginBottom: 12 }}>
          <label>Audience</label>
          <select className="sel" value={seg} onChange={e => setSeg(e.target.value)}>
            <option value="all">All customers ({segments.all.filter(c=>c.phone).length})</option>
            <option value="repeat">Repeat buyers ({segments.repeat.filter(c=>c.phone).length})</option>
            <option value="recent">Ordered in last 30 days ({segments.recent.filter(c=>c.phone).length})</option>
            <option value="lapsed">Lapsed 60+ days ({segments.lapsed.filter(c=>c.phone).length})</option>
          </select>
        </div>
        <div className="field"><label>Message</label><textarea className="ta" style={{ minHeight: 130 }} value={msg} onChange={e => setMsg(e.target.value)} /></div>
        <p className="muted" style={{ fontSize: '.76rem', marginTop: 8 }}>Personalise with <b>{'{name}'}</b>. {window.APG_CONFIG && window.APG_CONFIG.useRemote ? 'Sends via WhatsApp Business API when configured.' : 'Opens WhatsApp for each recipient.'}</p>
        {window.APG_CONFIG && window.APG_CONFIG.useRemote && (
          <button className="btn btn-primary btn-sm" style={{ marginTop: 12 }} onClick={async () => {
            for (const c of target) {
              const text = admin.fillTemplate(msg, { name: c.name.split(' ')[0] });
              await admin.sendWhatsAppApi('-', 'promo', c.phone, text);
            }
            HAPStore && HAPStore.notify && HAPStore.notify('Broadcast queued for ' + target.length + ' customers');
          }}><AIcon name="send" size={14} />Send all via API</button>
        )}
      </div>
      <div className="card card-pad">
        <div className="section-title">{target.length} recipients</div>
        <div style={{ maxHeight: 360, overflowY: 'auto' }}>
          {target.map(c => (
            <div key={c.id} className="spread" style={{ padding: '8px 0', borderBottom: '1px solid var(--a-line)' }}>
              <div><b style={{ fontSize: '.86rem' }}>{c.name}</b><br /><span className="muted" style={{ fontSize: '.76rem' }}>{c.phone}</span></div>
              <a className="btn btn-sm btn-maroon" target="_blank" rel="noreferrer"
                 href={admin.waLink(c.phone, admin.fillTemplate(msg, { name: c.name.split(' ')[0] }))}
                 onClick={() => admin.logWa({ id: '-', details: { phone: c.phone } }, 'promo', admin.fillTemplate(msg, { name: c.name.split(' ')[0] }), 'broadcast')}>
                <AIcon name="send" size={13} />Send
              </a>
            </div>
          ))}
          {target.length === 0 && <p className="muted" style={{ fontSize: '.84rem' }}>No customers with phone numbers in this segment.</p>}
        </div>
      </div>
      <style>{`@media (max-width: 760px){ .bc-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

function WaLog({ log }) {
  return (
    <div className="card">
      <table className="tbl">
        <thead><tr><th>When</th><th>Order</th><th>To</th><th>Stage</th><th>Message</th><th>Mode</th></tr></thead>
        <tbody>
          {log.map((l, i) => (
            <tr key={i}>
              <td className="muted" style={{ fontSize: '.78rem', whiteSpace: 'nowrap' }}>{dateFmt(l.at, true)}</td>
              <td><b>{l.orderId}</b></td>
              <td className="muted">{l.to}</td>
              <td><span className="badge b-new">{l.statusKey}</span></td>
              <td style={{ fontSize: '.8rem', maxWidth: 360 }}>{l.message}</td>
              <td><span className="badge b-packed">{l.mode}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
      {log.length === 0 && <Empty icon="chat" title="No messages yet" note="Status updates and broadcasts will be logged here." />}
    </div>
  );
}
window.WhatsAppPage = WhatsAppPage;