/* Mobile · Field Map / zone selector */

function MobileMap() {
  const { t, lang } = useGA();
  const [sel, setSel] = React.useState('B');

  return (
    <MobileShell tab="map">
      <MobileHeader
        kicker="§ MAP · K-3 · KVARELI"
        en={t.fieldMap}
        ka={I18N.ka.fieldMap}
        ru={I18N.ru.fieldMap}
        right={<Pill color="amber" size="sm"><LiveDot color="amber" size={5} /> Frost</Pill>}
      />

      {/* full bleed map */}
      <div style={{ position: 'relative', height: 380, background: '#0E120F',
        borderBottom: '0.5px solid var(--line)' }}>
        <FullFieldMap selected={sel} onSelect={setSel} />
        {/* map controls */}
        <div style={{ position: 'absolute', top: 14, right: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <MapBtn>+</MapBtn>
          <MapBtn>−</MapBtn>
          <MapBtn>
            <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="2.5" stroke="var(--ink)" strokeWidth="1.2" fill="none"/><path d="M7 1v2M7 11v2M1 7h2M11 7h2" stroke="var(--ink)" strokeWidth="1.2"/></svg>
          </MapBtn>
        </div>
        {/* layer selector */}
        <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14,
          display: 'flex', gap: 6, padding: 4,
          background: 'rgba(10,10,11,0.7)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          border: '0.5px solid var(--line-2)', borderRadius: 8 }}>
          {['SOIL', 'CANOPY', 'UV', 'SAT'].map((l, i) => (
            <div key={l} style={{ flex: 1, textAlign: 'center', padding: '8px 0',
              fontFamily: 'var(--f-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.1em',
              background: i === 0 ? 'rgba(255,214,10,0.15)' : 'transparent',
              color: i === 0 ? 'var(--yellow)' : 'var(--ink-3)',
              borderRadius: 5,
            }}>{l}</div>
          ))}
        </div>
      </div>

      {/* zone list */}
      <div style={{ padding: '16px 18px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 12 }}>
          <div className="ga-kicker">Zones · {FARM.zones.length}</div>
          <div className="ga-kicker" style={{ color: 'var(--ink-2)' }}>Sort · health ↓</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {FARM.zones.map((z) => (
            <ZoneCard key={z.id} zone={z} selected={sel === z.id} onSelect={() => setSel(z.id)} />
          ))}
        </div>
      </div>
    </MobileShell>
  );
}

function MapBtn({ children }) {
  return (
    <button style={{
      width: 36, height: 36, borderRadius: 8,
      background: 'rgba(10,10,11,0.7)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      border: '0.5px solid var(--line-2)',
      color: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--f-mono)', fontSize: 16, fontWeight: 600,
    }}>{children}</button>
  );
}

function FullFieldMap({ selected, onSelect }) {
  // bigger version of the hero map, taps select zones
  const zones = [
    { id: 'A', name: 'NORTH', poly: 'M30,30 L260,40 L260,200 L60,230 L40,170 Z', color: '#43D67A', label: { x: 145, y: 130 } },
    { id: 'B', name: 'LOW RIDGE', poly: 'M270,42 L380,55 L380,210 L270,220 Z', color: '#FFA500', label: { x: 325, y: 130 }, warn: true },
    { id: 'C', name: 'SOUTH', poly: 'M52,236 L260,210 L260,360 L78,360 Z', color: '#FFD60A', label: { x: 165, y: 290 } },
    { id: 'D', name: 'EAST', poly: 'M270,225 L380,220 L380,360 L260,360 Z', color: '#FFA500', label: { x: 325, y: 290 }, warn: true },
  ];
  const nodes = [
    // A
    { x: 100, y: 80, c: '#43D67A', z: 'A' }, { x: 180, y: 110, c: '#43D67A', z: 'A' },
    { x: 145, y: 175, c: '#FFD60A', z: 'A' }, { x: 80, y: 195, c: '#43D67A', z: 'A' },
    // B - some alerts
    { x: 290, y: 75, c: '#FFA500', z: 'B', alert: true },
    { x: 350, y: 100, c: '#FFA500', z: 'B', alert: true },
    { x: 310, y: 145, c: '#FFA500', z: 'B', alert: true },
    { x: 360, y: 185, c: '#FFD60A', z: 'B' },
    { x: 285, y: 200, c: '#FFA500', z: 'B', alert: true },
    // C
    { x: 100, y: 270, c: '#43D67A', z: 'C' }, { x: 180, y: 270, c: '#43D67A', z: 'C' },
    { x: 145, y: 330, c: '#43D67A', z: 'C' },
    // D
    { x: 280, y: 260, c: '#FFD60A', z: 'D' }, { x: 350, y: 270, c: '#FFA500', z: 'D', alert: true },
    { x: 320, y: 320, c: '#43D67A', z: 'D' }, { x: 365, y: 340, c: '#FFD60A', z: 'D' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {/* topo lines */}
      <svg width="100%" height="100%" viewBox="0 0 402 380" style={{ position: 'absolute', inset: 0, opacity: 0.2 }}>
        {[40, 90, 140, 190, 240, 290, 340].map((y, i) => (
          <path key={i} d={`M0,${y + Math.sin(i)*10} Q100,${y - 12} 200,${y - 4} T402,${y + 6}`}
            stroke={i === 3 ? '#FFA500' : '#7a8a82'} strokeWidth="0.5" fill="none"/>
        ))}
      </svg>
      {/* zones */}
      <svg width="100%" height="100%" viewBox="0 0 402 380" style={{ position: 'absolute', inset: 0 }}>
        {zones.map((z) => (
          <g key={z.id} onClick={() => onSelect(z.id)} style={{ cursor: 'pointer' }}>
            <path d={z.poly} fill={`${z.color}1A`}
              stroke={selected === z.id ? z.color : `${z.color}55`}
              strokeWidth={selected === z.id ? 1.5 : 0.5}
              strokeDasharray={selected === z.id ? 'none' : '3 3'} />
          </g>
        ))}
      </svg>
      {/* nodes */}
      {nodes.map((n, i) => (
        <div key={i} style={{ position: 'absolute', left: n.x, top: n.y,
          transform: 'translate(-50%,-50%)', pointerEvents: 'none' }}>
          {n.alert && (
            <span style={{ position: 'absolute', inset: -7, borderRadius: '50%',
              background: n.c, opacity: 0.3, animation: 'ga-pulse 1.6s ease-in-out infinite' }} />
          )}
          <span style={{ display: 'block', width: 9, height: 9, borderRadius: '50%',
            background: n.c, boxShadow: `0 0 8px ${n.c}` }} />
        </div>
      ))}
      {/* zone labels */}
      {zones.map((z) => (
        <div key={z.id} style={{
          position: 'absolute', left: z.label.x, top: z.label.y, transform: 'translate(-50%, -50%)',
          fontFamily: 'var(--f-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.1em',
          color: z.warn ? z.color : 'var(--ink)',
          background: 'rgba(10,10,11,0.7)', padding: '3px 8px', borderRadius: 4,
          border: `0.5px solid ${z.color}55`,
        }}>
          {z.id} · {z.name}
        </div>
      ))}
      {/* scan line */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        <div style={{ width: '100%', height: '15%',
          background: 'linear-gradient(to bottom, transparent, rgba(255,214,10,0.12), transparent)',
          animation: 'ga-scan 6s linear infinite' }} />
      </div>
      {/* corner readout */}
      <div className="ga-kicker" style={{ position: 'absolute', top: 14, left: 14,
        fontSize: 9, color: 'var(--ink-3)', background: 'rgba(10,10,11,0.7)',
        padding: '4px 8px', borderRadius: 4, border: '0.5px solid var(--line-2)' }}>
        N ↑ · ZOOM 1:120
      </div>
    </div>
  );
}

function ZoneCard({ zone, selected, onSelect }) {
  const statusColor = zone.status === 'warn' ? 'amber' : 'green';
  return (
    <div onClick={onSelect} style={{
      padding: '14px 16px',
      background: selected ? 'var(--bg-3)' : 'var(--bg-2)',
      border: `1px solid ${selected ? 'rgba(255,214,10,0.4)' : 'var(--line-2)'}`,
      borderRadius: 10,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 8,
        background: zone.status === 'warn'
          ? 'linear-gradient(135deg, #2A1F0C, #1A1207)'
          : 'linear-gradient(135deg, #0E2218, #07140E)',
        border: `1px solid ${zone.status === 'warn' ? '#FFA50055' : '#43D67A55'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--f-mono)', fontSize: 18, fontWeight: 700,
        color: zone.status === 'warn' ? 'var(--amber)' : 'var(--green)',
      }}>{zone.id}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="ga-disp" style={{ fontWeight: 600, fontSize: 14 }}>{zone.name}</span>
          <span className="ga-kicker">{zone.nodes} nodes</span>
        </div>
        <div style={{ marginTop: 5, display: 'flex', gap: 14, alignItems: 'baseline' }}>
          <span className="ga-mono ga-tnum" style={{ fontSize: 11, color: 'var(--ink-2)' }}>
            <span style={{ color: 'var(--ink-3)' }}>soil </span>{zone.soil}<span style={{ color: 'var(--ink-3)' }}>%</span>
          </span>
          <span className="ga-mono ga-tnum" style={{ fontSize: 11, color: 'var(--ink-2)' }}>
            <span style={{ color: 'var(--ink-3)' }}>t </span>{zone.temp}<span style={{ color: 'var(--ink-3)' }}>°C</span>
          </span>
          <span className="ga-mono ga-tnum" style={{ fontSize: 11, color: 'var(--ink-2)' }}>
            <span style={{ color: 'var(--ink-3)' }}>uv </span>{zone.uv}
          </span>
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="ga-mono" style={{ fontSize: 22, fontWeight: 600,
          color: zone.status === 'warn' ? 'var(--amber)' : 'var(--ink)', letterSpacing: '-0.02em' }}>
          {zone.health}
        </div>
        <div className="ga-kicker" style={{ fontSize: 8.5 }}>health</div>
      </div>
    </div>
  );
}

Object.assign(window, { MobileMap });