// astrology.jsx - natal chart wheel renderer for Azoth AI

const ASTRO_ZODIAC = [
  { name: "Овен" },
  { name: "Телець" },
  { name: "Близнюки" },
  { name: "Рак" },
  { name: "Лев" },
  { name: "Діва" },
  { name: "Терези" },
  { name: "Скорпіон" },
  { name: "Стрілець" },
  { name: "Козоріг" },
  { name: "Водолій" },
  { name: "Риби" },
];

const ZODIAC_SVG_PATHS = [
  ["M0 10 C0 2 -2 -3 -7 -6 C-10 -8 -12 -5 -11 -1", "M0 10 C0 2 2 -3 7 -6 C10 -8 12 -5 11 -1"],
  ["M-9 -6 C-5 -2 -2 -1 0 -1 C2 -1 5 -2 9 -6", "M-8 4 A8 8 0 1 0 8 4 A8 8 0 1 0 -8 4"],
  ["M-8 -9 L-8 9", "M8 -9 L8 9", "M-10 -8 C-4 -5 4 -5 10 -8", "M-10 8 C-4 5 4 5 10 8"],
  ["M9 -5 C5 -10 -4 -9 -6 -3 C-8 3 -1 5 3 2", "M-9 5 C-5 10 4 9 6 3 C8 -3 1 -5 -3 -2", "M-5 -2 A3 3 0 1 0 -5 -8 A3 3 0 1 0 -5 -2", "M5 8 A3 3 0 1 0 5 2 A3 3 0 1 0 5 8"],
  ["M-10 4 C-14 0 -11 -9 -4 -9 C2 -9 4 -4 2 1", "M2 1 C-1 7 5 13 12 7", "M-8 8 C-3 8 1 5 2 1"],
  ["M-13 9 L-13 -8", "M-7 9 L-7 -7 C-5 -10 -1 -10 1 -7 L1 9", "M1 -7 C3 -10 8 -10 10 -6 L10 6", "M10 6 C10 12 2 12 2 6 C2 1 10 1 14 -3", "M8 7 L14 -2"],
  ["M-14 9 L14 9", "M-12 2 L-5 2", "M5 2 L12 2", "M-5 2 C-5 -6 5 -6 5 2"],
  ["M-11 8 L-11 -7", "M-5 8 L-5 -6 C-3 -9 1 -9 3 -6 L3 7", "M3 7 L8 2", "M8 2 L10 6", "M8 2 L5 1"],
  ["M-7 7 L9 -9", "M2 -9 L9 -9 L9 -2", "M-1 -4 L6 3"],
  ["M-13 8 L-13 -8 C-9 -3 -6 0 -4 5", "M-4 5 L-4 -8 C0 -4 2 2 2 7", "M2 7 C2 13 12 12 12 5 C12 -2 4 -2 4 5", "M5 8 C8 7 11 4 12 1"],
  ["M-11 -2 C-6 -6 -2 2 3 -2 C7 -5 9 -3 11 -2", "M-11 6 C-6 2 -2 10 3 6 C7 3 9 5 11 6"],
  ["M-11 -11 C-4 -4 -4 4 -11 11", "M11 -11 C4 -4 4 4 11 11", "M-14 0 L14 0"],
];

function astroAngle(lon, asc) {
  return ((Number(lon || 0) - Number(asc || 0)) * Math.PI) / 180 + Math.PI;
}

function astroPoint(cx, cy, r, lon, asc) {
  const a = astroAngle(lon, asc);
  return { x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r };
}

function aspectClass(aspect) {
  if (aspect === "з'єднання") return "conjunction";
  if (aspect === "трин") return "trine";
  if (aspect === "секстиль") return "sextile";
  if (aspect === "квадрат") return "square";
  if (aspect === "опозиція") return "opposition";
  return "other";
}

function ZodiacGlyph({ index, x, y, size = 62 }) {
  const paths = ZODIAC_SVG_PATHS[index] || [];
  const radius = size / 2;
  const glyphScale = (size * 0.54) / 34;
  return (
    <g className="nchart__zodiac-mark" transform={`translate(${x} ${y})`}>
      <circle className="nchart__zodiac-mark-halo" cx="0" cy="0" r={radius + 6} />
      <circle className="nchart__zodiac-mark-ring" cx="0" cy="0" r={radius} />
      <circle className="nchart__zodiac-mark-face" cx="0" cy="0" r={radius - 5} />
      <g className="nchart__zodiac-mark-glyph" transform={`scale(${glyphScale})`}>
        {paths.map((d, i) => <path key={i} d={d} />)}
      </g>
    </g>
  );
}

