/* WildTrack — Portal Screen 3B — Zone Management */

function ZoneManagement() {
  const zones = [
    { name: 'Lake District Zone A', type: 'Operational', members: 6, sessions: 2, active: true },
    { name: 'Cairngorms Zone 3', type: 'Operational', members: 4, sessions: 1 },
    { name: 'Exmoor East', type: 'Operational', members: 3, sessions: 0 },
    { name: 'Bowland Exclusion Area', type: 'Exclusion', members: 0, sessions: 0, exclusion: true },
    { name: 'Dartmoor South', type: 'Operational', members: 2, sessions: 0 },
  ];
  return (
    <div style={{ display: 'flex', minHeight: 880, background: 'white' }}>
      <Sidebar active="zones"/>
      <div style={{ display: 'flex', flex: 1, minWidth: 0 }}>
        {/* Zone list panel */}
        <aside style={{ width: 360, borderRight: '1px solid #EAEAEA', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
          <div style={{ padding: '20px 20px 16px', borderBottom: '1px solid #EAEAEA' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h2 className="font-display" style={{ fontSize: 22, fontWeight: 700, color: '#1B1B1B', margin: 0, letterSpacing: '-0.01em' }}>
                Zones
              </h2>
              <button className="rh-btn rh-btn-primary" style={{ padding: '8px 14px', fontSize: 13 }}>
                <Icon.Plus size={14} stroke="white"/> New Zone
              </button>
            </div>
            <div style={{
              padding: '8px 12px', borderRadius: 8, background: '#F5F5F5',
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 13,
            }}>
              <Icon.Search size={14} stroke="#6C757D"/>
              <span style={{ color: '#6C757D' }}>Search zones...</span>
            </div>
          </div>
          <div style={{ flex: 1, overflowY: 'auto' }}>
            {zones.map(z => (
              <div key={z.name} style={{
                padding: '14px 20px',
                borderLeft: '3px solid ' + (z.active ? '#2D6A4F' : 'transparent'),
                background: z.active ? '#F4FBF7' : 'white',
                borderBottom: '1px solid #EAEAEA',
                cursor: 'pointer',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                  <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 15, fontWeight: 600, color: '#1B1B1B' }}>
                    {z.name}
                  </div>
                  <span className={z.exclusion ? 'rh-badge rh-badge-emergency' : 'rh-badge rh-badge-active'} style={{ fontSize: 10, padding: '2px 8px' }}>
                    {z.type}
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 12, fontSize: 12, color: '#6C757D' }}>
                  <span><Icon.Users size={11} stroke="#6C757D"/> {z.members} members</span>
                  {!z.exclusion && <span>· {z.sessions} session{z.sessions !== 1 ? 's' : ''}</span>}
                  {z.exclusion && <span>· No access</span>}
                </div>
              </div>
            ))}
          </div>
        </aside>

        {/* Detail */}
        <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
          {/* Zone header */}
          <div style={{ padding: '20px 32px', borderBottom: '1px solid #EAEAEA', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
                <h1 className="font-display" style={{ fontSize: 28, fontWeight: 700, color: '#1B1B1B', margin: 0, letterSpacing: '-0.01em' }}>
                  Lake District Zone A
                </h1>
                <span className="rh-badge rh-badge-active" style={{ fontSize: 11 }}>Operational</span>
              </div>
              <div style={{ fontSize: 13, color: '#6C757D', display: 'flex', gap: 16 }}>
                <span>Created 12 Mar 2026</span>
                <span>· 6 members</span>
                <span>· 2 active sessions</span>
                <span>· 48.3 km² covered</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="rh-btn rh-btn-secondary" style={{ fontSize: 13, padding: '8px 14px' }}>
                <Icon.Edit size={14} stroke="#2D6A4F"/> Edit
              </button>
              <button className="rh-btn rh-btn-primary" style={{ fontSize: 13, padding: '8px 14px' }}>
                <Icon.Plus size={14} stroke="white"/> Assign User
              </button>
            </div>
          </div>

          {/* Map */}
          <div style={{ borderBottom: '1px solid #EAEAEA' }}>
            <div style={{ position: 'relative', height: 320 }}>
              <TopoMap width={800} height={320} variant="lake"
                tags={[{ x: 0.3, y: 0.4 }, { x: 0.5, y: 0.55 }, { x: 0.65, y: 0.35 }, { x: 0.42, y: 0.7 }]}
                others={[{ x: 0.6, y: 0.5, initials: 'TH' }, { x: 0.35, y: 0.6, initials: 'JM' }]}
                userPos={[0.5, 0.5]}
                showUser={false}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
              />
              {/* Legend */}
              <div style={{
                position: 'absolute', bottom: 16, left: 16,
                background: 'rgba(15,31,24,0.85)', backdropFilter: 'blur(8px)',
                border: '1px solid rgba(82,183,136,0.25)',
                borderRadius: 10, padding: 14, color: 'white',
              }}>
                <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: '#52B788', textTransform: 'uppercase', marginBottom: 10 }}>
                  Legend
                </div>
                {[
                  ['#52B788', 'Zone boundary'],
                  ['#2D6A4F', 'Active tag (4)'],
                  ['#E9C46A', 'Member online (2)'],
                ].map(([c, l]) => (
                  <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, padding: '2px 0' }}>
                    <div style={{ width: 10, height: 10, borderRadius: 5, background: c }}/>
                    {l}
                  </div>
                ))}
              </div>
              {/* Drawing tools */}
              <div style={{
                position: 'absolute', top: 16, right: 16,
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                {[<Icon.Plus size={16} stroke="white"/>, <Icon.Edit size={16} stroke="white"/>, <Icon.Layers size={16} stroke="white"/>].map((ico, i) => (
                  <div key={i} style={{
                    width: 36, height: 36, borderRadius: 8,
                    background: 'rgba(15,31,24,0.85)', backdropFilter: 'blur(8px)',
                    border: '1px solid rgba(82,183,136,0.25)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{ico}</div>
                ))}
              </div>
            </div>
          </div>

          {/* Tabs */}
          <div style={{ borderBottom: '1px solid #EAEAEA', padding: '0 32px', display: 'flex', gap: 24 }}>
            {[
              ['Members', true, 6],
              ['Sessions', false, 2],
              ['Tags', false, 48],
              ['Settings', false],
            ].map(([lbl, active, count]) => (
              <div key={lbl} style={{
                padding: '14px 0',
                borderBottom: '2px solid ' + (active ? '#2D6A4F' : 'transparent'),
                fontSize: 14, fontWeight: 500,
                color: active ? '#1B1B1B' : '#6C757D',
                cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                {lbl}
                {count !== undefined && (
                  <span style={{
                    fontSize: 11, padding: '1px 8px', borderRadius: 999,
                    background: active ? '#D8F3DC' : '#F5F5F5',
                    color: active ? '#2D6A4F' : '#6C757D',
                    fontWeight: 500,
                  }}>{count}</span>
                )}
              </div>
            ))}
          </div>

          {/* Members table */}
          <div style={{ padding: 32 }}>
            <MembersTable/>
          </div>
        </div>
      </div>
    </div>
  );
}

function MembersTable() {
  const members = [
    { name: 'J. MacAllister', initials: 'JM', role: 'Field Operative', online: true, lastSeen: 'Active now', cert: 'WT-OP-1042' },
    { name: 'T. Hargreaves', initials: 'TH', role: 'Field Operative', online: true, lastSeen: 'Active now', cert: 'WT-OP-1087' },
    { name: 'S. Munro', initials: 'SM', role: 'Field Operative', online: false, lastSeen: '2h ago', cert: 'WT-OP-1101' },
    { name: 'D. Campbell', initials: 'DC', role: 'Zone Manager', online: true, lastSeen: 'Active now', cert: 'WT-MGR-0042' },
    { name: 'A. Robertson', initials: 'AR', role: 'Field Operative', online: false, lastSeen: '1d ago', cert: 'WT-OP-1102' },
    { name: 'L. Mackenzie', initials: 'LM', role: 'Processor', online: false, lastSeen: '3d ago', cert: 'WT-PR-0087' },
  ];
  return (
    <div style={{ border: '1px solid #E0E0E0', borderRadius: 12, overflow: 'hidden' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: '#2D6A4F', color: 'white' }}>
            {['Name', 'Role', 'Cert. ID', 'Status', 'Last seen', ''].map(h => (
              <th key={h} style={{ textAlign: 'left', padding: '12px 16px', fontSize: 12, fontWeight: 500, letterSpacing: '0.04em' }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {members.map((m, i) => (
            <tr key={m.name} style={{
              background: i % 2 === 0 ? 'white' : '#FAFAFA',
              borderBottom: i < members.length - 1 ? '1px solid #EAEAEA' : 'none',
            }}>
              <td style={{ padding: '12px 16px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 16,
                    background: '#1B1B1B', color: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 600,
                  }}>{m.initials}</div>
                  <span style={{ fontSize: 14, color: '#1B1B1B', fontWeight: 500 }}>{m.name}</span>
                </div>
              </td>
              <td style={{ padding: '12px 16px' }}>
                <span className={m.role === 'Zone Manager' ? 'rh-badge rh-badge-processing' : 'rh-badge rh-badge-active'} style={{ fontSize: 11 }}>
                  {m.role}
                </span>
              </td>
              <td style={{ padding: '12px 16px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#6C757D' }}>{m.cert}</td>
              <td style={{ padding: '12px 16px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                  <div style={{ width: 8, height: 8, borderRadius: 4, background: m.online ? '#52B788' : '#D0D0D0' }}/>
                  {m.online ? 'Online' : 'Offline'}
                </div>
              </td>
              <td style={{ padding: '12px 16px', fontSize: 13, color: '#6C757D' }}>{m.lastSeen}</td>
              <td style={{ padding: '12px 16px', textAlign: 'right' }}>
                <Icon.ChevronRight size={16} stroke="#6C757D"/>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.ZoneManagement = ZoneManagement;