// Shared HUD components — corner brackets, wireframe placeholder, coordinates, etc.

const HudCorners = ({ color }) => (
  <svg className="hud-corners" viewBox="0 0 100 100" preserveAspectRatio="none"
       style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
    {/* TL */}
    <path d="M0,14 L0,0 L14,0" stroke={color || 'currentColor'} strokeWidth="1" fill="none" vectorEffect="non-scaling-stroke" />
    {/* TR */}
    <path d="M86,0 L100,0 L100,14" stroke={color || 'currentColor'} strokeWidth="1" fill="none" vectorEffect="non-scaling-stroke" />
    {/* BL */}
    <path d="M0,86 L0,100 L14,100" stroke={color || 'currentColor'} strokeWidth="1" fill="none" vectorEffect="non-scaling-stroke" />
    {/* BR */}
    <path d="M86,100 L100,100 L100,86" stroke={color || 'currentColor'} strokeWidth="1" fill="none" vectorEffect="non-scaling-stroke" />
  </svg>
);

const HudTag = ({ children, dot = true }) => (
  <span className="hud-tag">
    {dot && <span className="dot"></span>}
    {children}
  </span>
);

const HudReadout = ({ label, value, mono = true }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--text-dim)', textTransform: 'uppercase' }}>{label}</div>
    <div className={mono ? 'mono' : ''} style={{ fontSize: 14, color: 'var(--accent)', fontWeight: 500 }}>{value}</div>
  </div>
);

// A wireframe "3D world" placeholder — isometric grid that suggests a generated city scene
const WireframeScene = ({ label = 'SCENE_PREVIEW', variant = 'city', height = 280, scanning = true }) => {
  const accent = 'var(--accent)';
  const dim = 'var(--text-dim)';

  // Variants pick different "marker" silhouettes
  const markers = {
    city: [
      { x: 20, y: 55, w: 12, h: 18, label: 'BLDG_01' },
      { x: 38, y: 50, w: 10, h: 24, label: 'BLDG_02' },
      { x: 56, y: 58, w: 14, h: 16, label: 'BLDG_03' },
      { x: 76, y: 53, w: 8, h: 20, label: 'BLDG_04' },
    ],
    road: [
      { x: 30, y: 60, w: 14, h: 8, label: 'VEH_01' },
      { x: 58, y: 64, w: 12, h: 8, label: 'TREE_DOWN' },
    ],
    harbor: [
      { x: 20, y: 55, w: 22, h: 10, label: 'VESSEL_01' },
      { x: 56, y: 62, w: 18, h: 8, label: 'VESSEL_02' },
    ],
    trash: [
      { x: 28, y: 64, w: 6, h: 5, label: 'OBJ_A' },
      { x: 42, y: 67, w: 8, h: 4, label: 'OBJ_B' },
      { x: 62, y: 65, w: 5, h: 5, label: 'OBJ_C' },
      { x: 74, y: 68, w: 7, h: 4, label: 'OBJ_D' },
    ],
  }[variant] || [];

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      height,
      background: 'linear-gradient(180deg, oklch(18% 0.014 240), oklch(14% 0.012 240))',
      border: '1px solid var(--border)',
      overflow: 'hidden',
    }}>
      <HudCorners color="var(--accent)" />
      {/* Iso ground grid */}
      <svg viewBox="0 0 100 80" preserveAspectRatio="none"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id={`fade-${variant}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={dim} stopOpacity="0.4" />
            <stop offset="1" stopColor={accent} stopOpacity="0.7" />
          </linearGradient>
        </defs>
        {/* Horizon */}
        <line x1="0" y1="40" x2="100" y2="40" stroke="var(--border)" strokeWidth="0.2" />
        {/* Perspective horizontal lines */}
        {[44, 50, 58, 68, 80].map((y, i) => (
          <line key={i} x1="0" y1={y} x2="100" y2={y} stroke={`url(#fade-${variant})`} strokeWidth="0.15" opacity={0.5 + i * 0.1} />
        ))}
        {/* Perspective vertical converging lines */}
        {Array.from({ length: 11 }).map((_, i) => {
          const x = i * 10;
          return <line key={i} x1={x} y1="80" x2="50" y2="40" stroke={`url(#fade-${variant})`} strokeWidth="0.1" opacity="0.5" />;
        })}
        {/* Markers (objects in scene) */}
        {markers.map((m, i) => (
          <g key={i}>
            <rect x={m.x} y={m.y - m.h * 0.3} width={m.w} height={m.h * 0.3}
                  fill="none" stroke={accent} strokeWidth="0.2" />
            <rect x={m.x} y={m.y} width={m.w} height={m.h * 0.7 * 0.4}
                  fill={accent} fillOpacity="0.08" stroke={accent} strokeWidth="0.2" />
          </g>
        ))}
      </svg>

      {/* Scan line */}
      {scanning && (
        <div style={{
          position: 'absolute', left: 0, right: 0, height: 2,
          background: `linear-gradient(90deg, transparent, var(--accent), transparent)`,
          boxShadow: `0 0 12px var(--accent-glow)`,
          opacity: 0.6,
          animation: 'scanY 6s linear infinite',
        }} />
      )}

      {/* HUD readouts overlay */}
      <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 16 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.15em' }}>● REC</div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.15em' }}>{label}</div>
      </div>
      <div style={{ position: 'absolute', top: 12, right: 12, display: 'flex', gap: 12 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.15em' }}>POV.AERIAL</span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.15em' }}>FOV.84°</span>
      </div>
      <div style={{ position: 'absolute', bottom: 12, left: 12, display: 'flex', gap: 16 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.15em' }}>LAT 1.3521° N</span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.15em' }}>LON 103.8198° E</span>
      </div>
      <div style={{ position: 'absolute', bottom: 12, right: 12 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.15em' }}>SEED 0x{(variant.charCodeAt(0) * 1337).toString(16).toUpperCase()}</span>
      </div>

      <style>{`
        @keyframes scanY { 0% { top: 0; } 100% { top: 100%; } }
      `}</style>
    </div>
  );
};

Object.assign(window, { HudCorners, HudTag, HudReadout, WireframeScene });