/* All pages other than the reservation views */
const { useState: pS, useMemo: pM, useEffect: pE } = React;
const { fmtTime: pFt } = window.SEATIQ_HELPERS;

// ============= HOME =============
function HomePage({ reservations, waitlist, tables, now, onJump }) {
  const nowMin = now.getHours() * 60 + now.getMinutes();
  const upcoming = reservations
    .filter(r => r.status === 'confirmed' && r.start >= nowMin && r.start <= nowMin + 120)
    .sort((a,b) => a.start - b.start)
    .slice(0, 5);
  const seated = reservations.filter(r => r.status === 'seated');
  const stats = {
    covers: reservations.filter(r => r.status !== 'finished').reduce((a,r) => a + r.pax, 0),
    confirmed: reservations.filter(r => r.status === 'confirmed').length,
    seated: seated.length,
    waitlist: waitlist.length,
  };

  const activity = [
    { t: '19:08', txt: 'Familien Mortensen bekræftet via SMS', icon: 'check-circle', color: 'var(--accent-deep)' },
    { t: '19:02', txt: 'Anna Vestergaard tilføjet til ventelisten', icon: 'clock', color: 'var(--warn)' },
    { t: '18:54', txt: 'Sofie Berg ankommet — sat ved bord 1', icon: 'user', color: 'var(--ink)' },
    { t: '18:40', txt: 'Karen Strøm ringet for at flytte til 19:30', icon: 'phone', color: 'var(--info)' },
    { t: '18:22', txt: 'Ny online reservation: Hans Egede · 20:00', icon: 'plus', color: 'var(--accent-deep)' },
  ];

  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Mandag · 18. maj 2026 · service-overblik</div>
        <h1 className="page-hero-title">GODAFTEN.</h1>
        <p className="page-hero-sub">Du har <strong>{stats.confirmed}</strong> bekræftede gæster på vej, <strong>{stats.seated}</strong> spiser allerede, og <strong>{stats.waitlist}</strong> grupper venter.</p>
      </div>

      <div className="home-grid">
        <div className="home-card span-2">
          <div className="card-head">
            <h3>Næste 2 timer</h3>
            <button className="btn btn-soft" onClick={() => onJump('day')}>Se hele dagen <Icon name="chev-right" size={14}/></button>
          </div>
          <div className="up-list">
            {upcoming.length === 0 && <div style={{padding: 20, textAlign: 'center', color: 'var(--muted)'}}>Ingen flere i de næste 2 timer.</div>}
            {upcoming.map(r => (
              <div key={r.id} className="up-row">
                <div className="up-time">{pFt(r.start)}</div>
                <div className="up-name">
                  <strong>{r.name}</strong>
                  <div className="up-meta">{r.pax} pers · {tables.find(t => t.id === r.table)?.name} {r.tags?.includes('VIP') && <span className="tag-pill" style={{margin: 0, marginLeft: 6}}>VIP</span>}</div>
                </div>
                <div className="up-actions">
                  {r.allergies?.length > 0 && <span style={{color: 'var(--danger)', fontWeight: 700, fontSize: 11}}>⚠ {r.allergies.join(', ')}</span>}
                  <button className="btn btn-soft"><Icon name="message" size={13}/></button>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="home-card">
          <div className="card-head">
            <h3>Belægning i dag</h3>
          </div>
          <div className="occ-bigwheel">
            <svg viewBox="0 0 120 120" width="180" height="180">
              <circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" strokeWidth="14"/>
              <circle cx="60" cy="60" r="50" fill="none" stroke="var(--accent)" strokeWidth="14"
                strokeDasharray={`${(stats.covers / 60) * 314} 314`} strokeLinecap="round"
                transform="rotate(-90 60 60)"/>
            </svg>
            <div className="occ-center">
              <div className="occ-num">{stats.covers}</div>
              <div className="occ-lbl">af 60 covers</div>
            </div>
          </div>
          <div className="occ-bars">
            <Mini label="Frokost" pct={45} />
            <Mini label="Aften" pct={88} />
            <Mini label="Sen" pct={32} />
          </div>
        </div>

        <div className="home-card">
          <div className="card-head">
            <h3>Aktivitet</h3>
            <span style={{fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600}}>Live</span>
          </div>
          <div className="activity">
            {activity.map((a, i) => (
              <div key={i} className="act-row">
                <div className="act-icon" style={{color: a.color}}><Icon name={a.icon} size={14}/></div>
                <div style={{flex: 1}}>
                  <div style={{fontSize: 13}}>{a.txt}</div>
                  <div style={{fontSize: 11, color: 'var(--muted)', marginTop: 2}}>{a.t}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="home-card span-2">
          <div className="card-head">
            <h3>VIP & stamgæster i aften</h3>
          </div>
          <div className="vip-row">
            <VipCard name="Karen Strøm" note="Stamgæst siden 2019 · 47 besøg" pref="Foretrækker bord 3 · Riesling" time="19:00" />
            <VipCard name="Leif Rasmussen" note="Stamgæst · 23 besøg" pref="Steak medium-rare · Negroni før" time="18:00" />
            <VipCard name="Peter Sommer" note="Fødselsdag i aften 🎂" pref="Allergi: Skaldyr" time="17:00" alert />
            <VipCard name="Bjarke Damgaard" note="Vinarrangement booket · 2.400 kr depositum" pref="4-retters m. ledsageglas" time="19:00" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Mini({ label, pct }) {
  return (
    <div className="mini-row">
      <span className="mini-l">{label}</span>
      <div className="mini-bar"><div style={{width: `${pct}%`}}/></div>
      <span className="mini-v">{pct}%</span>
    </div>
  );
}
function VipCard({ name, note, pref, time, alert }) {
  return (
    <div className={`vip-card ${alert ? 'alert' : ''}`}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
        <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em'}}>{name}</div>
        <span style={{fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700}}>{time}</span>
      </div>
      <div style={{fontSize: 12, color: 'var(--muted)', marginTop: 4}}>{note}</div>
      <div style={{fontSize: 12, marginTop: 8, padding: '6px 10px', background: 'var(--surface-2)', borderRadius: 8, color: 'var(--ink-2)'}}>{pref}</div>
    </div>
  );
}

// ============= GUESTS =============
const GUESTS_DATA = [
  { id: 'g1', name: 'Karen Strøm',       email: 'karen@strom.dk',       phone: '+45 22 11 76 84', visits: 47, spend: 38420, lastVisit: '2 uger siden', tags: ['VIP', 'Stamgæst'], notes: 'Vinelsker. Foretrækker bord 3. Aldrig laks.' },
  { id: 'g2', name: 'Leif Rasmussen',    email: 'leif@rasmussen.dk',     phone: '+45 20 47 22 18', visits: 23, spend: 17890, lastVisit: '1 uge siden', tags: ['Stamgæst'], notes: 'Steak medium-rare. Negroni før middag.' },
  { id: 'g3', name: 'Bjarke Damgaard',   email: 'bd@damgaard.dk',        phone: '+45 27 19 88 02', visits: 18, spend: 24100, lastVisit: '3 dage siden', tags: ['VIP', 'Vinmenu'], notes: 'Køber ofte vinmenuen. Allergi: ingen.' },
  { id: 'g4', name: 'Sofie Berg',        email: 'sofie@berg.dk',         phone: '+45 27 88 14 02', visits: 9,  spend: 6840,  lastVisit: '1 måned siden', tags: ['Vegetar'], notes: 'Vegetar. Allergi: Nødder.' },
  { id: 'g5', name: 'Hans Egede',        email: 'h@egede.dk',            phone: '+45 26 14 78 09', visits: 5,  spend: 3920,  lastVisit: '2 måneder siden', tags: [], notes: '' },
  { id: 'g6', name: 'Marie Bjerg',       email: 'marie@bjerg.dk',        phone: '+45 28 47 19 03', visits: 12, spend: 8470,  lastVisit: '1 uge siden', tags: [], notes: 'Frokostgæst' },
  { id: 'g7', name: 'Mikkel Holst',      email: 'mh@holst.dk',           phone: '+45 31 47 92 06', visits: 8,  spend: 5230,  lastVisit: '3 uger siden', tags: [], notes: '' },
  { id: 'g8', name: 'Caroline Lund',     email: 'c@lund.io',             phone: '+45 31 22 04 88', visits: 4,  spend: 2840,  lastVisit: '4 uger siden', tags: [], notes: '' },
  { id: 'g9', name: 'Peter Sommer',      email: 'peter@sommer.co',       phone: '+45 22 88 14 09', visits: 14, spend: 11200, lastVisit: '2 mdr siden', tags: ['Birthday'], notes: 'Allergi: Skaldyr. Fødselsdag 18/5.' },
  { id: 'g10', name: 'Annika Pedersen',  email: 'annika@pedersen.dk',    phone: '+45 53 12 47 21', visits: 6,  spend: 4180,  lastVisit: '3 uger siden', tags: [], notes: '' },
  { id: 'g11', name: 'Familien Mortensen', email: 'm@mortensen.dk',      phone: '+45 42 19 86 33', visits: 11, spend: 14820, lastVisit: '2 uger siden', tags: ['Familie'], notes: 'Børnemenu. To børn.' },
  { id: 'g12', name: 'Anders Vang',      email: 'av@vang.dk',            phone: '+45 28 16 39 47', visits: 3,  spend: 2100,  lastVisit: '6 uger siden', tags: [], notes: '' },
];

function GuestsPage() {
  const [q, setQ] = pS('');
  const [sel, setSel] = pS(null);
  const filtered = GUESTS_DATA.filter(g =>
    g.name.toLowerCase().includes(q.toLowerCase()) ||
    g.email.toLowerCase().includes(q.toLowerCase()) ||
    g.phone.includes(q));
  const selected = filtered.find(g => g.id === sel) || filtered[0];

  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Gæster · 2.847 i databasen</div>
        <h1 className="page-hero-title">GÆSTEDATABASEN</h1>
        <p className="page-hero-sub">Søg, segmentér og noter præferencer — så enhver gæst føler sig genkendt fra det øjeblik, de træder ind.</p>
      </div>

      <div className="guests-grid">
        <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden'}}>
          <div style={{padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', gap: 10, alignItems: 'center'}}>
            <div className="search" style={{flex: 1}}>
              <Icon name="search" size={15}/>
              <input value={q} onChange={e => setQ(e.target.value)} placeholder="Søg navn, telefon, email…"/>
            </div>
            <button className="btn btn-soft"><Icon name="plus" size={14}/> Ny gæst</button>
            <button className="btn btn-soft"><Icon name="megaphone" size={14}/> Send kampagne</button>
          </div>
          <table className="list-table">
            <thead>
              <tr>
                <th>Gæst</th><th>Besøg</th><th>Forbrug</th><th>Sidst</th><th>Tags</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(g => (
                <tr key={g.id}
                  className={selected?.id === g.id ? 'selected' : ''}
                  onClick={() => setSel(g.id)}
                  style={{cursor: 'pointer'}}>
                  <td>
                    <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
                      <div style={{width: 32, height: 32, borderRadius: 100, background: 'var(--surface-2)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700}}>
                        {g.name.split(/\s+/).slice(0,2).map(s => s[0]).join('')}
                      </div>
                      <div>
                        <div style={{fontWeight: 600}}>{g.name}</div>
                        <div style={{fontSize: 11, color: 'var(--muted)'}}>{g.email}</div>
                      </div>
                    </div>
                  </td>
                  <td><strong>{g.visits}</strong></td>
                  <td style={{fontVariantNumeric: 'tabular-nums', fontWeight: 600}}>{g.spend.toLocaleString('da-DK')} kr</td>
                  <td style={{color: 'var(--muted)'}}>{g.lastVisit}</td>
                  <td>{g.tags.map(t => <span key={t} className="tag-pill" style={{marginRight: 4, marginBottom: 0}}>{t}</span>)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {selected && (
          <aside style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 20, alignSelf: 'flex-start', position: 'sticky', top: 18}}>
            <div style={{width: 60, height: 60, borderRadius: 100, background: 'var(--ink)', color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, marginBottom: 12}}>
              {selected.name.split(/\s+/).slice(0,2).map(s => s[0]).join('')}
            </div>
            <h2 style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.1}}>{selected.name.toUpperCase()}</h2>
            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8}}>
              {selected.tags.map(t => <span key={t} className="tag-pill" style={{margin: 0}}>{t}</span>)}
            </div>

            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, margin: '18px 0'}}>
              <Stat2 v={selected.visits} l="Besøg" />
              <Stat2 v={Math.round(selected.spend / selected.visits)} l="Snit/cover" suffix=" kr" />
              <Stat2 v={selected.spend.toLocaleString('da-DK')} l="Total" suffix=" kr" />
            </div>

            <div className="kv-row"><div className="k">Telefon</div><div className="v">{selected.phone}</div></div>
            <div className="kv-row"><div className="k">Email</div><div className="v">{selected.email}</div></div>
            <div className="kv-row"><div className="k">Sidst her</div><div className="v">{selected.lastVisit}</div></div>

            {selected.notes && (
              <>
                <h4 style={{fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--muted)', fontWeight: 700, marginTop: 18, marginBottom: 8}}>Noter</h4>
                <div style={{fontSize: 13, padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 10, lineHeight: 1.5}}>{selected.notes}</div>
              </>
            )}

            <div style={{display: 'flex', gap: 6, marginTop: 16}}>
              <button className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}}><Icon name="plus" size={13}/> Reserver</button>
              <button className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}}><Icon name="message" size={13}/> SMS</button>
              <button className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}}><Icon name="mail" size={13}/> Email</button>
            </div>
          </aside>
        )}
      </div>
    </div>
  );
}

