// Dashboard — with the Stay Timeline (surprise moment)

function Dashboard({ nav, openCheckIn }) {
  const [scrubHour, setScrubHour] = useState(14); // start afternoon
  const [activeEvent, setActiveEvent] = useState(null);
  const timelineRef = useRef(null);

  const nowHour = 14.5; // simulated "now"
  const heatmap = useMemo(makeHeatmap, []);

  // Scrubber drag
  const dragRef = useRef(false);
  useEffect(() => {
    const move = e => {
      if (!dragRef.current || !timelineRef.current) return;
      const r = timelineRef.current.getBoundingClientRect();
      const ratio = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
      setScrubHour(ratio * 24);
    };
    const up = () => { dragRef.current = false; document.body.style.cursor = ''; };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
  }, []);

  const onAxisDown = e => {
    dragRef.current = true;
    document.body.style.cursor = 'ew-resize';
    const r = timelineRef.current.getBoundingClientRect();
    const ratio = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
    setScrubHour(ratio * 24);
  };

  const hourFmt = h => {
    const hh = Math.floor(h), mm = Math.round((h - hh) * 60);
    return `${String(hh).padStart(2,'0')}:${String(mm).padStart(2,'0')}`;
  };

  // What's happening at the scrub hour?
  const activeAtHour = TODAY_EVENTS.filter(e => scrubHour >= e.from && scrubHour <= e.to);

  const revenueSpark = REVENUE_SERIES.map(r => r.net);

  return (
    <div className="page">
      {/* Page head */}
      <div className="page-head">
        <div>
          <div className="eyebrow mb-8">Monday · April 20, 2026</div>
          <h1 className="page-title">Good morning, Ana. <em>Four arrivals today.</em></h1>
          <div className="page-sub">8 active properties · Lisbon & Porto portfolio · Last synced 2 min ago</div>
        </div>
        <div className="f gap-8">
          <button className="btn"><Icons.Download size={14}/> Export</button>
          <button className="btn btn-primary"><Icons.Plus size={14}/> New reservation</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-strip mb-20">
        <div className="kpi">
          <div className="kpi-label">Today's payout</div>
          <div className="kpi-value tnum">€3,820</div>
          <div className="kpi-delta"><span className="up">▲ 12%</span> vs. last Monday</div>
          <div className="kpi-spark"><Spark data={[22,24,19,26,28,25,30,32,31,34,38]} color="var(--accent)" w={70} h={22}/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Occupancy · next 30d</div>
          <div className="kpi-value tnum">87%</div>
          <div className="kpi-delta"><span className="up">▲ 4pts</span> vs. forecast</div>
          <div className="kpi-spark"><Spark data={[70,72,80,78,82,85,86,87,87,86,87]} color="var(--sky)" w={70} h={22}/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">ADR · last 7d</div>
          <div className="kpi-value tnum">€218</div>
          <div className="kpi-delta"><span className="up">▲ €11</span> vs. last week</div>
          <div className="kpi-spark"><Spark data={[195,198,205,208,210,215,218]} color="var(--gold)" w={70} h={22}/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Review score · 90d</div>
          <div className="kpi-value tnum">4.92<span style={{fontSize:18,color:'var(--ink-3)'}}>/5</span></div>
          <div className="kpi-delta"><span className="up">▲ 0.04</span> · 142 reviews</div>
          <div className="kpi-spark" style={{top:'18px',right:'18px'}}><Icons.Star size={26}/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Open tasks</div>
          <div className="kpi-value tnum">12</div>
          <div className="kpi-delta"><span className="down">▲ 3</span> since yesterday</div>
          <div className="kpi-spark"><Icons.Broom size={24}/></div>
        </div>
      </div>

      {/* Stay Timeline */}
      <div className="card timeline-card mb-20">
        <div className="timeline-head">
          <div>
            <div className="eyebrow">The day, at a glance</div>
            <div className="section-title mt-4">Stay Timeline</div>
          </div>
          <div className="f aic gap-16">
            <div className="timeline-legend">
              <span><span className="dotl" style={{background:'var(--accent)'}}/>In-house</span>
              <span><span className="dotl" style={{background:'var(--sky)'}}/>Checkout</span>
              <span><span className="dotl" style={{background:'var(--gold)'}}/>Turnover</span>
              <span><span className="dotl" style={{background:'var(--status-ok)'}}/>Check-in</span>
            </div>
            <div className="chip ink num">{hourFmt(scrubHour)}</div>
          </div>
        </div>
        <div className="timeline-stage">
          {/* Axis with scrubber */}
          <div className="timeline-axis" style={{ marginLeft: 212 }} ref={timelineRef} onMouseDown={onAxisDown}>
            {[0,3,6,9,12,15,18,21,24].map(h => (
              <div key={h} className="timeline-tick" style={{ left: `${(h/24)*100}%` }}>{String(h).padStart(2,'0')}</div>
            ))}
            <div className="timeline-now" style={{ left: `${(nowHour/24)*100}%` }} />
            <div
              className="scrubber"
              style={{ left: `calc(${(scrubHour/24)*100}% - 1px)` }}
              onMouseDown={e => { e.stopPropagation(); dragRef.current = true; document.body.style.cursor = 'ew-resize'; }}
            >
              <div className="scrubber-time">{hourFmt(scrubHour)}</div>
            </div>
          </div>

          <div className="timeline-rows">
            {TODAY_EVENTS.map(ev => {
              const prop = propertyById(ev.property);
              const leftPct = (ev.from / 24) * 100;
              const widthPct = ((ev.to - ev.from) / 24) * 100;
              const isActive = activeEvent === ev.id;
              const isCurrent = scrubHour >= ev.from && scrubHour <= ev.to;
              return (
                <div key={ev.id} className="timeline-row">
                  <div className="trow-label">
                    <div className="pic" style={{ background: prop.color, color: '#fff' }}>{prop.short[0]}</div>
                    <div className="tmeta">
                      <div className="tname">{ev.guest} <span style={{marginLeft:4}}>{ev.country}</span></div>
                      <div className="tprop">{prop.name} · {ev.party}g</div>
                    </div>
                  </div>
                  <div className="timeline-track">
                    <div
                      className={`tblock ${ev.status === 'stay' ? 'stay' : ev.status === 'turnover' ? 'turnover' : ev.status === 'checkout' ? 'checkout-span' : 'checkin-span'} ${isActive ? 'active' : ''}`}
                      style={{ left: `${leftPct}%`, width: `${widthPct}%` }}
                      onClick={() => { setActiveEvent(ev.id); nav('reservation', ev); }}
                    >
                      {ev.status === 'stay' && <><Icons.Key size={11}/> In-house · #{ev.key}</>}
                      {ev.status === 'turnover' && <><Icons.Broom size={11}/> Turnover 11:00–15:30</>}
                      {ev.status === 'checkout' && <><Icons.Arrow size={11}/> Checkout by {hourFmt(ev.to)}</>}
                      {ev.status === 'checkin' && <><Icons.Check size={11}/> Arriving {hourFmt(ev.from)}</>}
                    </div>
                    {isCurrent && ev.status === 'stay' && (
                      <div className="pulse-dot" style={{ left: `${(nowHour/24)*100}%` }} />
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Scrubbed summary */}
          <div className="mt-20" style={{ marginLeft: 212, paddingTop: 14, borderTop: '1px solid var(--rule)' }}>
            <div className="xsmall muted mb-4">At <span className="num md" style={{color:'var(--ink)'}}>{hourFmt(scrubHour)}</span> — {activeAtHour.length} guests across the portfolio</div>
            <div className="f gap-6" style={{flexWrap:'wrap'}}>
              {activeAtHour.slice(0,8).map(ev => {
                const p = propertyById(ev.property);
                return (
                  <div key={ev.id} className="chip" style={{cursor:'pointer'}} onClick={() => nav('reservation', ev)}>
                    <span style={{width:6,height:6,background:p.color,borderRadius:'50%'}}/>
                    {ev.guest.split(' ')[0]} · {p.short}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Two-column lower grid */}
      <div className="g" style={{ gridTemplateColumns: '1fr 380px', gap: 24 }}>
        {/* Left column */}
        <div className="g" style={{ gap: 20 }}>
          {/* Heatmap */}
          <div className="card">
            <div className="f jcs aic mb-16">
              <div>
                <div className="eyebrow">30-day occupancy</div>
                <div className="section-title mt-4">Portfolio rhythm</div>
              </div>
              <div className="f aic gap-8">
                <div className="xsmall muted">Apr 20 → May 19</div>
                <button className="btn btn-ghost" onClick={() => nav('calendar')}>Open calendar <Icons.Arrow size={12}/></button>
              </div>
            </div>
            <div className="heatmap">
              <div className="hm-head"></div>
              {Array.from({ length: 30 }).map((_, i) => (
                <div key={i} className="hm-head">{i % 5 === 0 ? (i === 0 ? '20' : String(20 + i).slice(-2)) : ''}</div>
              ))}
              {heatmap.map(({ property, row, today }) => (
                <React.Fragment key={property.id}>
                  <div className="hm-prop">
                    <span className="pdot" style={{background: property.color}}/>{property.short}
                  </div>
                  {row.map((state, di) => (
                    <div
                      key={di}
                      className={`hm-cell ${state === 'booked' ? 'booked' : ''} ${state === 'soft' ? 'booked soft' : ''} ${state === 'blocked' ? 'blocked' : ''} ${di === today ? 'today' : ''}`}
                      title={`${property.short} · day ${di+1}`}
                    />
                  ))}
                </React.Fragment>
              ))}
            </div>
            <div className="f gap-16 mt-16 xsmall muted">
              <span><span style={{display:'inline-block',width:10,height:10,background:'var(--accent)',borderRadius:2,verticalAlign:'-1px',marginRight:4}}/>Booked</span>
              <span><span style={{display:'inline-block',width:10,height:10,background:'var(--accent-2)',borderRadius:2,opacity:0.75,verticalAlign:'-1px',marginRight:4}}/>Soft-hold</span>
              <span><span style={{display:'inline-block',width:10,height:10,background:'repeating-linear-gradient(45deg,var(--ink-3),var(--ink-3) 2px,transparent 2px,transparent 4px)',borderRadius:2,verticalAlign:'-1px',marginRight:4}}/>Owner/blocked</span>
              <span><span style={{display:'inline-block',width:10,height:10,border:'1.5px solid var(--rose)',borderRadius:2,verticalAlign:'-1px',marginRight:4}}/>Today</span>
            </div>
          </div>

          {/* Revenue preview */}
          <div className="card">
            <div className="f jcs aic mb-16">
              <div>
                <div className="eyebrow">Last 6 months</div>
                <div className="section-title mt-4">Net revenue</div>
              </div>
              <div className="f gap-8">
                <div className="tabs" style={{border:0, margin:0}}>
                  <div className="tab">Gross</div>
                  <div className="tab active">Net</div>
                  <div className="tab">Nights</div>
                </div>
                <button className="btn btn-ghost" onClick={() => nav('finance')}>Finance report <Icons.Arrow size={12}/></button>
              </div>
            </div>
            <RevenueChart />
          </div>
        </div>

        {/* Right rail */}
        <div className="rail">
          {/* Arrivals today */}
          <div className="card card-ink">
            <div className="f jcs aic mb-12">
              <div className="eyebrow" style={{color:'rgba(246,243,236,0.7)'}}>Arriving today</div>
              <div className="xsmall ink-muted">4 parties</div>
            </div>
            {TODAY_EVENTS.filter(e => e.status === 'checkin').map(ev => {
              const p = propertyById(ev.property);
              return (
                <div key={ev.id} className="f aic gap-12" style={{padding:'12px 0',borderBottom:'1px solid rgba(246,243,236,0.12)'}}>
                  <div style={{width:38,height:38,borderRadius:10,background:p.color,display:'grid',placeItems:'center',color:'#fff',fontFamily:'Fraunces',fontSize:16}}>{p.short[0]}</div>
                  <div className="flex-1" style={{minWidth:0}}>
                    <div className="md">{ev.guest} {ev.country}</div>
                    <div className="xsmall ink-muted">{p.name} · {ev.nights}n · {ev.party}g</div>
                  </div>
                  <div className="right">
                    <div className="num md">{String(Math.floor(ev.from)).padStart(2,'0')}:{String(Math.round((ev.from%1)*60)).padStart(2,'0')}</div>
                    <button className="xsmall" style={{color:'var(--accent)',padding:0,marginTop:2}} onClick={() => openCheckIn(ev)}>Check in →</button>
                  </div>
                </div>
              );
            })}
            <button className="btn btn-ghost mt-8" style={{color:'var(--paper)', width:'100%', justifyContent:'center'}} onClick={() => nav('reservations')}>View all reservations →</button>
          </div>

          {/* Inbox preview */}
          <div className="card">
            <div className="f jcs aic mb-8">
              <div className="eyebrow">Inbox</div>
              <span className="xsmall muted num">3 unread</span>
            </div>
            {MESSAGES.slice(0,4).map(m => (
              <div key={m.id} className="msg-item" onClick={() => nav('inbox')}>
                <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 className="muted-2 xsmall">· {m.property}</span></span><span className="msg-time">{m.time}</span></div>
                  <div className="msg-preview">{m.preview}</div>
                  {m.tag && <span className={`msg-tag ${m.tag}`}>{m.tag === 'urgent' ? 'EARLY CHECK-IN' : 'AI SUGGESTED REPLY'}</span>}
                </div>
              </div>
            ))}
          </div>

          {/* Tasks */}
          <div className="card">
            <div className="f jcs aic mb-8">
              <div className="eyebrow">Today's ops</div>
              <button className="btn btn-ghost xsmall" onClick={() => nav('tasks')}>All tasks →</button>
            </div>
            {TASKS.slice(0,4).map(t => (
              <div key={t.id} className="f aic gap-12" style={{padding:'10px 0',borderBottom:'1px dashed var(--rule)'}}>
                <div style={{width:16,height:16,borderRadius:4,border:`1.5px solid ${t.status === 'in-progress' ? 'var(--accent)' : 'var(--rule-2)'}`, background: t.status === 'in-progress' ? 'var(--accent)' : 'transparent', flex:'0 0 16px'}}/>
                <div className="flex-1" style={{minWidth:0}}>
                  <div className="small md">{t.title}</div>
                  <div className="xsmall muted">{t.assignee} · due {t.due}</div>
                </div>
                {t.priority === 'high' && <Chip tone="risk">Priority</Chip>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// Tiny area chart (SVG) for revenue
function RevenueChart() {
  const data = REVENUE_SERIES;
  const w = 720, h = 200, pad = 24;
  const max = Math.max(...data.map(d => d.gross)) * 1.1;
  const step = (w - pad*2) / (data.length - 1);
  const y = v => h - pad - (v / max) * (h - pad * 2);
  const linePts = (key) => data.map((d, i) => `${pad + i*step},${y(d[key])}`).join(' ');
  const areaPts = `${pad},${h-pad} ${linePts('net')} ${pad + (data.length-1)*step},${h-pad}`;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="chart" preserveAspectRatio="none">
      <defs>
        <linearGradient id="revGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75, 1].map(f => (
        <line key={f} x1={pad} x2={w-pad} y1={h-pad - f*(h-pad*2)} y2={h-pad - f*(h-pad*2)} stroke="var(--rule)" strokeDasharray="2 4"/>
      ))}
      <polygon points={areaPts} fill="url(#revGrad)"/>
      <polyline fill="none" points={linePts('gross')} stroke="var(--ink-3)" strokeWidth="1.5" strokeDasharray="3 3"/>
      <polyline fill="none" points={linePts('net')} stroke="var(--accent)" strokeWidth="2"/>
      {data.map((d, i) => (
        <g key={d.m}>
          <circle cx={pad + i*step} cy={y(d.net)} r="3" fill="var(--card)" stroke="var(--accent)" strokeWidth="2"/>
          <text x={pad + i*step} y={h - 4} textAnchor="middle" fontSize="11" fill="var(--ink-3)" fontFamily="JetBrains Mono">{d.m}</text>
          {i === data.length - 1 && (
            <g>
              <text x={pad + i*step + 8} y={y(d.net) - 8} fontSize="12" fill="var(--ink)" fontFamily="JetBrains Mono" fontWeight="600">€{d.net.toLocaleString()}</text>
            </g>
          )}
        </g>
      ))}
    </svg>
  );
}

window.Dashboard = Dashboard;