// Customer — database customer, dokumen KTP/SIM, riwayat sewa
const { useState: useStateC, useMemo: useMemoC } = React;

function CustomerPage({ role, setPage }) {
  const [fStatus, setFStatus] = useStateC('all'); // all | vip | aktif | review | blacklist | asing
  const [q, setQ] = useStateC('');
  const [sel, setSel] = useStateC(null);

  const filtered = useMemoC(() => CUSTOMERS.filter(c => {
    if (fStatus === 'asing' && !c.asing) return false;
    if (fStatus !== 'all' && fStatus !== 'asing' && c.status !== fStatus) return false;
    if (q) {
      const s = q.toLowerCase();
      if (!c.nama.toLowerCase().includes(s)
        && !c.id.toLowerCase().includes(s)
        && !c.email.toLowerCase().includes(s)
        && !c.wa.includes(s)
        && !c.kota.toLowerCase().includes(s)) return false;
    }
    return true;
  }), [fStatus, q]);

  const counts = {
    all:       CUSTOMERS.length,
    vip:       CUSTOMERS.filter(c => c.status === 'vip').length,
    aktif:     CUSTOMERS.filter(c => c.status === 'aktif').length,
    review:    CUSTOMERS.filter(c => c.status === 'review').length,
    blacklist: CUSTOMERS.filter(c => c.status === 'blacklist').length,
    asing:     CUSTOMERS.filter(c => c.asing).length,
  };
  const totalSpend = CUSTOMERS.reduce((s, c) => s + c.total_spend, 0);
  const totalBooking = CUSTOMERS.reduce((s, c) => s + c.total_booking, 0);
  const avgRating = (CUSTOMERS.reduce((s, c) => s + c.rating, 0) / CUSTOMERS.length).toFixed(2);

  return (
    <div>
      <PageHeader
        eyebrow="Customer Database"
        title="Pelanggan & CRM"
        subtitle={`${counts.all} customer · ${counts.vip} VIP · ${counts.asing} wisatawan asing · ${counts.blacklist} blacklist`}
        actions={[
          <Btn key="exp" icon="download" tone="ghost"   size="sm">Export CSV</Btn>,
          <Btn key="new" icon="plus"     tone="primary" size="sm">Tambah Customer</Btn>,
        ]}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Total Customer"  value={counts.all}                       hint={`${counts.aktif} aktif · ${counts.vip} VIP`} icon="users" tone="info" />
        <Kpi label="Total Spend"     value={rupiah(totalSpend, {compact:true})} hint="Lifetime revenue" icon="dollar" tone="success" />
        <Kpi label="Total Booking"   value={totalBooking}                     hint={`Avg ${(totalBooking/counts.all).toFixed(1)} booking/customer`} icon="receipt" tone="accent" />
        <Kpi label="Rating Customer" value={`${avgRating} / 5.0`}             hint="Skor dari driver/CS" icon="star" tone="warn" />
      </div>

      {/* Filter chips */}
      <Card className="p-3 mb-4">
        <div className="row gap-3" style={{flexWrap:'wrap', alignItems:'center'}}>
          <div className="row" style={{background:'hsl(var(--muted))', borderRadius:8, padding:2, flexWrap:'wrap'}}>
            {[
              { id:'all',       label:'Semua',     n:counts.all },
              { id:'vip',       label:'VIP',       n:counts.vip },
              { id:'aktif',     label:'Aktif',     n:counts.aktif },
              { id:'asing',     label:'Wisatawan Asing', n:counts.asing },
              { id:'review',    label:'Review',    n:counts.review },
              { id:'blacklist', label:'Blacklist', n:counts.blacklist },
            ].map(t => (
              <button key={t.id} onClick={()=>setFStatus(t.id)}
                style={{padding:'6px 12px', borderRadius:6, border:0, fontSize:12, fontWeight:600, cursor:'pointer',
                  background: fStatus===t.id ? 'hsl(var(--card))' : 'transparent',
                  color: fStatus===t.id ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                  boxShadow: fStatus===t.id ? 'var(--shadow-sm)' : 'none'}}>
                {t.label} <span style={{opacity:0.7}}>· {t.n}</span>
              </button>
            ))}
          </div>
          <div style={{flex:'1 1 240px', minWidth:200, position:'relative'}}>
            <Icon name="search" size={14} style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'hsl(var(--muted-foreground))', pointerEvents:'none'}} />
            <input className="input" placeholder="Cari nama / email / WA / kota…" value={q} onChange={e=>setQ(e.target.value)} style={{paddingLeft:30, width:'100%'}} />
          </div>
        </div>
      </Card>

      {/* Customer table */}
      <Card>
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>Customer</th>
                <th>Kontak</th>
                <th>Asal</th>
                <th>Member Sejak</th>
                <th className="num">Booking</th>
                <th className="num">Total Spend</th>
                <th>Rating</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(c => (
                <tr key={c.id} onClick={() => setSel(c)} style={{cursor:'pointer'}}>
                  <td>
                    <div className="row gap-2" style={{alignItems:'center'}}>
                      <div style={{
                        width:34, height:34, borderRadius:'50%', flexShrink:0,
                        background: c.status==='vip'
                          ? 'linear-gradient(135deg, hsl(45 80% 60%), hsl(38 75% 50%))'
                          : c.status==='blacklist'
                          ? 'linear-gradient(135deg, hsl(0 50% 60%), hsl(0 60% 45%))'
                          : 'linear-gradient(135deg, hsl(188 50% 70%), hsl(195 60% 55%))',
                        color:'white', display:'grid', placeItems:'center',
                        fontFamily:'Fraunces, Georgia, serif', fontSize:13, fontWeight:600,
                      }}>{c.nama.split(' ').map(w=>w[0]).slice(0,2).join('')}</div>
                      <div style={{minWidth:0}}>
                        <div style={{fontSize:13, fontWeight:600}}>{c.nama}{c.asing && <span style={{marginLeft:6, fontSize:10, color:'hsl(var(--muted-foreground))'}}>🌏</span>}</div>
                        <div className="code">{c.id}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div className="mono" style={{fontSize:11.5}}>{c.wa}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{c.email}</div>
                  </td>
                  <td>{c.kota}</td>
                  <td className="mono" style={{fontSize:11.5}}>{formatDateID(c.sejak)}</td>
                  <td className="num mono">{c.total_booking}</td>
                  <td className="num">{rupiah(c.total_spend, {compact:true})}</td>
                  <td>
                    <span className="row gap-1" style={{alignItems:'center'}}>
                      <Icon name="star" size={11} style={{color:'hsl(45 90% 55%)'}}/>
                      <span className="mono" style={{fontSize:12}}>{c.rating}</span>
                    </span>
                  </td>
                  <td>
                    <Pill tone={
                      c.status==='vip'?'accent':
                      c.status==='aktif'?'success':
                      c.status==='review'?'warn':'danger'} dot>
                      {c.status.toUpperCase()}
                    </Pill>
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={8}><div className="empty">Tidak ada customer sesuai filter.</div></td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {sel && <CustomerDrawer cust={sel} onClose={() => setSel(null)} />}
    </div>
  );
}

