// components.jsx — shared visual components

const { useState, useEffect, useRef, useMemo } = React;

// Wavy underline / squiggle
function Squiggle({ color = "currentColor", className = "" }) {
  return (
    <svg className={`squiggle ${className}`} viewBox="0 0 240 12" preserveAspectRatio="none" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round">
      <path d="M 2 8 Q 12 1 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 122 8 T 142 8 T 162 8 T 182 8 T 202 8 T 222 8 T 240 8" />
    </svg>
  );
}

// Ticker tape (marquee)
function Ticker({ items = [] }) {
  const doubled = [...items, ...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {doubled.map((it, i) => (
          <span key={i} className="ticker-item">
            {it}
            <span className="star">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// Tiny star
function Star({ size = 14, color = "currentColor", style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill={color} style={style}>
      <path d="M10 0 L11.8 7.2 L20 9 L11.8 10.8 L10 20 L8.2 10.8 L0 9 L8.2 7.2 Z" />
    </svg>
  );
}

// Abstract stylized map — simple blocks + roads + water, drawn from data
function AbstractMap({ pins = [], activeId = null, onPinHover = () => {}, onPinLeave = () => {} }) {
  // viewport in unitless coords 0..1000 x 0..650
  // we use placeholders that loosely look mapish — water, big block regions, roads
  return (
    <svg className="map-svg" viewBox="0 0 1000 650" preserveAspectRatio="xMidYMid slice">
      {/* base ground */}
      <rect width="1000" height="650" fill="var(--bg-2)" />

      {/* water */}
      <rect x="0" y="430" width="1000" height="220" fill="var(--teal)" opacity="0.55" />
      <rect x="0" y="428" width="1000" height="3" fill="var(--ink-line)" />

      {/* grid blocks (simple rectangles) */}
      {Array.from({ length: 11 }).map((_, ci) => (
        <g key={ci}>
          {Array.from({ length: 5 }).map((__, ri) => {
            const x = ci * 90 + 30 + (ri % 2 ? 8 : 0);
            const y = ri * 75 + 30;
            const w = 70 + (ci % 3) * 6;
            const h = 50 + (ri % 2) * 8;
            const tones = ["#F3EADB", "#EBE0CE", "#F7EFE2", "#E5D9C4"];
            return (
              <rect key={ri} x={x} y={y} width={w} height={h} fill={tones[(ci + ri) % tones.length]} stroke="var(--ink-line)" strokeWidth="0.75" />
            );
          })}
        </g>
      ))}

      {/* main "road" - simple curve */}
      <path d="M 0 280 Q 250 240 500 270 T 1000 240" stroke="var(--ink-line)" strokeWidth="6" fill="none" strokeLinecap="round" />
      <path d="M 0 280 Q 250 240 500 270 T 1000 240" stroke="var(--bg)" strokeWidth="2" fill="none" strokeDasharray="2 6" strokeLinecap="round" />

      {/* secondary road */}
      <path d="M 200 0 Q 220 200 280 380 T 360 650" stroke="var(--ink-line)" strokeWidth="4" fill="none" />
      <path d="M 700 0 Q 660 220 720 410" stroke="var(--ink-line)" strokeWidth="3" fill="none" />

      {/* small park - circle */}
      <circle cx="520" cy="180" r="40" fill="var(--mint)" stroke="var(--ink-line)" strokeWidth="1" />
      <text x="520" y="184" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--ink-line)">PARK</text>

      {/* labels */}
      <text x="500" y="540" textAnchor="middle" fontFamily="Panchang, serif" fontSize="36" fill="var(--ink-line)" opacity="0.5" fontStyle="italic">tagus river</text>
      <text x="120" y="120" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="var(--ink-soft)" letterSpacing="2">CHIADO</text>
      <text x="820" y="110" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="var(--ink-soft)" letterSpacing="2">ALFAMA</text>
      <text x="60" y="300" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="var(--ink-soft)" letterSpacing="2">BELÉM</text>
      <text x="800" y="380" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="var(--ink-soft)" letterSpacing="2">CAIS DO SODRÉ</text>

      {/* draw route lines (dotted) between pins */}
      {pins.length > 1 && (
        <g>
          <path
            d={pins.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')}
            stroke="var(--ink-line)"
            strokeWidth="2.5"
            strokeDasharray="2 7"
            strokeLinecap="round"
            fill="none"
          />
        </g>
      )}
    </svg>
  );
}

// Calendar day pill
function DateChip({ label, date }) {
  return (
    <div style={{
      display: 'inline-flex',
      flexDirection: 'column',
      alignItems: 'center',
      padding: '8px 14px',
      border: '1.5px solid var(--ink-line)',
      borderRadius: '10px',
      background: 'var(--bg)',
      fontFamily: 'var(--font-mono)',
      fontSize: '10px',
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      minWidth: 60,
    }}>
      <span style={{ color: 'var(--ink-soft)' }}>{label}</span>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: '24px', fontWeight: 700, color: 'var(--ink-line)', letterSpacing: '-0.02em' }}>{date}</span>
    </div>
  );
}

Object.assign(window, { Squiggle, Ticker, Star, AbstractMap, DateChip });