// PerimeterQ — stylized "live safety map" mock UI.
// Pure CSS/simple-line SVG: an abstract street grid, a geofence ring,
// color-coded event pins, a floating event card, and a mono event rail.
// Theme-aware (light paper / dark ink). Not a real map — a credible product mock.

function MapMock({ dark = false, accent = '#cf4b2c', compact = false }) {
  const surface = dark ? '#0b0f16' : '#f7f5f0';
  const surfaceTop = dark ? '#0e131c' : '#fbfaf6';
  const ink = dark ? '#e9ecf2' : '#0d1117';
  const slate = dark ? '#9aa3b2' : '#4a4d55';
  const faint = dark ? 'rgba(255,255,255,0.07)' : 'rgba(13,17,23,0.07)';
  const road = dark ? 'rgba(255,255,255,0.12)' : 'rgba(13,17,23,0.13)';
  const panel = dark ? 'rgba(20,26,36,0.92)' : 'rgba(255,255,255,0.94)';
  const panelBorder = dark ? 'rgba(255,255,255,0.10)' : 'rgba(13,17,23,0.10)';

  // event pins, in % coords on the map face
  const pins = [
    { x: 38, y: 34, kind: 'live', label: 'Road closure · Hlavná' },
    { x: 64, y: 52, kind: 'live', label: 'Severe weather alert' },
    { x: 26, y: 66, kind: 'resolved', label: 'Cleared · 12m ago' },
    { x: 78, y: 30, kind: 'resolved', label: 'Power restored' },
    { x: 54, y: 74, kind: 'report', label: 'Community report' },
  ];

  const events = [
    { t: '14:02', tag: 'ALERT', text: 'Severe weather — hail expected 14:30', live: true },
    { t: '13:51', tag: 'NEWS', text: 'Road closure on Hlavná ulica', live: true },
    { t: '13:30', tag: 'CRIME', text: 'Vehicle break-in reported · Staré Mesto', live: false },
    { t: '13:12', tag: 'CIVIC', text: 'Scheduled outage cleared', live: false },
  ];

  return (
    <div style={{
      position: 'relative',
      borderRadius: 10,
      overflow: 'hidden',
      border: `1px solid ${panelBorder}`,
      background: surface,
      boxShadow: dark
        ? '0 30px 80px -40px rgba(0,0,0,0.8)'
        : '0 30px 80px -44px rgba(13,17,23,0.45)',
      fontFamily: '"Space Grotesk", system-ui, sans-serif',
      display: 'grid',
      gridTemplateColumns: compact ? '1fr' : '1fr 214px',
      minHeight: compact ? 320 : 420,
    }}>
      {/* ── Map face ─────────────────────────────────────────── */}
      <div style={{ position: 'relative', overflow: 'hidden', background: `radial-gradient(120% 100% at 30% 0%, ${surfaceTop}, ${surface})` }}>
        {/* street grid */}
        <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <g stroke={faint} strokeWidth="1">
            {[40, 80, 120, 160, 200, 240, 280, 320, 360].map((y) => (
              <line key={'h' + y} x1="0" y1={y} x2="400" y2={y} />
            ))}
            {[40, 80, 120, 160, 200, 240, 280, 320, 360].map((x) => (
              <line key={'v' + x} x1={x} y1="0" x2={x} y2="400" />
            ))}
          </g>
          {/* main roads */}
          <g stroke={road} strokeWidth="3" fill="none" strokeLinecap="round">
            <line x1="-10" y1="150" x2="410" y2="190" />
            <line x1="120" y1="-10" x2="170" y2="410" />
            <path d="M -10 300 Q 160 250 410 320" />
          </g>
          {/* river */}
          <path d="M 60 -10 Q 120 140 90 240 Q 70 320 150 410" fill="none" stroke={accent} strokeWidth="6" strokeOpacity="0.16" strokeLinecap="round" />
        </svg>

        {/* geofence ring */}
        <div style={{
          position: 'absolute', left: '38%', top: '34%', width: 200, height: 200,
          transform: 'translate(-50%,-50%)', borderRadius: '50%',
          border: `1.5px dashed ${accent}`, background: `radial-gradient(circle, ${accent}14, transparent 70%)`,
        }} />
        <div style={{
          position: 'absolute', left: '38%', top: 'calc(34% - 116px)', transform: 'translateX(-50%)',
          fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: accent, background: panel, border: `1px solid ${panelBorder}`, padding: '3px 8px', borderRadius: 999, whiteSpace: 'nowrap',
        }}>⌖ Geofence · Home</div>

        {/* pins */}
        {pins.map((p, i) => {
          const isLive = p.kind === 'live';
          const isReport = p.kind === 'report';
          const color = isLive ? accent : isReport ? slate : (dark ? 'rgba(233,236,242,0.55)' : 'rgba(13,17,23,0.5)');
          return (
            <div key={i} style={{ position: 'absolute', left: p.x + '%', top: p.y + '%', transform: 'translate(-50%,-50%)' }}>
              {isLive && (
                <span style={{
                  position: 'absolute', left: '50%', top: '50%', width: 30, height: 30,
                  transform: 'translate(-50%,-50%)', borderRadius: '50%', background: color,
                  animation: `pqPulse 2.4s ease-out infinite`, animationDelay: `${i * 0.5}s`,
                }} />
              )}
              {isReport ? (
                <span style={{ position: 'relative', display: 'block', width: 11, height: 11, background: color, transform: 'rotate(45deg)', borderRadius: 2, border: `2px solid ${surface}` }} />
              ) : (
                <span style={{ position: 'relative', display: 'block', width: 12, height: 12, borderRadius: '50%', background: color, border: `2px solid ${surface}`, boxShadow: isLive ? `0 0 0 1px ${color}` : 'none' }} />
              )}
            </div>
          );
        })}

        {/* floating event card */}
        <div style={{
          position: 'absolute', left: '50%', top: '63%', transform: 'translate(-50%,-50%)',
          background: panel, border: `1px solid ${panelBorder}`, borderRadius: 8, padding: '10px 12px',
          backdropFilter: 'blur(6px)', width: 162,
          boxShadow: '0 12px 30px -14px rgba(0,0,0,0.45)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 9, letterSpacing: '0.12em', color: accent }}>LIVE · 14:02</span>
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: ink, lineHeight: 1.35 }}>Severe weather alert</div>
          <div style={{ fontSize: 11, color: slate, marginTop: 2 }}>Hail expected · 1.2 km away</div>
        </div>

        {/* scale + attribution chrome */}
        <div style={{ position: 'absolute', left: 14, bottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 36, height: 3, background: ink, opacity: 0.5, borderRadius: 2 }} />
          <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 9, color: slate }}>500 m</span>
        </div>
      </div>

      {/* ── Event rail ───────────────────────────────────────── */}
      {!compact && (
        <div style={{ borderLeft: `1px solid ${panelBorder}`, background: dark ? 'rgba(10,14,20,0.6)' : 'rgba(255,255,255,0.55)', padding: '14px 14px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: slate }}>Live feed</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5, color: accent }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, animation: 'pqBlink 1.6s steps(2) infinite' }} /> 4 active
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {events.map((e, i) => (
              <div key={i} style={{
                padding: '9px 10px', borderRadius: 7,
                background: e.live ? (dark ? 'rgba(40,72,214,0.12)' : 'rgba(40,72,214,0.06)') : (dark ? 'rgba(255,255,255,0.03)' : 'rgba(13,17,23,0.025)'),
                border: `1px solid ${e.live ? accent + '33' : panelBorder}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 8.5, letterSpacing: '0.1em', color: e.live ? accent : slate, fontWeight: 500 }}>{e.tag}</span>
                  <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 8.5, color: slate }}>{e.t}</span>
                </div>
                <div style={{ fontSize: 11.5, color: ink, lineHeight: 1.35 }}>{e.text}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 'auto', paddingTop: 12, fontFamily: '"JetBrains Mono", monospace', fontSize: 8.5, color: slate, letterSpacing: '0.06em' }}>
            ◢ deduplicated · geocoded · PostGIS
          </div>
        </div>
      )}

      <style>{`
        @keyframes pqPulse { 0% { opacity: 0.5; transform: translate(-50%,-50%) scale(0.4);} 70%{opacity:0;transform:translate(-50%,-50%) scale(1.6);} 100%{opacity:0;} }
        @keyframes pqBlink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }
      `}</style>
    </div>
  );
}

window.MapMock = MapMock;