// TAROT sigils — unique SVG for each pilot card.
// Tone: sober, geometric, scientific-diagram, like alchemy plates updated to systems theory.

const TSVG = ({ children, size = 300 }) => (
  <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%">{children}</svg>
);

const _rand = (s) => {
  let a = s >>> 0;
  return () => {
    a = (a + 0x6D2B79F5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
};

// 0 · EL CAOS — sensitivity to initial conditions
// Three nearby starts diverging exponentially
const Sigil_CAOS = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  // simulate three trajectories from very close starts
  const tracks = [-0.5, 0, 0.5].map((eps, k) => {
    const pts = [];
    let x = -50 + eps*0.5, y = 0, z = 25;
    for (let i = 0; i < 400; i++) {
      // Lorenz-ish
      const dt = 0.012;
      const dx = 10*(y-x);
      const dy = x*(28-z) - y;
      const dz = x*y - 2.6*z;
      x += dx*dt; y += dy*dt; z += dz*dt;
      pts.push([cx + x*2.4, cy + (z-25)*2.4]);
    }
    return pts;
  });
  return <TSVG size={size}>
    {/* faint orbit grid */}
    <circle cx={cx} cy={cy} r={120} fill="none" stroke={color} strokeWidth={0.3} opacity={0.2}/>
    <circle cx={cx} cy={cy} r={80} fill="none" stroke={color} strokeWidth={0.3} opacity={0.2}/>
    <circle cx={cx} cy={cy} r={40} fill="none" stroke={color} strokeWidth={0.3} opacity={0.2}/>
    {tracks.map((pts, k) => (
      <path key={k}
        d={pts.map(([x,y],i)=>`${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`).join(' ')}
        fill="none" stroke={color} strokeWidth={0.5} opacity={0.65 + k*0.1}/>
    ))}
    {/* starting points cluster */}
    {tracks.map((pts, k) => (
      <circle key={k} cx={pts[0][0]} cy={pts[0][1]} r={2} fill={color}/>
    ))}
    {/* end points scattered */}
    {tracks.map((pts, k) => {
      const [x,y] = pts[pts.length-1];
      return <circle key={k} cx={x} cy={y} r={3} fill={color} opacity={0.8}/>;
    })}
  </TSVG>;
};

// XVI · EL COLAPSO — cascading falling tower
const Sigil_COLAPSO = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const r = _rand(16);
  return <TSVG size={size}>
    {/* original tower outline — ghost */}
    <rect x={cx-50} y={cy-130} width={100} height={260} fill="none" stroke={color} strokeWidth={0.4} strokeDasharray="2 3" opacity={0.4}/>
    {/* stacked stones, tilting more as we go up */}
    {Array.from({length:12}).map((_,i) => {
      const tier = 11 - i; // top first
      const y = cy + 110 - i*22;
      const tilt = i < 8 ? 0 : (i-7)*5; // upper tiers tilt
      const offX = i < 8 ? 0 : (i-7)*8;
      const broken = i >= 9;
      if (broken) {
        // shattered pieces
        return <g key={i}>
          {Array.from({length:4}).map((_,k) => {
            const px = cx + (k-1.5)*40 + (r()-0.5)*60;
            const py = y + (r()-0.5)*30;
            const rot = (r()-0.5)*45;
            return <rect key={k} x={px-18} y={py-8} width={36} height={16} fill={color} opacity={0.7} transform={`rotate(${rot} ${px} ${py})`}/>;
          })}
        </g>;
      }
      return <rect key={i} x={cx-50+offX} y={y} width={100} height={20} fill={color} opacity={0.85} transform={`rotate(${tilt} ${cx+offX} ${y+10})`}/>;
    })}
    {/* fault lines */}
    <line x1={cx-70} y1={cy-40} x2={cx+60} y2={cy-10} stroke={color} strokeWidth={0.6} strokeDasharray="2 4" opacity={0.6}/>
    {/* falling debris dots */}
    {Array.from({length:18}).map((_,i)=>{
      const a = -Math.PI/2 + (r()-0.5)*1.2;
      const dist = 50 + r()*120;
      const x = cx + Math.cos(a)*dist;
      const y = cy + Math.sin(a)*dist*0.6 - 40;
      return <circle key={i} cx={x} cy={y} r={1+r()*1.5} fill={color} opacity={0.6}/>;
    })}
  </TSVG>;
};

// XVII · EL ATRACTOR EXTRAÑO — actual Lorenz butterfly
const Sigil_ATRACTOR_EXTRANO = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const pts = [];
  let x = 1, y = 1, z = 1;
  for (let i = 0; i < 4000; i++) {
    const dt = 0.008;
    const dx = 10*(y-x);
    const dy = x*(28-z) - y;
    const dz = x*y - 2.667*z;
    x += dx*dt; y += dy*dt; z += dz*dt;
    pts.push([cx + x*3.4, cy + (z-25)*3.0]);
  }
  return <TSVG size={size}>
    {/* halo behind */}
    <circle cx={cx} cy={cy} r={130} fill={color} opacity={0.04}/>
    <circle cx={cx} cy={cy} r={100} fill={color} opacity={0.06}/>
    <path d={pts.map(([x,y],i)=>`${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`).join(' ')}
      fill="none" stroke={color} strokeWidth={0.35} opacity={0.85}/>
    {/* two foci (the two lobes' eyes) */}
    <circle cx={cx-32} cy={cy+12} r={2.5} fill={color}/>
    <circle cx={cx+32} cy={cy+12} r={2.5} fill={color}/>
  </TSVG>;
};

