/* WildTrack — Section 3 — Web Portal screens */

function PortalPage() {
  return (
    <div>
      <PageHeader active="Portal"/>
      <main style={{ background: '#FAFAFA', padding: '64px 48px 96px' }}>
        <div style={{ maxWidth: 1480, margin: '0 auto' }}>
          <Intro/>
          <ScreenWrap num="03.1" title="Dashboard" sub="The primary operator's morning view — what's happening, who's online, what needs attention.">
            <PortalDashboard/>
          </ScreenWrap>
          <ScreenWrap num="03.2" title="Zone Management" sub="A roster, a map, and a polygon editor. The desk-side counterpart to the field operative's Map View.">
            <ZoneManagement/>
          </ScreenWrap>
          <ScreenWrap num="03.3" title="Public Trace Viewer" sub="What a restaurant patron sees after scanning the QR on a Red Deer plate. No login. Trust on first glance.">
            <PublicTrace/>
          </ScreenWrap>
        </div>
      </main>
    </div>
  );
}

function PageHeader({ active }) {
  const sections = ['Overview', 'Brand', 'Mobile', 'Portal', 'Components', 'Modes'];
  const links = {
    Overview: 'system.html', Brand: 'Brand.html', Mobile: 'Mobile.html',
    Portal: 'Portal.html', Components: 'Components.html', Modes: 'Modes.html',
  };
  return (
    <header className="rh-page-header">
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <svg width="32" height="32" viewBox="0 0 200 200">
          <circle cx="100" cy="100" r="78" fill="none" stroke="#52B788" strokeWidth="6" strokeDasharray="38 22" transform="rotate(-20 100 100)"/>
          <circle cx="100" cy="100" r="58" fill="none" stroke="#52B788" strokeWidth="3"/>
          <path d="M100 70 C82 70 78 86 88 100 L100 124 L112 100 C122 86 118 70 100 70 Z" fill="#52B788"/>
        </svg>
        <div>
          <div className="rh-eyebrow">Section 03</div>
          <h1>Web Portal</h1>
        </div>
      </div>
      <nav className="rh-nav">
        {sections.map(s => (
          <a key={s} href={links[s]} className={s === active ? 'active' : ''}>{s}</a>
        ))}
      </nav>
    </header>
  );
}

function Intro() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start', marginBottom: 80 }}>
      <div>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#52B788', fontWeight: 500, marginBottom: 24 }}>
          Section 03 · Portal
        </div>
        <h2 className="font-display" style={{ fontSize: 56, fontWeight: 700, margin: 0, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          The desk view.<br/>
          Data density as a feature.
        </h2>
      </div>
      <div style={{ fontSize: 16, lineHeight: 1.65, color: '#2A2A2A' }}>
        <p style={{ marginTop: 0 }}>
          Where the mobile app is glanceable, the management portal is dense by design. Land managers run estates from this view — they want tables, filters, and sidebar panels they can read at a glance and act on.
        </p>
        <p>
          The consumer-facing Trace Viewer is the opposite — minimal, premium, designed to feel like a provenance certificate rather than a dashboard.
        </p>
      </div>
    </div>
  );
}

function ScreenWrap({ num, title, sub, children }) {
  return (
    <section style={{ marginBottom: 96 }}>
      <div style={{ marginBottom: 24 }}>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#52B788', fontWeight: 500, marginBottom: 8 }}>
          {num}
        </div>
        <h3 className="font-display" style={{ fontSize: 40, fontWeight: 700, margin: '0 0 12px', letterSpacing: '-0.02em' }}>
          {title}
        </h3>
        <p style={{ fontSize: 15, color: '#4A4A4A', maxWidth: 720, lineHeight: 1.55, margin: 0 }}>{sub}</p>
      </div>
      <div style={{
        border: '1px solid #E0E0E0', borderRadius: 16, overflow: 'hidden',
        background: 'white', boxShadow: '0 24px 60px -24px rgba(0,0,0,0.12)',
      }}>
        {/* Browser chrome */}
        <div style={{
          background: '#F5F5F5', padding: '10px 16px',
          display: 'flex', alignItems: 'center', gap: 12,
          borderBottom: '1px solid #E0E0E0',
        }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#FF5F57', '#FEBC2E', '#28C840'].map(c => (
              <div key={c} style={{ width: 12, height: 12, borderRadius: 6, background: c }}/>
            ))}
          </div>
          <div style={{
            flex: 1, maxWidth: 540, margin: '0 auto',
            padding: '6px 14px', background: 'white', borderRadius: 8,
            border: '1px solid #E0E0E0',
            fontSize: 12, color: '#6C757D', fontFamily: 'JetBrains Mono, monospace',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <Icon.Lock size={12} stroke="#52B788" sw={2}/>
            <span>portal.wildtrack.com</span>
          </div>
          <div style={{ width: 60 }}/>
        </div>
        {children}
      </div>
    </section>
  );
}

