// Other pages — calendar, inbox, finance, listings, tasks, reviews, settings

function Calendar({ nav }) {
  const heat = useMemo(makeHeatmap, []);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow mb-8">Calendar</div>
          <h1 className="page-title">Multi-property <em>availability</em></h1>
          <div className="page-sub">Apr 20 → May 19, 2026 · 8 properties</div>
        </div>
        <div className="f gap-8">
          <button className="btn"><Icons.ChevL size={14}/></button>
          <button className="btn">Today</button>
          <button className="btn"><Icons.ChevR size={14}/></button>
          <button className="btn"><Icons.Filter size={14}/> Filter</button>
          <button className="btn btn-primary"><Icons.Plus size={14}/> Block dates</button>
        </div>
      </div>
      <div className="card">
        <div className="heatmap" style={{gridTemplateColumns:'160px repeat(30, 1fr)', gap:3}}>
          <div className="hm-head"></div>
          {Array.from({length:30}).map((_,i) => <div key={i} className="hm-head">{String(20+i > 30 ? (20+i-30) : 20+i).padStart(2,'0')}</div>)}
          {heat.map(({property,row,today}) => (
            <React.Fragment key={property.id}>
              <div className="hm-prop"><span className="pdot" style={{background:property.color}}/>{property.name}</div>
              {row.map((s,di) => (
                <div key={di} className={`hm-cell ${s === 'booked' ? 'booked' : ''} ${s === 'soft' ? 'booked soft' : ''} ${s === 'blocked' ? 'blocked' : ''} ${di === today ? 'today' : ''}`} style={{height:32}}/>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

function Inbox({ nav }) {
  const [selected, setSelected] = useState(MESSAGES[0].id);
  const msg = MESSAGES.find(m => m.id === selected);
  return (
    <div className="page" style={{padding:0}}>
      <div className="g" style={{gridTemplateColumns:'360px 1fr', height:'calc(100vh - 65px)'}}>
        <div style={{borderRight:'1px solid var(--rule)', overflow:'auto', padding:20}}>
          <div className="f jcs aic mb-12"><div className="serif" style={{fontSize:22}}>Inbox</div><Chip ink>3 unread</Chip></div>
          <div className="topbar-search" style={{width:'100%',marginBottom:12}}><Icons.Search size={14}/><input placeholder="Search messages…"/></div>
          {MESSAGES.map(m => (
            <div key={m.id} className="msg-item" style={{background:selected===m.id?'var(--paper-2)':'transparent',borderRadius:8,padding:'12px 10px',marginBottom:2}} onClick={() => setSelected(m.id)}>
              <div className="msg-avatar" style={{background:m.tag==='ai'?'var(--accent)':'var(--paper-2)',color:m.tag==='ai'?'var(--accent-ink)':'var(--ink-2)'}}>{m.initials}</div>
              <div className="msg-body">
                <div className="msg-row1"><span className="msg-name">{m.name}</span><span className="msg-time">{m.time}</span></div>
                <div className="xsmall muted">{m.property}</div>
                <div className="msg-preview">{m.preview}</div>
                {m.tag && <span className={`msg-tag ${m.tag}`}>{m.tag === 'urgent' ? 'URGENT' : 'AI'}</span>}
              </div>
            </div>
          ))}
        </div>
        <div style={{display:'flex',flexDirection:'column',overflow:'hidden'}}>
          <div style={{padding:'18px 28px',borderBottom:'1px solid var(--rule)'}}>
            <div className="f jcs aic">
              <div>
                <div className="serif" style={{fontSize:22,letterSpacing:'-0.02em'}}>{msg.name}</div>
                <div className="xsmall muted">{msg.property} · Apr 20</div>
              </div>
              <div className="f gap-8"><button className="btn"><Icons.Phone size={13}/> Call</button><button className="btn"><Icons.MoreH size={13}/></button></div>
            </div>
          </div>
          <div style={{flex:1,overflow:'auto',padding:28, background:'var(--paper)'}}>
            {[
              { who:'them', t:'Hej! We just landed at LIS. Any way we could get in 30 min early? Flight was quick.', time:'12:04'},
              { who:'you',  t:'Hi Marcus! Welcome to Lisbon. Let me check with the cleaner — one sec.', time:'12:06'},
              { who:'them', t:'Tack så mycket!', time:'12:06'},
              { who:'you',  t:'Good news — turnover will wrap by 14:45. I\'ll send your code at 14:30. Your bag can stay at the lobby desk until then if you want to grab lunch.', time:'12:12'},
              { who:'them', t:'Perfect. Any lunch rec in Chiado?', time:'12:14'},
            ].map((b, i) => (
              <div key={i} className="mb-12" style={{display:'flex', justifyContent: b.who === 'you' ? 'flex-end' : 'flex-start'}}>
                <div style={{maxWidth:'60%',padding:'10px 14px',borderRadius:14,background: b.who === 'you' ? 'var(--ink)' : 'var(--card)', color: b.who === 'you' ? 'var(--paper)' : 'var(--ink)', border: b.who === 'you' ? 0 : '1px solid var(--rule)'}}>
                  <div className="small" style={{lineHeight:1.5}}>{b.t}</div>
                  <div className="xsmall" style={{opacity:0.6,marginTop:4,fontFamily:'JetBrains Mono'}}>{b.time}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{padding:20,borderTop:'1px solid var(--rule)',background:'var(--card)'}}>
            <div className="card-flat" style={{padding:12, marginBottom:10, background:'var(--paper-2)',border:'1px dashed var(--accent)'}}>
              <div className="f aic gap-8 mb-4"><Icons.Sparkle size={13} color="var(--accent-2)"/><span className="xsmall md" style={{color:'var(--accent-2)'}}>AI SUGGESTED REPLY</span></div>
              <div className="small">Try <b>Tasca da Esquina</b> (2-min walk) for seasonal tapas, or grab a pastel at <b>Manteigaria</b>. Both are casual and open now.</div>
              <div className="f gap-8 mt-8"><button className="btn xsmall">Use this</button><button className="btn btn-ghost xsmall">Regenerate</button></div>
            </div>
            <div className="f gap-8"><input className="topbar-search" style={{flex:1}} placeholder="Write a reply…"/><button className="btn btn-primary">Send</button></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Finance({ nav }) {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow mb-8">Finance</div>
          <h1 className="page-title">Report <em>& payouts</em></h1>
          <div className="page-sub">April 2026 · EUR · all properties</div>
        </div>
        <div className="f gap-8">
          <button className="btn">April 2026 <Icons.ChevD size={13}/></button>
          <button className="btn"><Icons.Download size={14}/> Export PDF</button>
          <button className="btn btn-primary"><Icons.Receipt size={14}/> Statement</button>
        </div>
      </div>

      <div className="g" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:16, marginBottom:20}}>
        {[
          { l:'Gross revenue', v:'€38,920', d:'+14% vs Mar', tone:'up', spark:[28,24,19,26,34,38] },
          { l:'Net payout', v:'€31,210', d:'80.2% take', tone:'up', spark:[22,18,15,20,27,31] },
          { l:'Occupancy', v:'87%', d:'178 of 204 nights', tone:'up', spark:[70,72,78,82,85,87] },
          { l:'ADR', v:'€218', d:'+€11 WoW', tone:'up', spark:[195,200,205,208,215,218] },
        ].map((k,i) => (
          <div key={i} className="card">
            <div className="xsmall muted">{k.l}</div>
            <div className="serif mt-8" style={{fontSize:32,letterSpacing:'-0.02em'}}>{k.v}</div>
            <div className="f jcs aic mt-8 xsmall"><span className="md" style={{color:'var(--status-ok)'}}>{k.d}</span><Spark data={k.spark} color="var(--accent)" w={60} h={20}/></div>
          </div>
        ))}
      </div>

      <div className="g" style={{gridTemplateColumns:'2fr 1fr', gap:20, marginBottom:20}}>
        <div className="card">
          <div className="f jcs aic mb-16">
            <div><div className="eyebrow">6-month trend</div><div className="section-title mt-4">Revenue · Gross vs. Net</div></div>
            <div className="f gap-16 xsmall muted">
              <span><span style={{display:'inline-block',width:10,height:2,background:'var(--ink-3)',verticalAlign:'3px',marginRight:4,borderTop:'2px dashed var(--ink-3)'}}/>Gross</span>
              <span><span style={{display:'inline-block',width:10,height:2,background:'var(--accent)',verticalAlign:'3px',marginRight:4}}/>Net</span>
            </div>
          </div>
          <RevenueChart />
        </div>
        <div className="card">
          <div className="eyebrow mb-12">Revenue by property</div>
          {PROPERTIES.slice(0,7).map((p,i) => {
            const v = [8210, 6140, 4880, 5920, 4010, 3510, 2890][i];
            const max = 8210;
            return (
              <div key={p.id} style={{padding:'10px 0', borderBottom: i<6?'1px dashed var(--rule)':0}}>
                <div className="f jcs small"><span>{p.short}</span><span className="mono md">€{v.toLocaleString()}</span></div>
                <div style={{height:4, background:'var(--paper-2)', borderRadius:2, marginTop:6, overflow:'hidden'}}>
                  <div style={{height:'100%',width:`${(v/max)*100}%`,background:p.color,borderRadius:2}}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 20px',borderBottom:'1px solid var(--rule)'}} className="f jcs aic">
          <div><div className="eyebrow">Recent payouts</div><div className="section-title mt-4">Channel statements</div></div>
          <button className="btn btn-ghost">View all →</button>
        </div>
        <table className="table">
          <thead>
            <tr><th>Date</th><th>Channel</th><th className="right">Reservations</th><th className="right">Gross</th><th className="right">Fees</th><th className="right">Net payout</th><th></th></tr>
          </thead>
          <tbody>
            {PAYOUTS.map((p,i) => (
              <tr key={i}>
                <td className="mono small">{p.date}</td>
                <td className="md">{p.channel}</td>
                <td className="right mono">{p.count}</td>
                <td className="right mono">€{p.gross.toLocaleString()}</td>
                <td className="right mono" style={{color:'var(--status-risk)'}}>€{p.fees}</td>
                <td className="right mono md">€{p.net.toLocaleString()}</td>
                <td><Chip tone="ok">Paid</Chip></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Listings({ nav }) {
  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow mb-8">Listings</div><h1 className="page-title">Portfolio <em>of 8</em></h1><div className="page-sub">Lisbon & Porto</div></div>
        <div className="f gap-8"><button className="btn"><Icons.Filter size={14}/> Filter</button><button className="btn btn-primary"><Icons.Plus size={14}/> Add listing</button></div>
      </div>
      <div className="g" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
        {PROPERTIES.map(p => (
          <div key={p.id} className="card" style={{padding:0, overflow:'hidden'}}>
            <div style={{height:140, background:`linear-gradient(135deg, ${p.color}, ${p.color}99)`,position:'relative'}}>
              <div style={{position:'absolute',top:12,left:12}}><Chip ink>Active</Chip></div>
              <div style={{position:'absolute',bottom:10,left:14,color:'#fff',fontFamily:'Fraunces',fontSize:26,letterSpacing:'-0.02em'}}>{p.short}</div>
            </div>
            <div style={{padding:16}}>
              <div className="md">{p.name}</div>
              <div className="xsmall muted">{p.addr}</div>
              <div className="f gap-6 mt-8" style={{flexWrap:'wrap'}}>
                <Chip>{p.beds} bd</Chip><Chip>{p.neigh}</Chip><Chip tone="ok">4.9★</Chip>
              </div>
              <div className="f jcs mt-12" style={{paddingTop:12, borderTop:'1px solid var(--rule)'}}>
                <div><div className="xsmall muted">30d occ</div><div className="mono md">82%</div></div>
                <div><div className="xsmall muted">ADR</div><div className="mono md">€{180 + Math.floor(Math.random()*80)}</div></div>
                <div><div className="xsmall muted">MTD</div><div className="mono md">€{(3 + Math.floor(Math.random()*5))}.{Math.floor(Math.random()*9)}k</div></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Tasks({ nav }) {
  const cols = [
    { id:'todo', label:'To do', items: TASKS.filter(t => t.status === 'todo') },
    { id:'in-progress', label:'In progress', items: TASKS.filter(t => t.status === 'in-progress') },
    { id:'scheduled', label:'Scheduled', items: TASKS.filter(t => t.status === 'scheduled') },
    { id:'done', label:'Done today', items: [{ id:'d1', title:'Turnover — Graça Rooftop', assignee:'Célia M.', due:'09:30', priority:'med'}] },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow mb-8">Ops</div><h1 className="page-title">Tasks <em>& cleaning</em></h1><div className="page-sub">6 open · 2 cleaners on shift</div></div>
        <div className="f gap-8"><button className="btn">Today</button><button className="btn btn-primary"><Icons.Plus size={14}/> New task</button></div>
      </div>
      <div className="g" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
        {cols.map(c => (
          <div key={c.id} className="card-flat" style={{padding:14,background:'var(--paper-2)',minHeight:400}}>
            <div className="f jcs aic mb-12"><div className="md small">{c.label}</div><span className="mono xsmall muted">{c.items.length}</span></div>
            {c.items.map(t => (
              <div key={t.id} className="card card-tight mb-8" style={{borderLeft: `3px solid ${t.priority==='high'?'var(--rose)':t.priority==='med'?'var(--gold)':'var(--ink-4)'}`}}>
                <div className="small md">{t.title}</div>
                <div className="xsmall muted mt-4">{t.assignee} · {t.due}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function Reviews({ nav }) {
  return (
    <div className="page">
      <div className="page-head">
        <div><div className="eyebrow mb-8">Reviews</div><h1 className="page-title">Guest <em>reviews</em></h1><div className="page-sub">142 reviews · 4.92 average</div></div>
        <div className="f gap-8"><button className="btn"><Icons.Filter size={14}/> All properties</button></div>
      </div>
      <div className="g" style={{gridTemplateColumns:'1fr 1fr', gap:16}}>
        {REVIEWS.map(r => (
          <div key={r.id} className="card">
            <div className="f jcs aic">
              <div className="f aic gap-12"><Avatar name={r.guest}/><div><div className="md">{r.guest}</div><div className="xsmall muted">{r.property} · {r.date}</div></div></div>
              <div className="f gap-2" style={{color:'var(--gold)'}}>{Array.from({length:r.rating}).map((_,i) => <Icons.Star key={i} size={14}/>)}</div>
            </div>
            <div className="small mt-12" style={{lineHeight:1.6,color:'var(--ink-2)'}}>"{r.text}"</div>
            <div className="f gap-8 mt-12"><button className="btn btn-ghost xsmall">Reply</button><button className="btn btn-ghost xsmall">Flag</button></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Settings() {
  return (
    <div className="page">
      <div className="page-head"><div><div className="eyebrow mb-8">Settings</div><h1 className="page-title">Team & <em>preferences</em></h1></div></div>
      <div className="card">
        <div className="eyebrow mb-12">Team members</div>
        {[
          { n:'Ana Ribeiro', r:'Owner · Admin', e:'ana@meridian.pt' },
          { n:'João Tavares', r:'Co-host', e:'joao@meridian.pt' },
          { n:'Célia M.', r:'Cleaning lead', e:'celia.m@meridian.pt' },
          { n:'Rui Pinto', r:'Maintenance', e:'rui@meridian.pt' },
        ].map((m,i) => (
          <div key={i} className="f aic jcs" style={{padding:'14px 0',borderBottom:i<3?'1px solid var(--rule)':0}}>
            <div className="f aic gap-12"><Avatar name={m.n}/><div><div className="md">{m.n}</div><div className="xsmall muted">{m.e}</div></div></div>
            <Chip>{m.r}</Chip>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Calendar, Inbox, Finance, Listings, Tasks, Reviews, Settings });