// As de Espadas · LA DISTINCIÓN — Spencer-Brown mark cleaving plane
const Sigil_DISTINCION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <TSVG size={size}>
    {/* the plane, hatched */}
    <rect x={20} y={20} width={size-40} height={size-40} fill="none" stroke={color} strokeWidth={0.5} opacity={0.5}/>
    {/* texture: parallel hatch on one side */}
    {Array.from({length:24}).map((_,i)=>{
      const t = i/24;
      const y = 30 + t*(size-60);
      // only on left half (inside the mark)
      return <line key={i} x1={cx-100} y1={y} x2={cx} y2={y} stroke={color} strokeWidth={0.3} opacity={0.35}/>;
    })}
    {/* Spencer-Brown mark — long horizontal then vertical down */}
    <path d={`M ${cx-100} ${cy-30} L ${cx+100} ${cy-30} L ${cx+100} ${cy+90}`}
      fill="none" stroke={color} strokeWidth={3}/>
    {/* the blade — sword pointing up through */}
    <g>
      <line x1={cx} y1={cy-120} x2={cx} y2={cy+80} stroke={color} strokeWidth={2.5}/>
      {/* hilt */}
      <line x1={cx-22} y1={cy+60} x2={cx+22} y2={cy+60} stroke={color} strokeWidth={4}/>
      <circle cx={cx} cy={cy+76} r={4} fill={color}/>
      {/* tip */}
      <path d={`M ${cx-5} ${cy-110} L ${cx} ${cy-122} L ${cx+5} ${cy-110} Z`} fill={color}/>
      {/* small crown of distinction at top */}
      <circle cx={cx} cy={cy-130} r={7} fill="none" stroke={color} strokeWidth={1}/>
      <circle cx={cx} cy={cy-130} r={3} fill={color}/>
    </g>
    {/* labels: marked / unmarked */}
    <text x={cx-50} y={cy+10} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" letterSpacing="2" opacity={0.7}>marcado</text>
    <text x={cx+50} y={cy+10} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" letterSpacing="2" opacity={0.5}>no-marcado</text>
  </TSVG>;
};

// Reina de Copas · LA ESCUCHA — two coupled oscillators in conversation
const Sigil_ESCUCHA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <TSVG size={size}>
    {/* two cups facing each other */}
    {/* left cup */}
    <path d={`M ${cx-100} ${cy-40} Q ${cx-100} ${cy+20} ${cx-70} ${cy+20} Q ${cx-40} ${cy+20} ${cx-40} ${cy-40}`} fill="none" stroke={color} strokeWidth={1.4}/>
    <ellipse cx={cx-70} cy={cy-40} rx={32} ry={8} fill="none" stroke={color} strokeWidth={1}/>
    <line x1={cx-70} y1={cy+20} x2={cx-70} y2={cy+50} stroke={color} strokeWidth={1.4}/>
    <ellipse cx={cx-70} cy={cy+52} rx={28} ry={4} fill="none" stroke={color} strokeWidth={1}/>
    {/* right cup */}
    <path d={`M ${cx+40} ${cy-40} Q ${cx+40} ${cy+20} ${cx+70} ${cy+20} Q ${cx+100} ${cy+20} ${cx+100} ${cy-40}`} fill="none" stroke={color} strokeWidth={1.4}/>
    <ellipse cx={cx+70} cy={cy-40} rx={32} ry={8} fill="none" stroke={color} strokeWidth={1}/>
    <line x1={cx+70} y1={cy+20} x2={cx+70} y2={cy+50} stroke={color} strokeWidth={1.4}/>
    <ellipse cx={cx+70} cy={cy+52} rx={28} ry={4} fill="none" stroke={color} strokeWidth={1}/>
    {/* coupling waves between */}
    {[-25, -15, -5, 5, 15, 25].map((dy, i) => {
      const phase = i * 0.5;
      const path = Array.from({length:30}).map((_,k)=>{
        const t = k/29;
        const x = cx-40 + t*80;
        const y = cy - 50 + dy + Math.sin(t*Math.PI*3 + phase)*4;
        return `${k===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
      }).join(' ');
      return <path key={i} d={path} fill="none" stroke={color} strokeWidth={0.4} opacity={0.45+i*0.05}/>;
    })}
    {/* eyes of each cup (the listening attention) */}
    <circle cx={cx-70} cy={cy-50} r={3} fill={color}/>
    <circle cx={cx+70} cy={cy-50} r={3} fill={color}/>
    {/* halo above — emerging understanding */}
    <path d={`M ${cx-25} ${cy-95} Q ${cx} ${cy-115} ${cx+25} ${cy-95}`} fill="none" stroke={color} strokeWidth={0.8} opacity={0.6}/>
    <path d={`M ${cx-35} ${cy-90} Q ${cx} ${cy-120} ${cx+35} ${cy-90}`} fill="none" stroke={color} strokeWidth={0.5} opacity={0.4}/>
    <circle cx={cx} cy={cy-100} r={3} fill={color} opacity={0.7}/>
  </TSVG>;
};

const PILOT_SIGILS = {
  'EL CAOS': Sigil_CAOS,
  'EL COLAPSO': Sigil_COLAPSO,
  'EL ATRACTOR EXTRAÑO': Sigil_ATRACTOR_EXTRANO,
  'LA DISTINCIÓN': Sigil_DISTINCION,
  'LA ESCUCHA': Sigil_ESCUCHA,
};

function TarotSigil({ card, color, size = 300 }) {
  const S = PILOT_SIGILS[card.name];
  if (S) return <S color={color} size={size}/>;
  // fallback
  return <TSVG size={size}><circle cx={size/2} cy={size/2} r={50} fill="none" stroke={color}/></TSVG>;
}

Object.assign(window, { PILOT_SIGILS, TarotSigil });