function Stat2({ v, l, suffix = '' }) {
  return (
    <div style={{background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 10, padding: '10px 12px', textAlign: 'center'}}>
      <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1}}>{v}{suffix && <span style={{fontSize: 12, fontWeight: 600, color: 'var(--muted)'}}>{suffix}</span>}</div>
      <div style={{fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginTop: 4}}>{l}</div>
    </div>
  );
}

// ============= STATS =============
function StatsPage() {
  const days = ['Man','Tir','Ons','Tor','Fre','Lør','Søn'];
  const covers = [28, 34, 42, 50, 58, 60, 20];
  const noshow = [1.8, 2.4, 1.2, 2.0, 3.1, 2.6, 0.8];
  const max = Math.max(...covers);

  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Statistik · sidste 30 dage</div>
        <h1 className="page-hero-title">DEN STORE LINJE</h1>
        <p className="page-hero-sub">Find dine bedste tider, dine svageste dage og se hvad der trækker covers ind.</p>
      </div>

      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, padding: '0 28px 18px'}}>
        <BigStat n="1.142" l="Covers" sub="+12% vs forrige md" pos />
        <BigStat n="782.140 kr" l="Omsætning" sub="685 kr / cover" pos />
        <BigStat n="2,4 %" l="No-show rate" sub="−0,8pp vs sidste md" pos />
        <BigStat n="73 %" l="Belægning" sub="Snit pr. dag" />
      </div>

      <div style={{display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14, padding: '0 28px 28px'}}>
        <div className="home-card">
          <div className="card-head"><h3>Covers pr. ugedag</h3><span style={{fontSize: 11, color: 'var(--muted)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase'}}>Snit · sidste 4 uger</span></div>
          <div className="bar-chart">
            {days.map((d, i) => (
              <div key={d} className="bar-col">
                <div className="bar-fill" style={{height: `${(covers[i]/max)*100}%`}}>
                  <span className="bar-val">{covers[i]}</span>
                </div>
                <div className="bar-lbl">{d}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="home-card">
          <div className="card-head"><h3>Mest populære tider</h3></div>
          {[
            { t: '19:00 – 20:00', pct: 92 },
            { t: '20:00 – 21:00', pct: 78 },
            { t: '18:00 – 19:00', pct: 64 },
            { t: '12:30 – 13:30', pct: 52 },
            { t: '21:00 – 22:00', pct: 41 },
            { t: '13:30 – 14:30', pct: 33 },
          ].map(r => (
            <div key={r.t} className="mini-row" style={{padding: '6px 0'}}>
              <span className="mini-l" style={{minWidth: 120, fontVariantNumeric: 'tabular-nums'}}>{r.t}</span>
              <div className="mini-bar"><div style={{width: `${r.pct}%`}}/></div>
              <span className="mini-v">{r.pct}%</span>
            </div>
          ))}
        </div>

        <div className="home-card">
          <div className="card-head"><h3>Hvor kommer reservationerne fra?</h3></div>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18}}>
            <div>
              {[
                { l: 'Online widget', v: 58, c: 'var(--accent)' },
                { l: 'Telefon', v: 22, c: 'var(--info)' },
                { l: 'Walk-in', v: 12, c: 'var(--warn)' },
                { l: 'Email', v: 8, c: 'var(--danger)' },
              ].map(s => (
                <div key={s.l} style={{display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0'}}>
                  <span style={{width: 12, height: 12, borderRadius: 3, background: s.c}}/>
                  <span style={{flex: 1, fontSize: 13}}>{s.l}</span>
                  <strong>{s.v}%</strong>
                </div>
              ))}
            </div>
            <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
              <Donut data={[
                { v: 58, c: 'var(--accent)' },
                { v: 22, c: 'var(--info)' },
                { v: 12, c: 'var(--warn)' },
                { v: 8,  c: 'var(--danger)' },
              ]}/>
            </div>
          </div>
        </div>

        <div className="home-card">
          <div className="card-head"><h3>No-show rate pr. ugedag</h3></div>
          <div className="bar-chart">
            {days.map((d, i) => (
              <div key={d} className="bar-col">
                <div className="bar-fill" style={{height: `${(noshow[i]/4)*100}%`, background: noshow[i] > 2.5 ? 'var(--danger)' : 'var(--ink)'}}>
                  <span className="bar-val">{noshow[i]}%</span>
                </div>
                <div className="bar-lbl">{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function BigStat({ n, l, sub, pos }) {
  return (
    <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 18}}>
      <div style={{fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700}}>{l}</div>
      <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 36, letterSpacing: '-0.03em', marginTop: 4}}>{n}</div>
      <div style={{fontSize: 12, color: pos ? 'var(--accent-deep)' : 'var(--muted)', fontWeight: 600, marginTop: 4}}>{sub}</div>
    </div>
  );
}

function Donut({ data, size = 140 }) {
  const total = data.reduce((a, d) => a + d.v, 0);
  const R = size / 2 - 14;
  const C = 2 * Math.PI * R;
  let offset = 0;
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
      <circle cx={size/2} cy={size/2} r={R} fill="none" stroke="var(--surface-2)" strokeWidth="14"/>
      {data.map((d, i) => {
        const len = (d.v / total) * C;
        const el = <circle key={i} cx={size/2} cy={size/2} r={R} fill="none"
          stroke={d.c} strokeWidth="14"
          strokeDasharray={`${len} ${C}`}
          strokeDashoffset={-offset}
          transform={`rotate(-90 ${size/2} ${size/2})`} />;
        offset += len;
        return el;
      })}
    </svg>
  );
}

Object.assign(window, { HomePage, GuestsPage, StatsPage });