function CustomerDrawer({ cust: c, onClose }) {
  const [tab, setTab] = useStateC('profil');
  const bookings = BOOKINGS.filter(b => b.cust === c.id).slice(0, 12);
  const activeTrip = TRIPS.find(t => {
    const b = BOOKINGS.find(bb => bb.id === t.booking);
    return b && b.cust === c.id;
  });

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()} style={{width:'min(680px, 96vw)'}}>
        <div className="drawer-header">
          <div className="row gap-3" style={{alignItems:'center'}}>
            <div style={{
              width:52, height:52, borderRadius:'50%', flexShrink:0,
              background: c.status==='vip'
                ? 'linear-gradient(135deg, hsl(45 80% 60%), hsl(38 75% 50%))'
                : c.status==='blacklist'
                ? 'linear-gradient(135deg, hsl(0 50% 60%), hsl(0 60% 45%))'
                : 'linear-gradient(135deg, hsl(188 50% 70%), hsl(195 60% 55%))',
              color:'white', display:'grid', placeItems:'center',
              fontFamily:'Fraunces, Georgia, serif', fontSize:19, fontWeight:600,
            }}>{c.nama.split(' ').map(w=>w[0]).slice(0,2).join('')}</div>
            <div>
              <div className="drawer-title" style={{marginBottom:2}}>{c.nama}</div>
              <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', flexWrap:'wrap'}}>
                <span className="mono">{c.id}</span>
                <span>·</span>
                <span>{c.kota}{c.asing && ' 🌏'}</span>
                <span>·</span>
                <Pill tone={
                  c.status==='vip'?'accent':
                  c.status==='aktif'?'success':
                  c.status==='review'?'warn':'danger'} dot>
                  {c.status.toUpperCase()}
                </Pill>
              </div>
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-tabs">
          {[
            { id:'profil',   label:'Profil',   icon:'user' },
            { id:'dokumen',  label:'Dokumen',  icon:'id' },
            { id:'riwayat',  label:`Riwayat (${bookings.length})`, icon:'history' },
            { id:'catatan',  label:'Catatan',  icon:'clipboard' },
          ].map(t => (
            <button key={t.id} className={`drawer-tab ${tab===t.id?'active':''}`} onClick={()=>setTab(t.id)}>
              <Icon name={t.icon} size={13} />{t.label}
            </button>
          ))}
        </div>

        <div className="drawer-body">
          {tab === 'profil' && (
            <>
              {/* Stats */}
              <div className="grid-3 mb-4">
                <Card><div style={{padding:12, textAlign:'center'}}>
                  <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Total Booking</div>
                  <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:24, fontWeight:600, marginTop:4}}>{c.total_booking}</div>
                </div></Card>
                <Card><div style={{padding:12, textAlign:'center'}}>
                  <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Total Spend</div>
                  <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:20, fontWeight:600, marginTop:4}}>{rupiah(c.total_spend, {compact:true})}</div>
                </div></Card>
                <Card><div style={{padding:12, textAlign:'center'}}>
                  <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Rating</div>
                  <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:24, fontWeight:600, marginTop:4}}>
                    <Icon name="star" size={16} style={{color:'hsl(45 90% 55%)', marginRight:4}}/>{c.rating}
                  </div>
                </div></Card>
              </div>

              <Card className="mb-4">
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>Informasi Kontak</div>
                  <div className="kv-grid">
                    <div className="kv"><span className="kv-k">Nama Lengkap</span><span className="kv-v">{c.nama}</span></div>
                    <div className="kv"><span className="kv-k">WhatsApp</span><span className="kv-v mono">{c.wa}</span></div>
                    <div className="kv"><span className="kv-k">Email</span><span className="kv-v" style={{fontSize:12.5}}>{c.email}</span></div>
                    <div className="kv"><span className="kv-k">Kota Asal</span><span className="kv-v">{c.kota}{c.asing && ' 🌏'}</span></div>
                    <div className="kv"><span className="kv-k">Member Sejak</span><span className="kv-v">{formatDateID(c.sejak)}</span></div>
                    <div className="kv"><span className="kv-k">Tipe Customer</span><span className="kv-v">{c.asing ? 'Wisatawan Asing' : 'Lokal'}</span></div>
                  </div>
                </div>
              </Card>

              {activeTrip && (
                <Card>
                  <div style={{padding:14}}>
                    <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(28 60% 35%)', marginBottom:10}}>
                      <Icon name="pin" size={11} /> Sedang Sewa
                    </div>
                    <div className="row between" style={{padding:'10px 12px', background:'hsl(28 78% 96%)', borderRadius:8}}>
                      <div>
                        <div style={{fontSize:13, fontWeight:600}}>{activeTrip.lokasi}</div>
                        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}} className="mono">
                          {activeTrip.id} · {activeTrip.armada} · {activeTrip.kecepatan} km/h
                        </div>
                      </div>
                      <Pill tone="warn" dot>{activeTrip.status==='in-trip'?'Bergerak':'Parked'}</Pill>
                    </div>
                  </div>
                </Card>
              )}
            </>
          )}

          {tab === 'dokumen' && (
            <>
              <Card className="mb-4">
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                    Identitas
                  </div>
                  <div className="kv-grid">
                    <div className="kv">
                      <span className="kv-k">{c.asing ? 'Passport' : 'KTP'}</span>
                      <span className="kv-v mono" style={{fontSize:12}}>{c.ktp}</span>
                    </div>
                    <div className="kv">
                      <span className="kv-k">SIM</span>
                      <span className="kv-v">
                        {c.sim}
                        {c.sim.includes('exp') && <Pill tone="danger" dot style={{marginLeft:6}}>Expired</Pill>}
                      </span>
                    </div>
                  </div>
                </div>
              </Card>

              <Card>
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                    Scan Dokumen
                  </div>
                  <div className="grid-2" style={{gap:10}}>
                    {[
                      { name: c.asing ? 'Passport' : 'KTP',  status:'verified' },
                      { name: 'SIM',                          status: c.sim.includes('exp') ? 'expired' : 'verified' },
                    ].map((doc, i) => (
                      <div key={i} style={{
                        padding:14, border:'1px solid hsl(var(--border))', borderRadius:10,
                        background:'linear-gradient(135deg, hsl(195 36% 97%), hsl(195 40% 94%))',
                        textAlign:'center',
                      }}>
                        <Icon name="id" size={32} style={{opacity:0.55, marginBottom:6, color:'hsl(195 50% 35%)'}} />
                        <div style={{fontSize:12.5, fontWeight:600}}>{doc.name}</div>
                        <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', marginTop:2}}>scan-{c.id}-{doc.name.toLowerCase()}.jpg</div>
                        <div style={{marginTop:8}}>
                          <Pill tone={doc.status==='verified'?'success':'danger'} dot>
                            {doc.status==='verified'?'Terverifikasi':'Expired'}
                          </Pill>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </Card>
            </>
          )}

          {tab === 'riwayat' && (
            <Card>
              <div style={{padding:14}}>
                <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                  Riwayat Booking · {bookings.length}
                </div>
                {bookings.length > 0 ? (
                  <div className="table-wrap">
                    <table className="table">
                      <thead>
                        <tr>
                          <th>Booking</th>
                          <th>Armada</th>
                          <th>Periode</th>
                          <th>Status</th>
                          <th className="num">Total</th>
                        </tr>
                      </thead>
                      <tbody>
                        {bookings.map(b => {
                          const veh = ARMADA_BY_ID[b.armada];
                          return (
                            <tr key={b.id}>
                              <td className="code">{b.id}</td>
                              <td>
                                <div style={{fontSize:12.5}}>{veh ? `${veh.merk} ${veh.model}` : b.armada}</div>
                                <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{veh?.plat}</div>
                              </td>
                              <td className="mono" style={{fontSize:11.5}}>{formatDateID(b.mulai)}<br/>→ {formatDateID(b.selesai)}</td>
                              <td><StatusPill status={b.status} /></td>
                              <td className="num">{rupiah(b.total, {compact:true})}</td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <div className="empty">Belum ada riwayat booking.</div>
                )}
              </div>
            </Card>
          )}

          {tab === 'catatan' && (
            <>
              <Card className="mb-4">
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                    Catatan Internal
                  </div>
                  {c.catatan ? (
                    <div style={{padding:'10px 12px', background:c.blacklist?'hsl(0 70% 96%)':'hsl(35 80% 96%)', borderRadius:8, border:`1px solid ${c.blacklist?'hsl(0 70% 88%)':'hsl(35 80% 88%)'}`, fontSize:13}}>
                      <div className="row gap-2" style={{marginBottom:4}}>
                        <Icon name="alert" size={13} style={{color:c.blacklist?'hsl(0 70% 45%)':'hsl(35 80% 40%)'}}/>
                        <span style={{fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.05em', color:c.blacklist?'hsl(0 70% 35%)':'hsl(35 80% 30%)'}}>
                          {c.blacklist?'Peringatan Blacklist':'Catatan Review'}
                        </span>
                      </div>
                      {c.catatan}
                    </div>
                  ) : (
                    <div className="empty" style={{padding:'20px 0'}}>Belum ada catatan internal.</div>
                  )}
                </div>
              </Card>

              <Card>
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                    Tambah Catatan
                  </div>
                  <textarea className="input" placeholder="Tulis catatan tentang customer ini…" rows={3} style={{width:'100%', resize:'vertical'}} />
                  <div className="row gap-2" style={{marginTop:10}}>
                    <Btn icon="save" tone="primary" size="sm">Simpan Catatan</Btn>
                    {!c.blacklist && <Btn icon="alert" tone="outline" size="sm">Tandai Review</Btn>}
                    {!c.blacklist && <Btn icon="shield" tone="ghost" size="sm">Blacklist</Btn>}
                  </div>
                </div>
              </Card>
            </>
          )}
        </div>

        <div className="row between" style={{padding:'14px 26px', borderTop:'1px solid hsl(var(--border))', background:'hsl(195 36% 99%)'}}>
          <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
            <Icon name="phone" size={12} />
            <span className="mono">{c.wa}</span>
          </div>
          <div className="row gap-2">
            <Btn tone="ghost" size="sm" onClick={onClose}>Tutup</Btn>
            <Btn icon="message" tone="outline" size="sm">Chat WA</Btn>
            {!c.blacklist && <Btn icon="plus" tone="primary" size="sm">Booking Baru</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.CustomerPage = CustomerPage;