/* ────────────────────────────────────────
   3A — DASHBOARD
   ──────────────────────────────────────── */
function PortalDashboard() {
  return (
    <div style={{ display: 'flex', minHeight: 880, background: 'white' }}>
      <Sidebar active="dashboard"/>
      <div style={{ flex: 1, overflow: 'hidden' }}>
        {/* Top bar */}
        <div style={{
          padding: '20px 32px',
          borderBottom: '1px solid #EAEAEA',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div>
            <h1 className="font-display" style={{ fontSize: 28, fontWeight: 700, margin: 0, color: '#1B1B1B', letterSpacing: '-0.01em' }}>
              Dashboard
            </h1>
            <div style={{ fontSize: 13, color: '#6C757D', marginTop: 4 }}>
              Wednesday, 14 May 2026 · Highland Estate Management Ltd.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{
              padding: '8px 14px', borderRadius: 8,
              background: '#F5F5F5',
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 13, color: '#1B1B1B',
            }}>
              <Icon.Search size={16} stroke="#6C757D"/>
              <span style={{ color: '#6C757D' }}>Search tags, members…</span>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#B0B0B0', marginLeft: 24 }}>⌘K</span>
            </div>
            <button className="rh-btn rh-btn-primary">
              <Icon.Plus size={16} stroke="white"/> New Session
            </button>
          </div>
        </div>

        <div style={{ padding: '24px 32px' }}>
          {/* KPI cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
            <KPICard label="Active Sessions" val="3" trend="↑ 1 from yesterday" trendColor="#2D6A4F"/>
            <KPICard label="Tags Today" val="12" trend="+ 4 in last hour" trendColor="#6C757D"/>
            <KPICard label="Members Online" val="7" suffix="/ 14" trend="50% of roster" trendColor="#6C757D"/>
            <KPICard label="Open Alerts" val="1" trend="J. MacAllister · LDA" trendColor="#C0392B" emphasis/>
          </div>

          {/* Map */}
          <div style={{
            border: '1px solid #1A2F22', borderRadius: 12, overflow: 'hidden',
            marginBottom: 24, position: 'relative',
          }}>
            <TopoMap width={1100} height={320} variant="wide"
              tags={[{ x: 0.18, y: 0.5 }, { x: 0.3, y: 0.4 }, { x: 0.45, y: 0.55 }, { x: 0.62, y: 0.45 }, { x: 0.78, y: 0.55 }, { x: 0.86, y: 0.42 }]}
              others={[{ x: 0.25, y: 0.6, initials: 'TH' }, { x: 0.66, y: 0.38, initials: 'SM' }, { x: 0.84, y: 0.62, initials: 'JM' }]}
              userPos={[0.4, 0.65]}
              style={{ width: '100%', height: 320, display: 'block' }}
            />
            {/* Top overlay */}
            <div style={{
              position: 'absolute', top: 16, left: 20,
              display: 'flex', alignItems: 'center', gap: 10, color: 'white',
            }}>
              <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.2em', padding: '4px 10px', background: 'rgba(15,31,24,0.7)', borderRadius: 999, border: '1px solid rgba(82,183,136,0.4)', color: '#52B788' }}>
                ALL ZONES · LIVE
              </div>
            </div>
            <div style={{
              position: 'absolute', top: 16, right: 20,
              display: 'flex', gap: 8,
            }}>
              {['Zones · 5', 'Members · 7 online', 'Tags · 12 today'].map(l => (
                <div key={l} style={{
                  fontSize: 11, padding: '4px 10px',
                  background: 'rgba(15,31,24,0.7)', borderRadius: 999,
                  border: '1px solid rgba(255,255,255,0.15)', color: 'white',
                  fontFamily: 'DM Sans, sans-serif',
                }}>{l}</div>
              ))}
            </div>
          </div>

          {/* Two-column section */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 24 }}>
            <RecentTagsTable/>
            <AlertsPanel/>
          </div>
        </div>
      </div>
    </div>
  );
}

