/* WildTrack — Mobile screens — frame components.
   Each component renders the INTERIOR of a phone (below the status bar).
   Frame chrome lives in mobile-page.jsx. */

/* ────────────────────────────────────────
   2A — HOME DASHBOARD (populated)
   ──────────────────────────────────────── */
function HomePopulated() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'white' }}>
      {/* Top bar */}
      <div style={{ padding: '12px 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 19, letterSpacing: '0.02em', color: '#1B1B1B' }}>
            Wild<span style={{ color: '#2D6A4F' }}>Track</span>
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ position: 'relative' }}>
            <Icon.Bell size={22} stroke="#1B1B1B"/>
            <div style={{ position: 'absolute', top: -2, right: -2, width: 8, height: 8, borderRadius: 4, background: '#C0392B', border: '2px solid white' }}/>
          </div>
          <div style={{
            width: 32, height: 32, borderRadius: 16, background: '#2D6A4F',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontSize: 12, fontWeight: 600, fontFamily: 'DM Sans, sans-serif',
          }}>JM</div>
        </div>
      </div>

      {/* Online status pill */}
      <div style={{ padding: '4px 20px 16px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: '#D8F3DC', color: '#2D6A4F',
          fontSize: 12, fontWeight: 500,
        }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: '#52B788' }}/>
          Online · Synced 2s ago
        </div>
      </div>

      {/* Zone card */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, padding: 16, background: 'white' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
            <div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 6 }}>
                Assigned Zone
              </div>
              <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 20, fontWeight: 700, color: '#1B1B1B', letterSpacing: '-0.01em' }}>
                Lake District Zone A
              </div>
            </div>
            <span className="rh-badge rh-badge-active" style={{ fontSize: 11 }}>4 active</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, borderTop: '1px solid #E0E0E0' }}>
            <div style={{ fontSize: 13, color: '#6C757D' }}>
              Session: <span style={{ color: '#1B1B1B', fontWeight: 500 }}>Not started</span>
            </div>
            <div style={{ fontSize: 12, color: '#52B788', fontFamily: 'JetBrains Mono, monospace' }}>± 4m</div>
          </div>
        </div>
      </div>

      {/* Primary actions */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
          <ActionCard icon={<Icon.Activity size={20} stroke="white"/>} label="Start Session" sub="Begin tracking" />
          <ActionCard icon={<Icon.Tag size={20} stroke="#2D6A4F"/>} label="Register Tag" sub="Scan or enter ID" variant="secondary" />
        </div>
        <button style={{
          width: '100%', border: 'none', background: '#C0392B', color: 'white',
          borderRadius: 12, padding: '18px 16px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontFamily: 'DM Sans, sans-serif', fontSize: 16, fontWeight: 600,
          cursor: 'pointer',
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Icon.Alert size={22} stroke="white"/>
            Emergency Alert
          </span>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', opacity: 0.8 }}>
            HOLD →
          </span>
        </button>
      </div>

      {/* Quick stats */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, padding: 14, background: '#F5F5F5', borderRadius: 12 }}>
          <Stat val="3" lbl="Tags · today"/>
          <Stat val="2.4" lbl="km · today" />
          <Stat val="4" lbl="Members" />
        </div>
      </div>

      {/* Recent activity */}
      <div style={{ padding: '0 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3 style={{ fontFamily: 'Syne, sans-serif', fontSize: 16, fontWeight: 600, margin: 0, color: '#1B1B1B' }}>Recent Activity</h3>
        <a style={{ fontSize: 12, color: '#2D6A4F', fontWeight: 500, textDecoration: 'none' }}>View All →</a>
      </div>

      <div style={{ padding: '8px 20px 16px', flex: 1, overflow: 'hidden' }}>
        <ActivityRow icon={<Icon.Deer size={16} stroke="#2D6A4F"/>} species="Red Deer" tagId="WT-2026-00042" type="Harvest" ago="14m ago" who="JM"/>
        <ActivityRow icon={<Icon.Pheasant size={16} stroke="#2D6A4F"/>} species="Pheasant" tagId="WT-2026-00041" type="Monitor" ago="1h ago" who="TH"/>
        <ActivityRow icon={<Icon.Deer size={16} stroke="#2D6A4F"/>} species="Roe Deer" tagId="WT-2026-00040" type="Harvest" ago="2h ago" who="JM"/>
      </div>

      {/* Tab bar */}
      <TabBar active="home"/>
    </div>
  );
}

/* ────────────────────────────────────────
   2A — HOME DASHBOARD (offline)
   ──────────────────────────────────────── */
function HomeOffline() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'white' }}>
      {/* Offline banner */}
      <div style={{
        padding: '10px 20px',
        background: '#FFF3CD', borderBottom: '1px solid #E9C46A',
        display: 'flex', alignItems: 'center', gap: 10,
        color: '#856404', fontSize: 13,
      }}>
        <Icon.WifiOff size={18} stroke="#856404"/>
        <span style={{ flex: 1 }}>Working offline — changes will sync</span>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600 }}>3 queued</span>
      </div>

      {/* Top bar */}
      <div style={{ padding: '12px 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 19, letterSpacing: '0.02em', color: '#1B1B1B' }}>
          Wild<span style={{ color: '#2D6A4F' }}>Track</span>
        </span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Icon.Bell size={22} stroke="#1B1B1B"/>
          <div style={{
            width: 32, height: 32, borderRadius: 16, background: '#2D6A4F',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontSize: 12, fontWeight: 600,
          }}>JM</div>
        </div>
      </div>

      {/* Offline pill */}
      <div style={{ padding: '4px 20px 16px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: '#FFF3CD', color: '#856404',
          fontSize: 12, fontWeight: 500,
        }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: '#E9C46A' }}/>
          Offline · Last sync 14:08
        </div>
      </div>

      {/* Zone card */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, padding: 16, background: 'white' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
            <div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 6 }}>
                Assigned Zone
              </div>
              <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 20, fontWeight: 700, color: '#1B1B1B', letterSpacing: '-0.01em' }}>
                Lake District Zone A
              </div>
            </div>
            <span className="rh-badge rh-badge-pending" style={{ fontSize: 11 }}>Cached</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, borderTop: '1px solid #E0E0E0' }}>
            <div style={{ fontSize: 13, color: '#6C757D' }}>Session active · queued</div>
            <div style={{ fontSize: 12, color: '#856404', fontFamily: 'JetBrains Mono, monospace' }}>GPS only</div>
          </div>
        </div>
      </div>

      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
          <ActionCard icon={<Icon.Activity size={20} stroke="white"/>} label="Continue Session" sub="Queue mode" />
          <ActionCard icon={<Icon.Tag size={20} stroke="#2D6A4F"/>} label="Register Tag" sub="Will sync" variant="secondary" />
        </div>
        <button style={{
          width: '100%', border: 'none', background: '#C0392B', color: 'white',
          borderRadius: 12, padding: '18px 16px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontSize: 16, fontWeight: 600,
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Icon.Alert size={22} stroke="white"/>
            Emergency Alert
          </span>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', opacity: 0.8 }}>
            SMS FALLBACK
          </span>
        </button>
      </div>

      {/* Sync queue panel */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{
          background: '#FAFAFA', border: '1px dashed #D0D0D0', borderRadius: 12,
          padding: 14,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#1B1B1B' }}>Pending Sync</div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#6C757D' }}>3 items</div>
          </div>
          <QueueItem label="Tag WT-2026-00043" sub="Red Deer · Harvest · 14:22"/>
          <QueueItem label="Tag WT-2026-00044" sub="Roe Deer · Monitor · 14:38"/>
          <QueueItem label="Session checkpoint" sub="GPS trail · 14:42" last/>
        </div>
      </div>

      <div style={{ flex: 1 }}/>
      <TabBar active="home"/>
    </div>
  );
}

function QueueItem({ label, sub, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0',
      borderBottom: last ? 'none' : '1px solid #EAEAEA',
    }}>
      <div style={{ width: 6, height: 6, borderRadius: 3, background: '#E9C46A' }}/>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: '#1B1B1B' }}>{label}</div>
        <div style={{ fontSize: 11, color: '#6C757D' }}>{sub}</div>
      </div>
      <Icon.Clock size={14} stroke="#6C757D"/>
    </div>
  );
}