function NatalChartView({ chart }) {
  if (!chart || chart.type !== "natal_chart" || !chart.asc || !chart.planets) return null;
  const size = 660;
  const c = size / 2;
  const asc = chart.asc.lon;
  const zodiacR = 284;
  const houseR = 236;
  const planetR = 190;
  const planetPoints = chart.planets.map((planet, index) => {
    const radial = planetR - (index % 3) * 16;
    return { ...planet, ...astroPoint(c, c, radial, planet.lon, asc), radial };
  });
  const chartKey = `${chart.date || "date"}-${chart.time || "time"}`.replace(/[^a-zA-Z0-9_-]/g, "");
  return (
    <div className="nchart" aria-label={`Натальна карта ${chart.date}`}>
      <div className="nchart__top">
        <div>
          <div className="nchart__eyebrow">Natal Chart · {chart.zodiac} · {chart.houses}</div>
          <div className="nchart__title">Натальна карта</div>
        </div>
        <div className="nchart__meta">
          <span>{chart.date} · {chart.time}</span>
          <small>{chart.place?.name || "місце"} · {chart.offset}</small>
        </div>
      </div>
      <div className="nchart__grid">
        <svg className="nchart__svg" viewBox={`0 0 ${size} ${size}`} role="img">
          <defs>
            <radialGradient id={`nchartGlow-${chartKey}`} cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="rgba(232,199,90,0.16)" />
              <stop offset="58%" stopColor="rgba(201,162,39,0.05)" />
              <stop offset="100%" stopColor="rgba(10,8,7,0)" />
            </radialGradient>
          </defs>
          <circle cx={c} cy={c} r={zodiacR + 24} fill={`url(#nchartGlow-${chartKey})`} />
          <circle className="nchart__ring nchart__ring--outer" cx={c} cy={c} r={zodiacR} />
          <circle className="nchart__ring" cx={c} cy={c} r={houseR} />
          <circle className="nchart__ring nchart__ring--inner" cx={c} cy={c} r="108" />

          {ASTRO_ZODIAC.map((sign, i) => {
            const start = astroPoint(c, c, zodiacR, i * 30, asc);
            const label = astroPoint(c, c, zodiacR + 9, i * 30 + 15, asc);
            return (
              <g key={sign.name}>
                <line className="nchart__zodiac-line" x1={c} y1={c} x2={start.x} y2={start.y} />
                <ZodiacGlyph index={i} x={label.x} y={label.y} />
              </g>
            );
          })}

          {(chart.cusps || []).map(cusp => {
            const p = astroPoint(c, c, houseR, cusp.lon, asc);
            const label = astroPoint(c, c, 126, cusp.lon + 9, asc);
            return (
              <g key={cusp.house}>
                <line className="nchart__house-line" x1={c} y1={c} x2={p.x} y2={p.y} />
                <text className="nchart__house-num" x={label.x} y={label.y} textAnchor="middle" dominantBaseline="central">{cusp.house}</text>
              </g>
            );
          })}

          {(chart.aspects || []).slice(0, 14).map((aspect, i) => {
            const left = planetPoints.find(p => p.name === aspect.left);
            const right = planetPoints.find(p => p.name === aspect.right);
            if (!left || !right) return null;
            return <line key={`${aspect.left}-${aspect.right}-${i}`} className={`nchart__aspect nchart__aspect--${aspectClass(aspect.aspect)}`} x1={left.x} y1={left.y} x2={right.x} y2={right.y} />;
          })}

          {planetPoints.map((planet, i) => (
            <g key={planet.name} className="nchart__planet" style={{ animationDelay: `${180 + i * 38}ms` }}>
              <circle cx={planet.x} cy={planet.y} r="18" />
              <text x={planet.x} y={planet.y + 6} textAnchor="middle">{planet.glyph}</text>
            </g>
          ))}

          <text className="nchart__axis nchart__axis--asc" x="48" y={c + 5}>ASC {chart.asc.label}</text>
          <text className="nchart__axis nchart__axis--mc" x={c} y="42" textAnchor="middle">MC {chart.mc.label}</text>
          <text className="nchart__core" x={c} y={c - 6} textAnchor="middle">AZOTH</text>
          <text className="nchart__core-sub" x={c} y={c + 18} textAnchor="middle">tropical · Placidus</text>
        </svg>
        <div className="nchart__side">
          <div className="nchart__angles">
            <div><span>ASC</span><b>{chart.asc.label}</b></div>
            <div><span>MC</span><b>{chart.mc.label}</b></div>
          </div>
          <div className="nchart__planet-list">
            {chart.planets.map(planet => (
              <div className="nchart__planet-row" key={planet.name}>
                <span><i>{planet.glyph}</i>{planet.name}</span>
                <b>{planet.position}{planet.retrograde ? " R" : ""}</b>
                <em>{planet.house} дім</em>
              </div>
            ))}
          </div>
          <div className="nchart__aspects">
            {(chart.aspects || []).slice(0, 6).map((aspect, i) => (
              <div key={i}><span>{aspect.left} {aspect.aspect} {aspect.right}</span><b>{aspect.orb}°</b></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NatalChartView });