function KPICard({ label, val, suffix, trend, trendColor, emphasis }) {
  return (
    <div style={{
      border: '1px solid ' + (emphasis ? '#C0392B' : '#E0E0E0'),
      background: emphasis ? '#FDF5F4' : 'white',
      borderRadius: 12, padding: 18,
    }}>
      <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 12 }}>
        {label}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
        <span className="font-display" style={{ fontSize: 36, fontWeight: 700, color: emphasis ? '#C0392B' : '#1B1B1B', letterSpacing: '-0.02em', lineHeight: 1 }}>
          {val}
        </span>
        {suffix && <span style={{ fontSize: 14, color: '#6C757D' }}>{suffix}</span>}
      </div>
      <div style={{ fontSize: 12, color: trendColor }}>{trend}</div>
    </div>
  );
}

function RecentTagsTable() {
  const rows = [
    { id: 'WT-2026-00043', sp: 'Pheasant', op: 'J. MacAllister', z: 'Lake District A', t: '15:44', s: 'Tagged' },
    { id: 'WT-2026-00042', sp: 'Red Deer', op: 'J. MacAllister', z: 'Lake District A', t: '14:22', s: 'Tagged' },
    { id: 'WT-2026-00041', sp: 'Roe Deer', op: 'T. Hargreaves', z: 'Cairngorms 3', t: '13:28', s: 'Tagged' },
    { id: 'WT-2026-00040', sp: 'Red Deer', op: 'J. MacAllister', z: 'Lake District A', t: '11:52', s: 'Processed' },
    { id: 'WT-2026-00039', sp: 'Wild Boar', op: 'S. Munro', z: 'Exmoor East', t: '10:14', s: 'Processed' },
    { id: 'WT-2026-00038', sp: 'Red Grouse', op: 'T. Hargreaves', z: 'Cairngorms 3', t: '09:22', s: 'Distributed' },
  ];
  return (
    <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, overflow: 'hidden', background: 'white' }}>
      <div style={{ padding: '16px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #EAEAEA' }}>
        <h3 className="font-display" style={{ fontSize: 18, fontWeight: 600, margin: 0, color: '#1B1B1B' }}>
          Recent Tags
        </h3>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button style={{
            padding: '6px 10px', borderRadius: 6,
            background: 'white', border: '1px solid #D0D0D0',
            display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#4A4A4A',
          }}>
            <Icon.Filter size={12} stroke="#4A4A4A"/> Filter
          </button>
          <a style={{ fontSize: 13, color: '#2D6A4F', fontWeight: 500 }}>View all →</a>
        </div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: '#2D6A4F', color: 'white' }}>
            {['Tag ID', 'Species', 'Operative', 'Zone', 'Time', 'Stage', ''].map(h => (
              <th key={h} style={{
                textAlign: 'left', padding: '12px 16px',
                fontSize: 12, fontWeight: 500, letterSpacing: '0.04em',
              }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={r.id} style={{
              background: i % 2 === 0 ? 'white' : '#FAFAFA',
              borderBottom: i < rows.length - 1 ? '1px solid #EAEAEA' : 'none',
            }}>
              <td style={{ padding: '12px 16px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#1B1B1B' }}>{r.id}</td>
              <td style={{ padding: '12px 16px', fontSize: 13, color: '#1B1B1B', fontWeight: 500 }}>{r.sp}</td>
              <td style={{ padding: '12px 16px', fontSize: 13, color: '#4A4A4A' }}>{r.op}</td>
              <td style={{ padding: '12px 16px', fontSize: 13, color: '#4A4A4A' }}>{r.z}</td>
              <td style={{ padding: '12px 16px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#6C757D' }}>{r.t}</td>
              <td style={{ padding: '12px 16px' }}>
                <span className={
                  r.s === 'Tagged' ? 'rh-badge rh-badge-active' :
                  r.s === 'Processed' ? 'rh-badge rh-badge-processing' :
                  'rh-badge rh-badge-pending'
                } style={{ fontSize: 11 }}>{r.s}</span>
              </td>
              <td style={{ padding: '12px 16px', textAlign: 'right' }}>
                <Icon.Eye size={16} stroke="#6C757D"/>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AlertsPanel() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{
        border: '1px solid #C0392B', borderRadius: 12, padding: 18,
        background: '#FDF5F4', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 4, background: '#C0392B' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: '#C0392B', textTransform: 'uppercase', fontWeight: 600 }}>
            ● Active alert
          </div>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#C0392B', fontWeight: 600 }}>2 min ago</span>
        </div>
        <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 18, fontWeight: 700, color: '#1B1B1B', marginBottom: 4 }}>
          J. MacAllister
        </div>
        <div style={{ fontSize: 13, color: '#4A4A4A', marginBottom: 14 }}>
          Lake District Zone A · Active session
        </div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#6C757D', marginBottom: 16 }}>
          54.4621°N · 2.3010°W · ± 4m
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="rh-btn rh-btn-danger" style={{ flex: 1, fontSize: 13 }}>Acknowledge</button>
          <button style={{
            padding: '11px 14px', borderRadius: 8,
            background: 'white', border: '1px solid #D0D0D0',
            fontSize: 13, color: '#1B1B1B',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon.Phone size={14} stroke="#1B1B1B"/> Call
          </button>
        </div>
      </div>

      <div style={{
        border: '1px dashed #D0D0D0', borderRadius: 12, padding: 24,
        background: '#FAFAFA', textAlign: 'center', color: '#6C757D',
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 20, margin: '0 auto 12px',
          background: '#D8F3DC',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Check size={20} stroke="#2D6A4F"/>
        </div>
        <div style={{ fontSize: 14, fontWeight: 500, color: '#1B1B1B' }}>All clear</div>
        <div style={{ fontSize: 12, marginTop: 4 }}>No other active alerts</div>
      </div>
    </div>
  );
}

/* Sidebar */
function Sidebar({ active }) {
  const items = [
    { id: 'dashboard', lbl: 'Dashboard', Ico: Icon.Chart },
    { id: 'zones', lbl: 'Zones', Ico: Icon.Map },
    { id: 'sessions', lbl: 'Sessions', Ico: Icon.Briefcase },
    { id: 'tags', lbl: 'Tags', Ico: Icon.Tag },
    { id: 'users', lbl: 'Users', Ico: Icon.Users },
    { id: 'alerts', lbl: 'Alerts', Ico: Icon.Alert, badge: 1 },
    { id: 'reports', lbl: 'Reports', Ico: Icon.File },
    { id: 'settings', lbl: 'Settings', Ico: Icon.Settings },
  ];
  return (
    <div style={{ width: 240, background: '#1B1B1B', color: 'white', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
      <div style={{ padding: '20px 20px 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="32" height="32" viewBox="0 0 200 200">
          <circle cx="100" cy="100" r="78" fill="none" stroke="#52B788" strokeWidth="6" strokeDasharray="38 22" transform="rotate(-20 100 100)"/>
          <circle cx="100" cy="100" r="58" fill="none" stroke="#52B788" strokeWidth="3"/>
          <path d="M100 70 C82 70 78 86 88 100 L100 124 L112 100 C122 86 118 70 100 70 Z" fill="#52B788"/>
        </svg>
        <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 17, letterSpacing: '0.02em' }}>
          Wild<span style={{ color: '#52B788' }}>Track</span>
        </span>
      </div>
      <div style={{ padding: '16px 12px', flex: 1 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', color: '#8BAF96', padding: '8px 8px 12px', textTransform: 'uppercase' }}>
          Navigation
        </div>
        {items.map(it => (
          <div key={it.id} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 12px',
            borderLeft: '3px solid ' + (active === it.id ? '#52B788' : 'transparent'),
            background: active === it.id ? 'rgba(82,183,136,0.08)' : 'transparent',
            color: active === it.id ? 'white' : 'rgba(255,255,255,0.6)',
            borderRadius: '0 8px 8px 0',
            marginBottom: 2,
            fontSize: 14, fontWeight: 500,
            cursor: 'pointer',
          }}>
            <it.Ico size={18} stroke="currentColor"/>
            <span style={{ flex: 1 }}>{it.lbl}</span>
            {it.badge && (
              <span style={{
                fontSize: 10, padding: '1px 7px', borderRadius: 999,
                background: '#C0392B', color: 'white', fontWeight: 600,
              }}>{it.badge}</span>
            )}
          </div>
        ))}
      </div>
      {/* Org footer */}
      <div style={{ padding: 16, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{
          padding: 12, borderRadius: 10,
          background: 'rgba(255,255,255,0.04)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: '#2D6A4F', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>HE</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'white', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              Highland Estate Mgmt
            </div>
            <div style={{ fontSize: 10, color: '#8BAF96', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', marginTop: 2 }}>
              PRIMARY OPERATOR
            </div>
          </div>
          <Icon.Logout size={16} stroke="#8BAF96"/>
        </div>
      </div>
    </div>
  );
}

window.PortalDashboard = PortalDashboard;
window.Sidebar = Sidebar;
window.PortalPage = PortalPage;
window.PortalPageHeader = PageHeader;