// dashboard-mobile.jsx
// Mobile portrait layout (375x812). Same elements, stacked vertically.
// Order matches user's spec: ATTENTION → NORMAL → ALERTS → PRESSURE → RESERVATIONS → ACTIONS.

const M_BORDER = '1px solid #e8e6e0';
const M_RADIUS = 14;
const M_CARD_BG = '#fff';

const M_REVEAL_DUR = 0.55;
const M_LIFT = 12;

function mRevealStyle(reveal) {
  const t = Easing.easeOutCubic(clamp(reveal, 0, 1));
  return {
    opacity: t,
    transform: `translateY(${(1 - t) * M_LIFT}px)`,
    willChange: 'transform, opacity',
  };
}

// ── Cards ───────────────────────────────────────────────────────────────────

function MStatusCard({ reveal, dotColor, label, primary, secondary, secondaryColor }) {
  return (
    <div style={{
      background: M_CARD_BG,
      border: M_BORDER,
      borderRadius: M_RADIUS,
      padding: '18px 20px',
      fontFamily: 'Inter, system-ui, sans-serif',
      ...mRevealStyle(reveal),
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10 }}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: dotColor }}/>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', color: '#1a1a1a' }}>{label}</div>
      </div>
      <div style={{ fontSize: 15, color: '#1a1a1a', marginBottom: 3 }}>{primary}</div>
      {secondary && <div style={{ fontSize: 13, color: secondaryColor || '#8a8a8a' }}>{secondary}</div>}
    </div>
  );
}

function MPressureBadge({ level }) {
  const map = {
    HIGH:   { bg: 'rgba(214, 68, 55, 0.08)',  fg: '#c5372c' },
    MEDIUM: { bg: 'rgba(201, 140, 55, 0.09)', fg: '#a8711a' },
  };
  const { bg, fg } = map[level] || map.MEDIUM;
  return (
    <span style={{
      display: 'inline-block', background: bg, color: fg,
      fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
      padding: '2px 7px', borderRadius: 4,
    }}>{level}</span>
  );
}

function MPressureRow({ level, title, score, predicted, first }) {
  return (
    <div style={{
      padding: '14px 18px',
      borderTop: first ? 'none' : '1px solid #f0efea',
      fontFamily: 'Inter, system-ui, sans-serif',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
        <MPressureBadge level={level} />
        {predicted && (
          <span style={{
            background: '#f4f1ec', color: '#8a6a3a',
            fontSize: 10, padding: '2px 7px', borderRadius: 4,
          }}>Predicted</span>
        )}
        <div style={{ flex: 1 }}/>
        <span style={{
          fontSize: 13, fontWeight: 600, color: '#111',
          fontVariantNumeric: 'tabular-nums',
        }}>{score}/100</span>
      </div>
      <div style={{ fontSize: 13, color: '#1a1a1a' }}>{title}</div>
    </div>
  );
}

function MPressurePanel({ reveal }) {
  return (
    <div style={{
      background: M_CARD_BG, border: M_BORDER, borderRadius: M_RADIUS,
      overflow: 'hidden',
      fontFamily: 'Inter, system-ui, sans-serif',
      ...mRevealStyle(reveal),
    }}>
      <div style={{
        padding: '14px 18px',
        fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
        color: '#6b6b6b',
        borderBottom: '1px solid #f0efea',
      }}>PRESSURE EVENTS</div>
      <MPressureRow first level="HIGH"   title="Reception · Friday 19:00" score="84" predicted />
      <MPressureRow       level="MEDIUM" title="Bar 1 · Friday 20:00"      score="58" />
      <MPressureRow       level="MEDIUM" title="Restaurant · Friday 18:00" score="51" />
    </div>
  );
}

function MReservationBlock({ title, lines }) {
  return (
    <div style={{ border: M_BORDER, borderRadius: M_RADIUS, padding: '12px 14px', marginTop: 10 }}>
      <div style={{ fontSize: 13, color: '#1a1a1a', marginBottom: 4, fontWeight: 500 }}>{title}</div>
      {lines.map((l, i) => (
        <div key={i} style={{
          fontSize: 12,
          color: i === lines.length - 1 ? '#8a8a8a' : '#5a5a5a',
          lineHeight: 1.55,
        }}>
          {l}
          {i === lines.length - 1 && (
            <span style={{
              marginLeft: 6, fontSize: 9, letterSpacing: '0.08em',
              color: '#9a9a9a', fontWeight: 600,
            }}>PMS</span>
          )}
        </div>
      ))}
    </div>
  );
}

function MReservationsPanel({ reveal }) {
  return (
    <div style={{
      background: M_CARD_BG, border: M_BORDER, borderRadius: M_RADIUS,
      padding: '14px 18px',
      fontFamily: 'Inter, system-ui, sans-serif',
      ...mRevealStyle(reveal),
    }}>
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
        color: '#6b6b6b', marginBottom: 10,
      }}>UPCOMING RESERVATIONS</div>
      <div style={{ fontSize: 13, color: '#1a1a1a' }}>Next 24h — 14 arrivals</div>
      <MReservationBlock
        title="Friday 18:00–20:00"
        lines={['92% occupancy · Stress 70%', 'Last-minute dominant']}
      />
      <MReservationBlock
        title="Saturday 10:00–12:00"
        lines={['44% occupancy · Leisure', '14+ days ahead']}
      />
    </div>
  );
}

