// Reminder page — Bengkel Mitra Sejahtera
function ReminderPage({ role }) {
  const [tab, setTab] = useState('all');
  const [cabang, setCabang] = useState('all');
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState([]);

  const reminders = useMemo(() => buildReminders(), []);
  const filtered = reminders.filter(r => {
    if (tab === 'service' && r.kind !== 'service') return false;
    if (tab === 'doc'     && r.kind !== 'doc') return false;
    if (tab === 'urgent'  && r.tone !== 'danger') return false;
    if (cabang !== 'all' && r.cabang !== cabang) return false;
    if (search && !(r.title + ' ' + r.sub).toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const counts = {
    all:     reminders.length,
    service: reminders.filter(r => r.kind === 'service').length,
    doc:     reminders.filter(r => r.kind === 'doc').length,
    urgent:  reminders.filter(r => r.tone === 'danger').length,
  };

  const allSelected = filtered.length > 0 && filtered.every(r => selected.includes(r.id));
  const toggleAll = () => setSelected(allSelected ? selected.filter(id => !filtered.find(r => r.id === id)) : [...new Set([...selected, ...filtered.map(r => r.id)])]);
  const toggleOne = (id) => setSelected(selected.includes(id) ? selected.filter(x => x !== id) : [...selected, id]);

  return (
    <div>
      <PageHeader
        eyebrow="Operasional"
        title="Reminder Servis & Dokumen"
        subtitle={`${counts.all} reminder aktif di seluruh cabang — ${counts.urgent} mendesak, ${counts.service} servis berkala, ${counts.doc} dokumen.`}
        actions={
          <Fragment>
            <Btn icon="settings" tone="outline">Konfigurasi Channel</Btn>
            <Btn icon="send" disabled={selected.length === 0}>Kirim {selected.length || ''} reminder</Btn>
          </Fragment>
        }
      />

      {/* KPI bar */}
      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        <Kpi label="Total Due" value={counts.all} hint="dari 180 kendaraan" icon="bellRing" tone="info" />
        <Kpi label="Mendesak (≤7 hari)" value={counts.urgent} hint="WA + Email otomatis" icon="alert" tone="danger" />
        <Kpi label="Servis Berkala" value={counts.service} hint="oli, rem, ban, aki" icon="wrench" tone="warn" />
        <Kpi label="Dokumen" value={counts.doc} hint="STNK, pajak, KIR, asuransi" icon="document" tone="warn" />
      </div>

      {/* Channel preview row */}
      <Card style={{padding:16, marginBottom:14}}>
        <SectionHead title="Preview channel pengiriman" hint="Customer akan menerima reminder via 3 channel sekaligus" />
        <div className="grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
          <div>
            <div className="row gap-2 mb-2" style={{alignItems:'center'}}>
              <Icon name="whatsapp" size={16} />
              <span style={{fontSize:13, fontWeight:600}}>WhatsApp</span>
              <Pill tone="success" dot>Aktif</Pill>
            </div>
            <div className="wa-preview">
              <div style={{fontWeight:600, marginBottom:4}}>Halo Pak Andika 👋</div>
              Toyota Avanza B 1234 ABC sudah <b>4.300 km</b> dari ganti oli terakhir. Yuk booking servis berkala di BMS Sunter.<br /><br />
              📅 Tap untuk pilih slot →
              <div className="wa-meta">09:42 <Icon name="check" size={11} /><Icon name="check" size={11} /></div>
            </div>
          </div>
          <div>
            <div className="row gap-2 mb-2" style={{alignItems:'center'}}>
              <Icon name="message" size={16} />
              <span style={{fontSize:13, fontWeight:600}}>Email</span>
              <Pill tone="success" dot>Aktif</Pill>
            </div>
            <div style={{background:'hsl(var(--card))', border:'1px solid hsl(var(--border))', borderRadius:10, padding:'10px 12px', fontSize:13}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginBottom:6}}>From: cs@bengkelmitra.id</div>
              <div style={{fontWeight:600, marginBottom:4}}>Reminder Servis — Toyota Avanza B 1234 ABC</div>
              <div style={{color:'hsl(var(--muted-foreground))', lineHeight:1.4}}>
                Berdasarkan data servis terakhir, kendaraan Anda perlu ganti oli mesin. Estimasi biaya Rp 350.000…
              </div>
              <div style={{marginTop:8}}><Btn size="sm">Booking Online</Btn></div>
            </div>
          </div>
          <div>
            <div className="row gap-2 mb-2" style={{alignItems:'center'}}>
              <Icon name="bell" size={16} />
              <span style={{fontSize:13, fontWeight:600}}>Push (App)</span>
              <Pill tone="warn" dot>62% opt-in</Pill>
            </div>
            <div style={{background:'#1f2937', borderRadius:10, padding:'10px 12px', color:'#fff', fontSize:13}}>
              <div style={{fontSize:11, opacity:0.7, marginBottom:4}}>BMS Mitra Sejahtera • now</div>
              <div style={{fontWeight:600}}>🔧 Saatnya servis Avanza Anda</div>
              <div style={{opacity:0.85, lineHeight:1.4, marginTop:2}}>Sudah 4.300 km dari oli terakhir. Booking sekarang dapat diskon 10%.</div>
            </div>
          </div>
        </div>
      </Card>

      {/* Filter */}
      <Card style={{padding:14, marginBottom:12}}>
        <div className="row gap-3" style={{flexWrap:'wrap'}}>
          <div className="row gap-1" style={{background:'hsl(var(--muted))', borderRadius:8, padding:3}}>
            {[
              { id:'all',     label:`Semua (${counts.all})` },
              { id:'urgent',  label:`Mendesak (${counts.urgent})` },
              { id:'service', label:`Servis (${counts.service})` },
              { id:'doc',     label:`Dokumen (${counts.doc})` },
            ].map(t => (
              <button key={t.id} onClick={() => setTab(t.id)}
                style={{padding:'6px 12px', fontSize:13, fontWeight:600, borderRadius:6,
                  background: tab === t.id ? 'hsl(var(--card))' : 'transparent',
                  color: tab === t.id ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                  border:'none', cursor:'pointer',
                  boxShadow: tab === t.id ? '0 1px 2px rgb(0 0 0 / 0.06)' : 'none'}}>
                {t.label}
              </button>
            ))}
          </div>
          <select value={cabang} onChange={e => setCabang(e.target.value)} style={{padding:'7px 10px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}}>
            <option value="all">Semua cabang</option>
            {CABANG.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <div style={{flex:1, position:'relative', minWidth:200}}>
            <Icon name="search" size={14} style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'hsl(var(--muted-foreground))'}} />
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Cari plat, nama, atau merk..."
              style={{width:'100%', padding:'7px 10px 7px 30px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}} />
          </div>
          {selected.length > 0 && (
            <Btn size="sm" tone="ghost" onClick={() => setSelected([])} icon="x">Clear ({selected.length})</Btn>
          )}
        </div>
      </Card>

      {/* List */}
      <Card style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'10px 14px', borderBottom:'1px solid hsl(var(--border))', display:'flex', alignItems:'center', gap:10, background:'hsl(var(--muted) / 0.3)'}}>
          <input type="checkbox" checked={allSelected} onChange={toggleAll} />
          <span style={{fontSize:12.5, color:'hsl(var(--muted-foreground))'}}>{filtered.length} reminder · diurutkan paling mendesak</span>
        </div>
        <div className="flex-col" style={{padding:14, gap:8}}>
          {filtered.map(r => (
            <div key={r.id} className={'reminder-card ' + (r.tone === 'danger' ? 'urgent' : r.tone === 'warn' ? 'warn' : 'ok')}>
              <input type="checkbox" checked={selected.includes(r.id)} onChange={() => toggleOne(r.id)} style={{margin:0}} />
              <div className="row gap-3" style={{flex:1, alignItems:'center', minWidth:0}}>
                <div className={'reminder-icon-wrap ' + (r.tone === 'danger' ? 'urgent' : r.tone === 'warn' ? 'warn' : '')}>
                  <Icon name={r.icon} size={18} />
                </div>
                <div className="reminder-meta" style={{flex:1}}>
                  <div className="reminder-title">{r.title}</div>
                  <div className="reminder-sub">
                    <span>{r.sub}</span>
                    <span className="sep">•</span>
                    <span>{cabangName(r.cabang)}</span>
                    <span className="sep">•</span>
                    <Pill tone={r.kind === 'doc' ? 'accent' : 'neutral'}>{r.kind === 'doc' ? 'Dokumen' : 'Servis'}</Pill>
                  </div>
                  <div className="reminder-progress"><div className={'bar ' + r.tone} style={{width: r.progress + '%'}} /></div>
                </div>
              </div>
              <div className="reminder-actions">
                <Btn size="sm" tone="ghost" icon="whatsapp" title="WA" />
                <Btn size="sm" tone="ghost" icon="message" title="Email" />
                <Btn size="sm" tone="outline">Booking</Btn>
              </div>
            </div>
          ))}
          {filtered.length === 0 && (
            <div style={{textAlign:'center', padding:'40px 20px', color:'hsl(var(--muted-foreground))', fontSize:13}}>
              <Icon name="checkCircle" size={32} style={{opacity:0.4}} />
              <div style={{marginTop:10}}>Tidak ada reminder dengan filter ini.</div>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}

window.ReminderPage = ReminderPage;