/* global React */

// ====================================================================
// SHIP BLUEPRINT — hand-drafted airship schematic
// ====================================================================
function ShipBlueprint({ tier = 1, element = ['air', 'fire'], ascending = false }) {
  // tier 1 = Zephyr Skiff, tier 2 = Thunderhead Frigate, tier 3 = Aetheric Dreadnought
  const inkColor = '#1a2e4a';
  const annotation = '#6b4a2b';

  // Element-tinted accent line color
  const elementHue = {
    air: '#2a6f8a',
    fire: '#b8632a',
    earth: '#4d6e3f',
    water: '#355e7d',
  };
  const accent = elementHue[element[0]] || elementHue.air;
  const accent2 = elementHue[element[1]] || elementHue.fire;

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}
         className={ascending ? 'shake' : ''}>
      {/* compass rose, top-left annotation */}
      <div style={{
        position: 'absolute', top: 14, left: 16, fontFamily: 'IM Fell English SC, serif',
        fontSize: 11, color: annotation, letterSpacing: '0.12em', lineHeight: 1.5,
      }}>
        <div>FIG. I — LIVING HULL CROSS-SECTION</div>
        <div style={{ fontSize: 9, opacity: 0.7 }}>Drafted by the Cartographers' Guild, Atlas VII</div>
      </div>

      {/* scale ruler bottom */}
      <div style={{
        position: 'absolute', bottom: 14, left: 16, right: 16,
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: annotation,
      }}>
        <span>0</span>
        <div style={{
          flex: 1, height: 8, position: 'relative',
          backgroundImage: 'repeating-linear-gradient(90deg, currentColor 0, currentColor 1px, transparent 1px, transparent 20px)',
          opacity: 0.5,
        }} />
        <span>40 spans</span>
      </div>

      {/* center compass at top-right */}
      <CompassRose accent={accent} />

      <svg viewBox="0 0 600 460" preserveAspectRatio="xMidYMid meet"
           style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>

        {/* construction baseline + center axis (faint) */}
        <line x1="60" y1="230" x2="540" y2="230" stroke={inkColor} strokeOpacity="0.18" strokeWidth="0.8" strokeDasharray="2 4" />
        <line x1="300" y1="40" x2="300" y2="420" stroke={inkColor} strokeOpacity="0.18" strokeWidth="0.8" strokeDasharray="2 4" />

        {tier === 1 && <ZephyrSkiff inkColor={inkColor} accent={accent} accent2={accent2} />}
        {tier === 2 && <ThunderheadFrigate inkColor={inkColor} accent={accent} accent2={accent2} />}
        {tier === 3 && <AethericDreadnought inkColor={inkColor} accent={accent} accent2={accent2} />}

        {/* dimension lines */}
        <DimensionLines tier={tier} inkColor={inkColor} annotation={annotation} />
      </svg>

      {/* runic glow overlays */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse 200px 80px at 50% 50%, ${accent}22, transparent 70%)`,
        mixBlendMode: 'multiply',
      }} />
    </div>
  );
}

function CompassRose({ accent }) {
  return (
    <div style={{
      position: 'absolute', top: 16, right: 18, width: 56, height: 56,
    }}>
      <svg viewBox="0 0 60 60" style={{ width: '100%', height: '100%' }}>
        <circle cx="30" cy="30" r="26" fill="none" stroke="#1a2e4a" strokeWidth="0.8" />
        <circle cx="30" cy="30" r="20" fill="none" stroke="#1a2e4a" strokeWidth="0.4" strokeDasharray="1 2" />
        {/* 8-point star */}
        <path d="M30 6 L33 28 L30 30 L27 28 Z" fill={accent} fillOpacity="0.7" stroke="#1a2e4a" strokeWidth="0.5" />
        <path d="M30 54 L33 32 L30 30 L27 32 Z" fill="#1a2e4a" fillOpacity="0.5" />
        <path d="M6 30 L28 27 L30 30 L28 33 Z" fill="#1a2e4a" fillOpacity="0.3" />
        <path d="M54 30 L32 27 L30 30 L32 33 Z" fill="#1a2e4a" fillOpacity="0.3" />
        <text x="30" y="4" textAnchor="middle" fontSize="6" fill="#1a2e4a" fontFamily="IM Fell English SC, serif">N</text>
      </svg>
    </div>
  );
}

function ZephyrSkiff({ inkColor, accent, accent2 }) {
  return (
    <g stroke={inkColor} fill="none" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round">
      {/* Main balloon — elongated teardrop */}
      <ellipse cx="300" cy="160" rx="200" ry="85" />
      {/* envelope ribbing */}
      {[0.15, 0.35, 0.5, 0.65, 0.85].map((t, i) => (
        <ellipse key={i} cx={100 + 400*t} cy="160"
          rx={Math.sin(t*Math.PI) * 14}
          ry="85" strokeWidth="0.7" strokeOpacity="0.6" />
      ))}
      {/* longitudinal seams */}
      <path d="M100 160 Q300 100 500 160" strokeWidth="0.7" strokeOpacity="0.5" />
      <path d="M100 160 Q300 220 500 160" strokeWidth="0.7" strokeOpacity="0.5" />

      {/* runic glyph on balloon — air sigil */}
      <g transform="translate(300 160)">
        <circle r="22" stroke={accent} strokeWidth="1.5" />
        <path d="M-14 0 L14 0 M0 -14 L0 14 M-10 -10 L10 10 M-10 10 L10 -10" stroke={accent} strokeWidth="0.8" />
        <circle r="6" stroke={accent} strokeWidth="1" fill={accent} fillOpacity="0.1" />
      </g>

      {/* secondary balloon glyphs */}
      <g transform="translate(180 160)" stroke={accent} strokeWidth="0.8">
        <circle r="10" />
        <path d="M-6 0 L6 0" />
      </g>
      <g transform="translate(420 160)" stroke={accent} strokeWidth="0.8">
        <circle r="10" />
        <path d="M0 -6 L0 6 M-6 0 L6 0" />
      </g>

      {/* rigging — ropes from balloon to gondola */}
      <path d="M150 240 L220 320" />
      <path d="M200 240 L240 320" />
      <path d="M280 245 L280 320" />
      <path d="M320 245 L320 320" />
      <path d="M400 240 L360 320" />
      <path d="M450 240 L380 320" />

      {/* gondola — riveted hull */}
      <path d="M220 320 L380 320 L400 350 L380 380 L220 380 L200 350 Z" strokeWidth="1.5" />
      {/* rivets */}
      {[230, 250, 270, 290, 310, 330, 350, 370].map((x, i) => (
        <circle key={i} cx={x} cy="320" r="1.5" fill={inkColor} />
      ))}
      {[230, 250, 270, 290, 310, 330, 350, 370].map((x, i) => (
        <circle key={i} cx={x} cy="380" r="1.5" fill={inkColor} />
      ))}

      {/* gondola portholes */}
      <circle cx="250" cy="350" r="7" />
      <circle cx="250" cy="350" r="3" stroke={accent2} strokeWidth="0.8" />
      <circle cx="300" cy="350" r="7" />
      <circle cx="300" cy="350" r="3" stroke={accent2} strokeWidth="0.8" />
      <circle cx="350" cy="350" r="7" />
      <circle cx="350" cy="350" r="3" stroke={accent2} strokeWidth="0.8" />

      {/* aether core — fire sigil on gondola */}
      <g transform="translate(300 410)">
        <circle r="14" stroke={accent2} strokeWidth="1.2" />
        <path d="M0 -10 L-7 4 L0 10 L7 4 Z" stroke={accent2} strokeWidth="1" fill={accent2} fillOpacity="0.15" />
      </g>

      {/* propeller blades on sides */}
      <g transform="translate(110 350)">
        <circle r="4" fill={inkColor} />
        <path d="M-22 0 L22 0 M0 -22 L0 22" strokeWidth="2" />
      </g>
      <g transform="translate(490 350)">
        <circle r="4" fill={inkColor} />
        <path d="M-22 0 L22 0 M0 -22 L0 22" strokeWidth="2" />
      </g>

      {/* fins */}
      <path d="M105 350 L70 320 L70 380 Z" strokeWidth="1.2" />
      <path d="M495 350 L530 320 L530 380 Z" strokeWidth="1.2" />

      {/* anchor flag */}
      <line x1="300" y1="75" x2="300" y2="55" />
      <path d="M300 55 L320 60 L300 65 Z" fill={accent2} fillOpacity="0.4" />
    </g>
  );
}

function ThunderheadFrigate({ inkColor, accent, accent2 }) {
  // Larger, twin-balloon
  return (
    <g stroke={inkColor} fill="none" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round">
      <ellipse cx="220" cy="160" rx="120" ry="65" />
      <ellipse cx="380" cy="160" rx="120" ry="65" />
      <g transform="translate(220 160)" stroke={accent} strokeWidth="1.5">
        <circle r="18" /><path d="M-12 0 L12 0 M0 -12 L0 12" />
      </g>
      <g transform="translate(380 160)" stroke={accent} strokeWidth="1.5">
        <circle r="18" /><path d="M-12 0 L12 0 M0 -12 L0 12" />
      </g>
      {/* connecting spar */}
      <line x1="310" y1="160" x2="290" y2="160" strokeWidth="2" />
      {/* gondola larger */}
      <path d="M180 320 L420 320 L440 360 L420 400 L180 400 L160 360 Z" strokeWidth="1.5" />
      <path d="M180 240 L210 320 M250 230 L255 320 M350 230 L345 320 M420 240 L390 320" />
      {[200, 230, 260, 290, 320, 350, 380, 410].map((x, i) => (
        <g key={i}>
          <circle cx={x} cy="320" r="1.5" fill={inkColor} />
          <circle cx={x} cy="400" r="1.5" fill={inkColor} />
        </g>
      ))}
      <circle cx="220" cy="360" r="8" /><circle cx="220" cy="360" r="3" stroke={accent2} strokeWidth="0.8" />
      <circle cx="270" cy="360" r="8" /><circle cx="270" cy="360" r="3" stroke={accent2} strokeWidth="0.8" />
      <circle cx="330" cy="360" r="8" /><circle cx="330" cy="360" r="3" stroke={accent2} strokeWidth="0.8" />
      <circle cx="380" cy="360" r="8" /><circle cx="380" cy="360" r="3" stroke={accent2} strokeWidth="0.8" />
      {/* cannons */}
      <rect x="100" y="350" width="50" height="14" />
      <rect x="450" y="350" width="50" height="14" />
    </g>
  );
}

function AethericDreadnought({ inkColor, accent, accent2 }) {
  return (
    <g stroke={inkColor} fill="none" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round">
      <ellipse cx="300" cy="140" rx="240" ry="80" />
      <ellipse cx="300" cy="140" rx="210" ry="65" strokeOpacity="0.5" />
      <g transform="translate(300 140)" stroke={accent} strokeWidth="2">
        <circle r="28" />
        <path d="M-20 0 L20 0 M0 -20 L0 20 M-14 -14 L14 14 M-14 14 L14 -14" strokeWidth="1.2" />
      </g>
      <path d="M150 380 L450 380 L480 410 L450 440 L150 440 L120 410 Z" strokeWidth="2" />
      <path d="M120 200 L150 380 M250 215 L240 380 M350 215 L360 380 M480 200 L450 380" />
      {/* heavy cannons */}
      <rect x="80" y="395" width="60" height="20" />
      <rect x="460" y="395" width="60" height="20" />
      <rect x="270" y="450" width="60" height="20" />
    </g>
  );
}

function DimensionLines({ tier, inkColor, annotation }) {
  return (
    <g stroke={annotation} strokeWidth="0.6" fill="none">
      {/* length dimension top */}
      <line x1="100" y1="30" x2="500" y2="30" />
      <line x1="100" y1="26" x2="100" y2="42" />
      <line x1="500" y1="26" x2="500" y2="42" />
      <text x="300" y="22" textAnchor="middle" fontSize="9" fill={annotation} fontFamily="JetBrains Mono, monospace">
        {tier === 1 ? '32 spans' : tier === 2 ? '48 spans' : '64 spans'}
      </text>

      {/* height dimension right */}
      <line x1="555" y1="80" x2="555" y2="380" />
      <line x1="551" y1="80" x2="567" y2="80" />
      <line x1="551" y1="380" x2="567" y2="380" />
      <text x="565" y="230" fontSize="9" fill={annotation} fontFamily="JetBrains Mono, monospace" transform="rotate(90 565 230)">
        {tier === 1 ? '18 sp' : tier === 2 ? '22 sp' : '28 sp'}
      </text>
    </g>
  );
}

window.ShipBlueprint = ShipBlueprint;