function MActionBar({ reveal }) {
  return (
    <div style={{
      background: M_CARD_BG, border: M_BORDER, borderRadius: M_RADIUS,
      padding: '14px 18px',
      fontFamily: 'Inter, system-ui, sans-serif',
      ...mRevealStyle(reveal),
    }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', color: '#6b6b6b', marginBottom: 10 }}>
        3 ACTIONS READY
      </div>
      <div style={{ fontSize: 13, color: '#2a2a2a', marginBottom: 12 }}>
        Add +1 front desk · Fri 18–20
      </div>
      <div style={{
        background: '#111', color: '#fff', fontSize: 13,
        padding: '10px 16px', borderRadius: 999,
        display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>Approve <span style={{ fontSize: 12 }}>→</span></div>
    </div>
  );
}

// ── Timeline ────────────────────────────────────────────────────────────────

const M_STEP = 0.5;

function mRevealAt(time, t0) {
  return clamp((time - t0) / M_REVEAL_DUR, 0, 1);
}

function MobileScene() {
  const time = useTime();
  const { duration } = useTimeline();

  const outroStart = duration - 0.6;
  const outroFade = clamp((time - outroStart) / 0.6, 0, 1);
  const canvasOpacity = 1 - Easing.easeInCubic(outroFade);

  const t = {
    attention:    0.25,
    normal:       0.25 + M_STEP * 1,
    alerts:       0.25 + M_STEP * 2,
    pressure:     0.25 + M_STEP * 3,
    reservations: 0.25 + M_STEP * 4,
    actions:      0.25 + M_STEP * 5,
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      padding: '24px 18px',
      boxSizing: 'border-box',
      background: '#fbfaf7',
      opacity: canvasOpacity,
      display: 'flex', flexDirection: 'column', gap: 12,
      overflow: 'hidden',
    }}>
      <MStatusCard reveal={mRevealAt(time, t.attention)} dotColor="#d69a2e" label="ATTENTION"       primary="Pressure: Medium" secondary="Reception 19:00"    secondaryColor="#b88a4a" />
      <MStatusCard reveal={mRevealAt(time, t.normal)}    dotColor="#4e9c5f" label="NORMAL"          primary="Team energy: OK"  secondary="Shift baseline met" secondaryColor="#6a9a77" />
      <MStatusCard reveal={mRevealAt(time, t.alerts)}    dotColor="#d14a3c" label="3 ACTIVE ALERTS" primary="Click to review" />
      <MPressurePanel     reveal={mRevealAt(time, t.pressure)} />
      <MReservationsPanel reveal={mRevealAt(time, t.reservations)} />
      <MActionBar         reveal={mRevealAt(time, t.actions)} />
    </div>
  );
}

Object.assign(window, { MobileScene });