function GeoScreen() {
  const [layer, setLayer] = useState("procurement");
  const [selected, setSelected] = useState(null);
  const [metric, setMetric] = useState("value");

  const values = Object.fromEntries(STATES.map(s => [s.code, metric === "value" ? s.value : s.tenders]));

  const layers = [
    { id: "procurement", name: "GeM Procurement", icon: "trending", count: "29 states" },
    { id: "revenue", name: "Revenue Collection", icon: "scale", count: "29 states" },
    { id: "scheme", name: "Scheme Beneficiaries", icon: "users", count: "184.2M" },
    { id: "iot", name: "IoT Devices", icon: "cpu", count: "48,242 pts" },
    { id: "psu", name: "PSU Facilities", icon: "tent", count: "218 locations" },
    { id: "cci", name: "Crop Insurance Claims", icon: "sun", count: "24.8K" },
  ];

  return (
    <div style={{ display: 'flex', height: 'calc(100vh - 56px)' }}>
      {/* Left layers */}
      <div style={{ width: 240, borderRight: '1px solid var(--border)', background: 'var(--panel)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontWeight: 600, fontSize: 13 }}>Layers</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 2 }}>Data on the map</div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 8 }}>
          {layers.map(l => (
            <div key={l.id} onClick={() => setLayer(l.id)}
              style={{ padding: 10, borderRadius: 8, marginBottom: 4, cursor: 'pointer', background: layer === l.id ? 'var(--primary-tint)' : 'transparent', border: '1px solid ' + (layer === l.id ? 'color-mix(in oklch, var(--primary), transparent 70%)' : 'transparent') }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                <input type="checkbox" defaultChecked={l.id === "procurement"} style={{ accentColor: 'var(--primary)' }}/>
                <Icon name={l.icon} size={13} style={{ color: layer === l.id ? 'var(--primary)' : 'var(--ink-3)' }}/>
                <span style={{ fontSize: 12.5, fontWeight: layer === l.id ? 600 : 500, color: layer === l.id ? 'var(--primary)' : 'var(--ink)' }}>{l.name}</span>
              </div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', paddingLeft: 24 }}>{l.count}</div>
            </div>
          ))}

          <div style={{ marginTop: 14, padding: 10, background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 8 }}>
            <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 8 }}>Map Style</div>
            {["OpenStreetMap", "Satellite", "Terrain", "Political"].map((s, i) => (
              <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, padding: '4px 0' }}>
                <input type="radio" name="mapstyle" defaultChecked={i === 0} style={{ accentColor: 'var(--primary)' }}/>{s}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Main map */}
      <div style={{ flex: 1, position: 'relative', background: 'var(--panel-2)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 44, background: 'var(--panel)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px' }}>
          <div style={{ display: 'flex', gap: 4, padding: 3, background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 6 }}>
            {[{ id: "value", label: "Procurement Value" }, { id: "tenders", label: "Tender Count" }].map(m => (
              <button key={m.id} onClick={() => setMetric(m.id)} style={{ padding: '4px 10px', borderRadius: 4, border: 'none', background: metric === m.id ? 'var(--panel)' : 'transparent', color: metric === m.id ? 'var(--ink)' : 'var(--ink-3)', fontSize: 11.5, fontWeight: metric === m.id ? 600 : 500, cursor: 'pointer', fontFamily: 'inherit' }}>{m.label}</button>
            ))}
          </div>
          <span className="tag">Q2 FY26</span>
          <span className="spacer"/>
          <button className="btn sm"><Icon name="filter" size={11}/>Filter</button>
          <button className="btn sm"><Icon name="download" size={11}/>Export</button>
        </div>

        <div style={{ flex: 1, display: 'grid', placeItems: 'center', padding: 20, position: 'relative', overflow: 'auto' }}>
          <div style={{ width: '100%', maxWidth: 640 }}>
            <IndiaMap values={values} h={620} onClick={setSelected} selected={selected}/>
          </div>

          {/* Legend */}
          <div style={{ position: 'absolute', bottom: 20, left: 20, background: 'var(--panel)', border: '1px solid var(--border-strong)', borderRadius: 10, padding: 12, boxShadow: 'var(--shadow-md)', minWidth: 200 }}>
            <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 8 }}>Procurement (₹ Cr)</div>
            <div style={{ height: 8, borderRadius: 4, background: 'linear-gradient(90deg, oklch(0.94 0.03 258), oklch(0.38 0.16 258))', marginBottom: 6 }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-3)', fontFamily: 'JetBrains Mono' }}>
              <span>₹80</span><span>₹200</span><span>₹340+</span>
            </div>
            <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)', fontSize: 10.5, color: 'var(--ink-3)' }}>
              <div>Total: <b className="mono" style={{ color: 'var(--ink)' }}>₹2,568 Cr</b> across <b className="mono" style={{ color: 'var(--ink)' }}>29 states</b></div>
            </div>
          </div>

          {/* Zoom controls */}
          <div style={{ position: 'absolute', top: 76, right: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
            <button className="icon-btn" style={{ background: 'var(--panel)', border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-sm)' }}><Icon name="plus" size={14}/></button>
            <button className="icon-btn" style={{ background: 'var(--panel)', border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-sm)' }}><Icon name="close" size={14}/></button>
            <button className="icon-btn" style={{ background: 'var(--panel)', border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-sm)' }} title="Reset view"><Icon name="refresh" size={14}/></button>
          </div>
        </div>
      </div>

      {/* Right details */}
      <div style={{ width: 320, borderLeft: '1px solid var(--border)', background: 'var(--panel)', overflowY: 'auto' }}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>
            {selected ? "State detail" : "Ranked list"}
          </div>
          <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }}>{selected ? INDIA_STATE_NAMES[selected] : "Top performers"}</div>
        </div>
        {selected ? (
          <SelectedStatePanel code={selected} onClose={() => setSelected(null)}/>
        ) : (
          <div>
            {STATES.map((s, i) => (
              <div key={s.code} onClick={() => setSelected(s.code)}
                style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
              >
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', width: 20 }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{s.tenders} tenders</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>₹{s.value.toFixed(0)}</div>
                  <div style={{ fontSize: 10, color: s.delta >= 0 ? 'var(--ok)' : 'var(--danger)', fontWeight: 600 }}>{fmtPct(s.delta)}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function SelectedStatePanel({ code, onClose }) {
  const s = STATES.find(x => x.code === code) || { value: 0, tenders: 0, delta: 0, name: INDIA_STATE_NAMES[code] };
  return (
    <div style={{ padding: 14 }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        <button className="btn sm" onClick={onClose}><Icon name="chevronLeft" size={11}/>Back</button>
        <button className="btn sm"><Icon name="external" size={11}/>Drill down</button>
      </div>
      <div className="card kpi" style={{ marginBottom: 10 }}>
        <div className="label">Procurement Value · Q2</div>
        <div className="value">₹{s.value.toFixed(1)}<span className="unit">Cr</span></div>
        <div className={`delta ${s.delta >= 0 ? 'up' : 'down'}`}><Icon name={s.delta >= 0 ? 'trending' : 'trendingDown'} size={13}/>{fmtPct(s.delta)} <span className="vs">YoY</span></div>
        <div className="foot"><Sparkline data={[42,48,45,52,58,55,62,68,72,68,70,74]} w={280} h={40} stroke="var(--primary)" fill="var(--primary)" area/></div>
      </div>

      <div className="card">
        <div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Top districts</h3></div>
        <div className="card-body" style={{ padding: 10 }}>
          <BarChart data={[86, 62, 48, 42, 34]} labels={["Mumbai", "Pune", "Nagpur", "Nashik", "Aurangabad"]} horizontal h={140} w={280} format={v => `₹${v}Cr`} color="var(--primary)"/>
        </div>
      </div>

      <div className="card" style={{ marginTop: 10 }}>
        <div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Top vendors</h3></div>
        <div className="card-body" style={{ padding: 0 }}>
          {["Bharat Electronics Ltd", "L&T Construction", "Tata Consultancy Svcs", "Wipro Ltd"].map((v, i) => (
            <div key={v} style={{ padding: '8px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: i < 3 ? '1px solid var(--border)' : 0 }}>
              <span style={{ fontSize: 12 }}>{v}</span>
              <span className="mono" style={{ fontSize: 12, fontWeight: 600, color: 'var(--primary)' }}>₹{(28 - i * 5).toFixed(1)}Cr</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.GeoScreen = GeoScreen;