function ActionCard({ icon, label, sub, variant }) {
  const isPrimary = variant !== 'secondary';
  return (
    <div style={{
      padding: 14,
      background: isPrimary ? '#2D6A4F' : 'white',
      border: isPrimary ? 'none' : '1.5px solid #2D6A4F',
      borderRadius: 12,
      display: 'flex', flexDirection: 'column',
      gap: 24,
      minHeight: 100,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: isPrimary ? 'rgba(255,255,255,0.12)' : '#D8F3DC',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {icon}
      </div>
      <div>
        <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 16, fontWeight: 600, color: isPrimary ? 'white' : '#1B1B1B' }}>
          {label}
        </div>
        <div style={{ fontSize: 11, color: isPrimary ? 'rgba(255,255,255,0.7)' : '#6C757D', marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
}

function Stat({ val, lbl }) {
  return (
    <div>
      <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 22, fontWeight: 700, color: '#1B1B1B', letterSpacing: '-0.01em' }}>{val}</div>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#6C757D', letterSpacing: '0.06em', marginTop: 2 }}>{lbl}</div>
    </div>
  );
}

function ActivityRow({ icon, species, tagId, type, ago, who }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 0', borderBottom: '1px solid #EAEAEA',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10, background: '#D8F3DC',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontSize: 14, fontWeight: 600, color: '#1B1B1B' }}>{species}</span>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#6C757D' }}>{tagId}</span>
        </div>
        <div style={{ fontSize: 12, color: '#6C757D', marginTop: 2 }}>{type} · {ago}</div>
      </div>
      <div style={{
        width: 26, height: 26, borderRadius: 13, background: '#1B1B1B',
        color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 10, fontWeight: 600,
      }}>{who}</div>
    </div>
  );
}

