// Meja — floor plan signature view
const { useState: useStateM } = React;

function MejaPage({ pushToast, setPage }) {
  const [zone, setZone] = useStateM('all');
  const [selected, setSelected] = useStateM(null);

  const zones = ['all', 'indoor', 'outdoor', 'bar'];
  const filtered = zone === 'all' ? TABLES : TABLES.filter(t => t.zone === zone);

  const counts = {
    available: TABLES.filter(t => t.status === 'available').length,
    occupied: TABLES.filter(t => t.status === 'occupied').length,
    reserved: TABLES.filter(t => t.status === 'reserved').length,
    cleaning: TABLES.filter(t => t.status === 'cleaning').length,
  };

  const sel = selected ? TABLES.find(t => t.id === selected) : null;
  const selOrder = sel?.orderId ? ORDERS.find(o => o.id === sel.orderId) : null;

  return (
    <>
      <PageHeader
        eyebrow={`${TENANT.address} · Kapasitas total ${TABLES.reduce((s,t)=>s+t.seats,0)} kursi`}
        title="Floor Plan & Status Meja"
        subtitle="Klik meja untuk lihat detail order, ubah status (cleaning/available), atau buka order baru. Reservasi otomatis terblokir saat waktu yang dijadwalkan."
        actions={<>
          <Btn icon="refresh">Refresh</Btn>
          <Btn tone="primary" icon="plus" onClick={() => setPage('reservasi')}>Reservasi Baru</Btn>
        </>}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Tersedia" value={counts.available + ' meja'} icon="check" tone="success" />
        <Kpi label="Terisi" value={counts.occupied + ' meja'} icon="users" tone="warn"
             hint={`${ORDERS.filter(o=>o.status!=='served').length} order aktif`} />
        <Kpi label="Reserved" value={counts.reserved + ' meja'} icon="calendar" tone="accent"
             hint={`${RESERVATIONS.filter(r=>r.status==='upcoming').length} upcoming`} />
        <Kpi label="Cleaning" value={counts.cleaning + ' meja'} icon="sparkles" tone="muted" />
      </div>

      <div className="filter-bar">
        <span className="text-sm" style={{fontWeight:500}}>Zona:</span>
        {zones.map(z => (
          <button key={z}
                  className={'menu-cat-tab' + (zone === z ? ' active' : '')}
                  onClick={() => setZone(z)}>
            {z === 'all' ? 'Semua' : z.charAt(0).toUpperCase()+z.slice(1)}
            <span style={{opacity:0.6, fontSize:11}}>
              {z === 'all' ? TABLES.length : TABLES.filter(t=>t.zone===z).length}
            </span>
          </button>
        ))}
        <span className="muted text-sm" style={{marginLeft:'auto'}}>Update terakhir: {NOW_HHMM}</span>
      </div>

      <div className="grid-2" style={{gridTemplateColumns: selected ? '1fr 360px' : '1fr', gap:18}}>
        <Card>
          <div className="card-header">
            <div>
              <h3 className="card-title">Layout Outlet — {zone === 'all' ? 'Semua Zona' : zone.charAt(0).toUpperCase()+zone.slice(1)}</h3>
              <p className="card-desc">{filtered.length} meja ditampilkan</p>
            </div>
            <div className="row gap-2 text-sm">
              <span className="row gap-2"><span className="legend-dot" style={{background:'hsl(var(--success))'}}/> Tersedia</span>
              <span className="row gap-2"><span className="legend-dot" style={{background:'hsl(var(--warn))'}}/> Terisi</span>
              <span className="row gap-2"><span className="legend-dot" style={{background:'hsl(var(--accent))'}}/> Reserved</span>
              <span className="row gap-2"><span className="legend-dot" style={{background:'hsl(var(--muted-foreground))'}}/> Cleaning</span>
            </div>
          </div>
          <div className="card-body">
            <div className="floor-plan">
              {zone === 'all' && (
                <>
                  <div className="floor-section">
                    <div className="floor-section-label">Indoor</div>
                    <div className="floor-grid">
                      {TABLES.filter(t => t.zone === 'indoor').map(t =>
                        <FloorTable key={t.id} table={t} onClick={() => setSelected(t.id)} selected={selected === t.id} />)}
                    </div>
                  </div>
                  <div className="floor-section">
                    <div className="floor-section-label">Outdoor (Garden)</div>
                    <div className="floor-grid">
                      {TABLES.filter(t => t.zone === 'outdoor').map(t =>
                        <FloorTable key={t.id} table={t} onClick={() => setSelected(t.id)} selected={selected === t.id} />)}
                    </div>
                  </div>
                  <div className="floor-section">
                    <div className="floor-section-label">Bar Counter</div>
                    <div className="floor-grid">
                      {TABLES.filter(t => t.zone === 'bar').map(t =>
                        <FloorTable key={t.id} table={t} onClick={() => setSelected(t.id)} selected={selected === t.id} />)}
                    </div>
                  </div>
                </>
              )}
              {zone !== 'all' && (
                <div className="floor-grid">
                  {filtered.map(t =>
                    <FloorTable key={t.id} table={t} onClick={() => setSelected(t.id)} selected={selected === t.id} />)}
                </div>
              )}
            </div>
          </div>
        </Card>

        {selected && sel && (
          <Card>
            <div className="card-header">
              <div>
                <h3 className="card-title">{sel.label}</h3>
                <p className="card-desc">{sel.zone.charAt(0).toUpperCase()+sel.zone.slice(1)} · {sel.seats} kursi</p>
              </div>
              <button className="btn ghost sm" onClick={() => setSelected(null)}><Icon name="x" size={14}/></button>
            </div>
            <div className="card-body">
              <div className="row between mb-3">
                <span className="muted text-sm">Status saat ini:</span>
                <StatusPill status={sel.status} />
              </div>

              {selOrder && (
                <>
                  <div className="divider"/>
                  <div className="muted text-sm mb-2">Order aktif:</div>
                  <OrderTicket order={selOrder} onClick={() => setPage('order')} />
                </>
              )}

              {sel.status === 'reserved' && (
                <div className="callout accent mt-3">
                  <Icon name="calendar" size={16}/>
                  <div>
                    <div style={{fontWeight:500}}>Reservasi atas nama tamu</div>
                    <div className="muted text-sm mt-1">Lihat detail di halaman Reservasi</div>
                  </div>
                </div>
              )}

              {sel.status === 'cleaning' && (
                <div className="callout warn mt-3">
                  <Icon name="sparkles" size={16}/>
                  <div>
                    <div style={{fontWeight:500}}>Sedang dibersihkan</div>
                    <div className="muted text-sm mt-1">Estimasi siap 5 menit lagi</div>
                  </div>
                </div>
              )}

              <div className="divider"/>

              <div style={{display:'flex', flexDirection:'column', gap:8}}>
                {sel.status === 'available' && (
                  <Btn tone="primary" icon="plus" onClick={() => { setPage('order'); pushToast({msg:`Buka order untuk ${sel.label}`}); }}>Buka Order Baru</Btn>
                )}
                {sel.status === 'occupied' && (
                  <>
                    <Btn tone="primary" icon="receipt" onClick={() => setPage('order')}>Lihat Order</Btn>
                    <Btn icon="dollar" onClick={() => pushToast({msg:'Buka pembayaran', type:'success'})}>Tagih & Bayar</Btn>
                  </>
                )}
                {sel.status === 'cleaning' && (
                  <Btn tone="primary" icon="check" onClick={() => pushToast({msg:`${sel.label} ditandai siap`, type:'success'})}>Tandai Siap</Btn>
                )}
                {sel.status === 'reserved' && (
                  <Btn tone="primary" icon="check" onClick={() => pushToast({msg:`Tamu ${sel.label} check-in`, type:'success'})}>Check-in Tamu</Btn>
                )}
                <Btn icon="sparkles" onClick={() => pushToast({msg:`${sel.label} dipindah ke cleaning`})}>Set Cleaning</Btn>
              </div>
            </div>
          </Card>
        )}
      </div>
    </>
  );
}

window.MejaPage = MejaPage;