// Reservations list + detail + Check-in flow modal

function Reservations({ nav, selectReservation }) {
  const [tab, setTab] = useState('all');
  const [q, setQ] = useState('');

  const tabs = [
    { id: 'all', label: 'All', count: RESERVATIONS.length },
    { id: 'arriving', label: 'Arriving', count: RESERVATIONS.filter(r => r.status === 'arriving').length },
    { id: 'in-house', label: 'In-house', count: RESERVATIONS.filter(r => r.status === 'in-house').length },
    { id: 'checking-out', label: 'Checking out', count: RESERVATIONS.filter(r => r.status === 'checking-out').length },
    { id: 'confirmed', label: 'Upcoming', count: RESERVATIONS.filter(r => r.status === 'confirmed').length },
    { id: 'pending', label: 'Needs review', count: RESERVATIONS.filter(r => r.status === 'pending').length },
  ];

  const filtered = RESERVATIONS.filter(r => {
    if (tab !== 'all' && r.status !== tab) return false;
    if (q && !(r.guest + r.id).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  const statusTone = { arriving:'ok', 'in-house':'ok', 'checking-out':'warn', confirmed:'', pending:'risk' };
  const statusLabel = { arriving:'Arriving today', 'in-house':'In-house', 'checking-out':'Checking out', confirmed:'Upcoming', pending:'Awaiting ID' };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow mb-8">Reservations</div>
          <h1 className="page-title">Bookings <em>& arrivals</em></h1>
          <div className="page-sub">All current and upcoming stays across 8 properties</div>
        </div>
        <div className="f gap-8">
          <button className="btn"><Icons.Filter size={14}/> Filter</button>
          <button className="btn"><Icons.Download size={14}/> Export CSV</button>
          <button className="btn btn-primary"><Icons.Plus size={14}/> New booking</button>
        </div>
      </div>

      <div className="tabs">
        {tabs.map(t => (
          <div key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
            {t.label}<span className="count">{t.count}</span>
          </div>
        ))}
        <div style={{marginLeft:'auto', paddingBottom:6}}>
          <div className="topbar-search" style={{width:260, padding:'5px 10px'}}>
            <Icons.Search size={14}/>
            <input placeholder="Search guests, IDs…" value={q} onChange={e => setQ(e.target.value)}/>
          </div>
        </div>
      </div>

      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <table className="table">
          <thead>
            <tr>
              <th>Reservation</th><th>Guest</th><th>Property</th><th>Check-in</th><th>Check-out</th>
              <th className="right">Nights</th><th className="right">Total</th><th>Channel</th><th>Status</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(r => {
              const p = propertyById(r.property);
              return (
                <tr key={r.id} onClick={() => selectReservation(r)}>
                  <td><span className="mono xsmall muted">{r.id}</span></td>
                  <td><span className="md">{r.guest}</span> <span style={{marginLeft:4}}>{r.country}</span><div className="xsmall muted">{r.party} guest{r.party>1?'s':''}</div></td>
                  <td><div className="f aic gap-8"><span style={{width:8,height:8,borderRadius:'50%',background:p.color}}/>{p.name}</div><div className="xsmall muted">{p.neigh}</div></td>
                  <td className="mono small">{r.checkin}</td>
                  <td className="mono small">{r.checkout}</td>
                  <td className="right mono">{r.nights}</td>
                  <td className="right mono md">€{r.total.toLocaleString()}</td>
                  <td className="small">{r.channel}</td>
                  <td><Chip tone={statusTone[r.status]}>{statusLabel[r.status]}</Chip></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function ReservationDetail({ reservation, nav, openCheckIn }) {
  const r = reservation;
  const p = propertyById(r.property || 'p1');
  const [tab, setTab] = useState('overview');

  const steps = [
    { id: 'booked', label: 'Booked', done: true },
    { id: 'payment', label: 'Payment', done: true },
    { id: 'id', label: 'ID verified', done: r.status !== 'pending' },
    { id: 'checkin', label: 'Check-in', done: r.status === 'in-house' || r.status === 'checking-out' },
    { id: 'review', label: 'Review', done: r.status === 'checking-out' && r.rating },
  ];
  const activeIdx = steps.findIndex(s => !s.done);

  return (
    <div className="page">
      <div className="f aic gap-8 mb-16">
        <button className="btn btn-ghost" onClick={() => nav('reservations')}><Icons.ChevL size={14}/> All reservations</button>
        <span className="muted small">/</span>
        <span className="mono xsmall muted">{r.id || 'R-2026-4471'}</span>
      </div>

      <div className="res-hero mb-20">
        <div className="res-photo" style={{background: `linear-gradient(135deg, ${p.color}, ${p.color}aa)`}}>
          <div style={{position:'absolute',bottom:10,left:12,color:'#fff',fontFamily:'Fraunces',fontSize:18,zIndex:1}}>{p.short}</div>
        </div>
        <div className="flex-1">
          <div className="f aic jcs">
            <div>
              <div className="eyebrow mb-4">{p.name} · {p.neigh}</div>
              <h2 className="serif" style={{fontSize:30,margin:0,fontWeight:400,letterSpacing:'-0.02em'}}>{r.guest || 'Helena Richter'} <span style={{marginLeft:4}}>{r.country || '🇩🇪'}</span></h2>
              <div className="small muted mt-4">{r.party || 2} guests · {r.nights || 5} nights · {r.channel || 'Airbnb'}</div>
            </div>
            <div className="right">
              <div className="eyebrow">Total paid</div>
              <div className="serif" style={{fontSize:28,fontVariantNumeric:'tabular-nums'}}>€{(r.total||1245).toLocaleString()}</div>
              <div className="xsmall muted">Payout on {r.checkout || 'Apr 20'}</div>
            </div>
          </div>
          <div className="steps mt-16">
            {steps.map((s, i) => (
              <div key={s.id} className={`step ${s.done ? 'done' : ''} ${i === activeIdx ? 'active' : ''}`}>
                <div className="stepn">{s.done ? <Icons.Check size={12}/> : i+1}</div>
                {s.label}
              </div>
            ))}
          </div>
          <div className="f gap-8 mt-16">
            <button className="btn btn-primary" onClick={() => openCheckIn(r)}><Icons.Key size={14}/> Open check-in flow</button>
            <button className="btn"><Icons.Mail size={14}/> Message guest</button>
            <button className="btn"><Icons.Phone size={14}/> Call</button>
            <button className="btn btn-ghost"><Icons.MoreH size={14}/></button>
          </div>
        </div>
      </div>

      <div className="tabs">
        {['overview','guest','finance','messages','activity'].map(t => (
          <div key={t} className={`tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)}>{t[0].toUpperCase()+t.slice(1)}</div>
        ))}
      </div>

      <div className="res-grid">
        <div className="g" style={{gap:20}}>
          <div className="card">
            <div className="eyebrow mb-12">Stay summary</div>
            <div className="g" style={{gridTemplateColumns:'1fr 1fr', gap: 20}}>
              <div>
                <div className="xsmall muted">Check-in</div>
                <div className="serif big mt-4">{r.checkin || 'Apr 15'}, 15:00</div>
                <div className="xsmall muted mt-4">Self check-in · key #{r.key || '8821'}</div>
              </div>
              <div>
                <div className="xsmall muted">Check-out</div>
                <div className="serif big mt-4">{r.checkout || 'Apr 20'}, 11:00</div>
                <div className="xsmall muted mt-4">Late checkout available until 12:30</div>
              </div>
            </div>
            <div className="mt-16" style={{paddingTop:16, borderTop:'1px solid var(--rule)'}}>
              <div className="eyebrow mb-8">House access</div>
              <div className="key-card">
                <div className="keylbl">Smart-lock code</div>
                <div className="keycode">{r.key || '8821'}#</div>
                <div className="keylbl mt-4">Valid Apr 15 15:00 → Apr 20 11:00</div>
              </div>
              <div className="f gap-16 mt-12 small">
                <div className="f aic gap-6"><Icons.Wifi size={14} color="var(--ink-3)"/> WiFi · casa-flores-42 / bluesky2026</div>
                <div className="f aic gap-6"><Icons.Shield size={14} color="var(--ink-3)"/> ID verified Apr 13</div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="f jcs aic mb-12"><div className="eyebrow">Guest notes & preferences</div><button className="btn btn-ghost xsmall">Edit</button></div>
            <div className="small" style={{lineHeight:1.6, color:'var(--ink-2)'}}>
              Repeat guest (3rd stay). Travels for work in architecture. Prefers quiet, firm pillows, and black coffee in the morning. Left a glowing review last visit — recommended a pastel de nata spot we've since added to the welcome guide. No allergies noted.
            </div>
            <div className="f gap-6 mt-12" style={{flexWrap:'wrap'}}>
              <Chip ink>Repeat guest · 3×</Chip>
              <Chip tone="ok">5.0 ★ · 2 reviews</Chip>
              <Chip>Quiet preferred</Chip>
              <Chip>Early riser</Chip>
            </div>
          </div>

          <div className="card">
            <div className="eyebrow mb-12">Financial breakdown</div>
            <table className="table" style={{fontSize:13}}>
              <tbody>
                <tr><td>{r.nights || 5} nights × €220</td><td className="right mono">€1,100</td></tr>
                <tr><td>Cleaning fee</td><td className="right mono">€85</td></tr>
                <tr><td>City tax (5 nights × 2)</td><td className="right mono">€20</td></tr>
                <tr><td>Service fee</td><td className="right mono">€40</td></tr>
                <tr style={{background:'var(--paper-2)'}}><td className="md">Guest total</td><td className="right mono md">€{(r.total||1245).toLocaleString()}</td></tr>
                <tr><td className="muted small">Channel commission ({r.channel || 'Airbnb'} · 12%)</td><td className="right mono muted">−€149</td></tr>
                <tr><td className="muted small">Payment processing</td><td className="right mono muted">−€21</td></tr>
                <tr style={{background:'var(--accent)',color:'var(--accent-ink)'}}><td className="md">Your payout</td><td className="right mono md">€{((r.total||1245) - 170).toLocaleString()}</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* Sidebar */}
        <div className="g" style={{gap:16,alignContent:'start'}}>
          <div className="card card-tight">
            <div className="eyebrow mb-8">Host checklist</div>
            {[
              { l: 'Welcome message sent', done: true },
              { l: 'Smart-lock code issued', done: true },
              { l: 'Turnover scheduled (Apr 20, 11:00)', done: true },
              { l: 'Welcome gift · dom. wine', done: false },
              { l: 'Post-stay review prompt', done: false },
            ].map((c, i) => (
              <div key={i} className="f aic gap-8 small" style={{padding:'8px 0', borderBottom:'1px dashed var(--rule)'}}>
                <div style={{width:16,height:16,borderRadius:4,border:`1.5px solid ${c.done ? 'var(--accent)' : 'var(--rule-2)'}`, background: c.done ? 'var(--accent)' : 'transparent', display:'grid',placeItems:'center'}}>{c.done && <Icons.Check size={10} color="var(--accent-ink)"/>}</div>
                <span style={{textDecoration: c.done ? 'line-through' : 'none', color: c.done ? 'var(--ink-3)' : 'var(--ink)'}}>{c.l}</span>
              </div>
            ))}
          </div>

          <div className="card card-tight">
            <div className="eyebrow mb-8">Property</div>
            <div className="md">{p.name}</div>
            <div className="xsmall muted">{p.addr}</div>
            <div className="f gap-8 mt-8"><Chip>{p.beds} bd</Chip><Chip>{p.neigh}</Chip><Chip tone="ok">4.9 ★</Chip></div>
          </div>

          <div className="card card-tight">
            <div className="eyebrow mb-8">Timeline</div>
            {[
              { t: '2 min ago', l: 'Guest read WhatsApp message' },
              { t: 'Yesterday', l: 'Smart-lock code auto-generated' },
              { t: 'Apr 13', l: 'ID verified via Stripe' },
              { t: 'Apr 12', l: 'Booking confirmed · Airbnb' },
            ].map((e, i) => (
              <div key={i} className="f gap-8" style={{padding:'8px 0', borderBottom: i<3 ? '1px dashed var(--rule)' : 0}}>
                <div style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)',marginTop:7,flex:'0 0 6px'}}/>
                <div>
                  <div className="small">{e.l}</div>
                  <div className="xsmall muted">{e.t}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// Check-in flow modal
function CheckInModal({ reservation, close }) {
  const [step, setStep] = useState(0);
  const r = reservation;
  const p = propertyById(r?.property || 'p3');
  const [idVerified, setIdVerified] = useState(false);
  const [keyIssued, setKeyIssued] = useState(false);
  const [guideSent, setGuideSent] = useState(false);

  const steps = ['Verify ID', 'Issue digital key', 'Send house guide', 'Welcome sent'];
  const canNext = [true, idVerified, keyIssued, guideSent][step];

  const advance = () => {
    if (step === 1 && !idVerified) { setIdVerified(true); return; }
    if (step === 2 && !keyIssued) { setKeyIssued(true); return; }
    if (step === 3 && !guideSent) { setGuideSent(true); setTimeout(close, 900); return; }
    setStep(step + 1);
  };

  return (
    <div className="modal-overlay" onClick={close}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="eyebrow">Check-in flow · {r?.id || 'R-2026-4470'}</div>
            <div className="serif" style={{fontSize:22,marginTop:4,letterSpacing:'-0.02em'}}>{r?.guest || 'David & Amara Okafor'} · {p.name}</div>
          </div>
          <button className="iconbtn" onClick={close}><Icons.X size={16}/></button>
        </div>
        <div className="modal-body">
          <div className="flow-steps">
            {steps.map((_, i) => <div key={i} className={`flow-dot ${i <= step ? 'on' : ''}`}/>)}
          </div>
          <div className="eyebrow">Step {step+1} of 4</div>
          <div className="serif mt-4 mb-16" style={{fontSize:22,letterSpacing:'-0.02em'}}>{steps[step]}</div>

          {step === 0 && (
            <div>
              <div className="small muted mb-16">Confirm the booking before running verification.</div>
              <div className="card-flat">
                <div className="f jcs"><span className="muted small">Guest</span><span className="md">{r?.guest || 'David & Amara Okafor'} {r?.country || '🇬🇧'}</span></div>
                <div className="f jcs mt-8"><span className="muted small">Property</span><span>{p.name}</span></div>
                <div className="f jcs mt-8"><span className="muted small">Stay</span><span className="mono small">{r?.checkin || 'Apr 20'} → {r?.checkout || 'Apr 26'} · {r?.nights || 6} nights</span></div>
                <div className="f jcs mt-8"><span className="muted small">Party</span><span className="mono small">{r?.party || 2} guests</span></div>
                <div className="f jcs mt-8"><span className="muted small">Channel</span><span>{r?.channel || 'Booking.com'}</span></div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <div className="small muted mb-16">Guest uploaded their passport on Apr 18. Review and verify.</div>
              <div className="id-card">
                <div className="id-pic"/>
                <div className="flex-1">
                  <div className="eyebrow">UK Passport · expires 2031</div>
                  <div className="serif big mt-4">{r?.guest?.split(' & ')[0] || 'David Okafor'}</div>
                  <div className="xsmall muted mono mt-4">Doc #: P8812•••••49</div>
                </div>
                {idVerified
                  ? <Chip tone="ok">Verified</Chip>
                  : <button className="btn btn-accent" onClick={() => setIdVerified(true)}><Icons.Shield size={13}/> Run check</button>}
              </div>
              {idVerified && (
                <div className="f gap-16 mt-16 small" style={{padding:12,background:'var(--paper-2)',borderRadius:10}}>
                  <div className="f aic gap-6"><Icons.Check size={14} color="var(--status-ok)"/> Face match 98%</div>
                  <div className="f aic gap-6"><Icons.Check size={14} color="var(--status-ok)"/> Document authentic</div>
                  <div className="f aic gap-6"><Icons.Check size={14} color="var(--status-ok)"/> No watchlist match</div>
                </div>
              )}
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="small muted mb-16">Generate a time-boxed smart-lock code. It will be sent to the guest automatically.</div>
              <div className="key-card">
                <div className="keylbl">Smart-lock code</div>
                <div className="keycode">{keyIssued ? (r?.key || '9903') + '#' : '• • • • #'}</div>
                <div className="keylbl mt-4">Valid {r?.checkin || 'Apr 20'} 15:00 → {r?.checkout || 'Apr 26'} 11:00</div>
              </div>
              <div className="f gap-8 mt-12">
                {!keyIssued
                  ? <button className="btn btn-primary" onClick={() => setKeyIssued(true)}><Icons.Key size={14}/> Generate & send</button>
                  : <Chip tone="ok">Sent via WhatsApp & email</Chip>}
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <div className="small muted mb-16">Attach the welcome guide (WiFi, neighbourhood, house rules).</div>
              <div className="card-flat">
                <div className="f aic gap-12 mb-12">
                  <div style={{width:44,height:44,borderRadius:10,background:'var(--paper-2)',display:'grid',placeItems:'center'}}><Icons.Receipt/></div>
                  <div className="flex-1">
                    <div className="md">Casa das Flores — Guest Guide</div>
                    <div className="xsmall muted">PDF · 1.2 MB · last updated Apr 1</div>
                  </div>
                  <Chip tone="ok">Attached</Chip>
                </div>
                <div className="small muted mb-8">Welcome message preview</div>
                <div className="small" style={{padding:12,background:'var(--paper-2)',borderRadius:8,fontFamily:'Fraunces',lineHeight:1.5}}>
                  "Dear {r?.guest?.split(' ')[0] || 'David'}, welcome to Lisbon! Your door code is <b>{r?.key || '9903'}#</b>. Coffee's in the cupboard, wine's on the counter — bem-vindo. — Ana"
                </div>
              </div>
              {!guideSent
                ? <button className="btn btn-accent mt-16" onClick={() => setGuideSent(true)}><Icons.Sparkle size={14}/> Send welcome</button>
                : <div className="mt-16 f aic gap-8"><Chip tone="ok">Sent at {new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})}</Chip> <span className="small muted">Check-in complete. Closing…</span></div>}
            </div>
          )}
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={close}>Cancel</button>
          {step > 0 && <button className="btn" onClick={() => setStep(step-1)}>Back</button>}
          <button className="btn btn-primary" onClick={advance} disabled={!canNext} style={{opacity: canNext ? 1 : 0.5}}>
            {step === 3 ? (guideSent ? 'Done' : 'Send welcome') : step === 0 ? 'Continue' : (step === 1 && !idVerified) || (step === 2 && !keyIssued) ? 'Confirm' : 'Next step'}
            <Icons.Arrow size={13}/>
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Reservations, ReservationDetail, CheckInModal });