function TabBar({ active }) {
  const tabs = [
    { id: 'home', label: 'Home', Ico: Icon.Home },
    { id: 'map', label: 'Map', Ico: Icon.Map },
    { id: 'tag', label: 'Tag', Ico: Icon.Tag, isAction: true },
    { id: 'sessions', label: 'Sessions', Ico: Icon.Briefcase },
    { id: 'alerts', label: 'Alerts', Ico: Icon.Alert, badge: 1 },
  ];
  return (
    <div style={{
      borderTop: '1px solid #EAEAEA', background: 'white',
      padding: '8px 12px 24px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          padding: '6px 0', position: 'relative',
        }}>
          {t.isAction ? (
            <div style={{
              width: 44, height: 44, borderRadius: 14, background: '#2D6A4F',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 12px rgba(45,106,79,0.3)',
              marginTop: -8,
            }}>
              <t.Ico size={22} stroke="white"/>
            </div>
          ) : (
            <div style={{ position: 'relative' }}>
              <t.Ico size={22} stroke={active === t.id ? '#2D6A4F' : '#6C757D'}/>
              {t.badge && (
                <div style={{ position: 'absolute', top: -2, right: -4, width: 7, height: 7, borderRadius: 4, background: '#C0392B' }}/>
              )}
            </div>
          )}
          <span style={{
            fontSize: 10, fontWeight: 500,
            color: active === t.id ? '#2D6A4F' : '#6C757D',
          }}>{t.label}</span>
        </div>
      ))}
    </div>
  );
}

window.HomePopulated = HomePopulated;
window.HomeOffline = HomeOffline;
window.TabBar = TabBar;