// Interactive Rosary — arte realista e robusta
// Cordão sólido, contas com volume, medalha mariana e crucifixo detalhado.
// Mantém a API: onPrayerClick(prayerKey, label)

const PRAYER_CONTENT = {
  'sign-cross': {
    title: 'Sinal da Cruz',
    body: 'Pelo sinal da Santa Cruz, livrai-nos Deus, Nosso Senhor, dos nossos inimigos. Em nome do Pai, e do Filho, e do Espírito Santo. Amém.',
  },
  'creed': {
    title: 'Credo',
    body: 'Creio em Deus Pai todo-poderoso, criador do céu e da terra. E em Jesus Cristo, seu único Filho, Nosso Senhor, que foi concebido pelo poder do Espírito Santo; nasceu da Virgem Maria; padeceu sob Pôncio Pilatos, foi crucificado, morto e sepultado; desceu à mansão dos mortos; ressuscitou ao terceiro dia; subiu aos céus; está sentado à direita de Deus Pai todo-poderoso, donde há de vir a julgar os vivos e os mortos. Creio no Espírito Santo, na santa Igreja Católica, na comunhão dos santos, na remissão dos pecados, na ressurreição da carne, na vida eterna. Amém.',
  },
  'our-father': {
    title: 'Pai Nosso',
    body: 'Pai nosso que estais nos céus, santificado seja o vosso nome. Venha a nós o vosso reino, seja feita a vossa vontade, assim na terra como no céu. O pão nosso de cada dia nos dai hoje; perdoai-nos as nossas ofensas, assim como nós perdoamos a quem nos tem ofendido; e não nos deixeis cair em tentação, mas livrai-nos do mal. Amém.',
  },
  'hail-mary': {
    title: 'Ave Maria',
    body: 'Ave Maria, cheia de graça, o Senhor é convosco. Bendita sois vós entre as mulheres e bendito é o fruto do vosso ventre, Jesus. Santa Maria, Mãe de Deus, rogai por nós, pecadores, agora e na hora da nossa morte. Amém.',
  },
  'glory': {
    title: 'Glória ao Pai',
    body: 'Glória ao Pai, ao Filho e ao Espírito Santo. Como era no princípio, agora e sempre. Amém.',
  },
  'fatima': {
    title: 'Jaculatória de Fátima',
    body: 'Ó meu Jesus, perdoai-nos, livrai-nos do fogo do inferno; levai as almas todas para o céu e socorrei principalmente as que mais precisarem da Vossa misericórdia.',
  },
  'salve': {
    title: 'Salve Rainha',
    body: 'Salve, Rainha, Mãe de misericórdia, vida, doçura e esperança nossa, salve! A vós bradamos, os degredados filhos de Eva; a vós suspiramos, gemendo e chorando neste vale de lágrimas. Eia, pois, advogada nossa, esses vossos olhos misericordiosos a nós volvei; e depois deste desterro, mostrai-nos Jesus, bendito fruto do vosso ventre, ó clemente, ó piedosa, ó doce sempre Virgem Maria. Rogai por nós, Santa Mãe de Deus, para que sejamos dignos das promessas de Cristo. Amém.',
  },
};

const MYSTERIES = [
  { id: 'joyful', name: 'Gozosos', day: 'Segunda · Sábado',
    list: ['A Anunciação','A Visitação','O Nascimento','A Apresentação','O Encontro no Templo'] },
  { id: 'sorrowful', name: 'Dolorosos', day: 'Terça · Sexta',
    list: ['A Agonia no Horto','A Flagelação','A Coroação de Espinhos','O Caminho do Calvário','A Crucificação'] },
  { id: 'glorious', name: 'Gloriosos', day: 'Quarta · Domingo',
    list: ['A Ressurreição','A Ascensão','A Vinda do Espírito Santo','A Assunção','A Coroação de Maria'] },
  { id: 'luminous', name: 'Luminosos', day: 'Quinta',
    list: ['O Batismo no Jordão','As Bodas de Caná','O Anúncio do Reino','A Transfiguração','A Instituição da Eucaristia'] },
];

const InteractiveRosary = ({ onPrayerClick }) => {
  const [hover, setHover] = React.useState(null);

  // ── Geometria do laço (5 dezenas = 55 contas), com folga embaixo p/ medalha
  const cx = 0, cy = -5, rx = 134, ry = 170;
  const gap = 0.34; // folga angular na base
  const startA = Math.PI / 2 + gap;
  const endA = Math.PI / 2 + Math.PI * 2 - gap;
  const loop = [];
  const N = 55;
  for (let i = 0; i < N; i++) {
    const f = i / (N - 1);
    const a = startA + f * (endA - startA);
    const x = cx + Math.cos(a) * rx;
    const y = cy + Math.sin(a) * ry;
    const isPater = i % 11 === 0;
    const decade = Math.floor(i / 11) + 1;
    loop.push({
      id: 'loop' + i, x, y, isPater,
      prayer: isPater ? 'our-father' : 'hail-mary',
      label: isPater ? `Pai Nosso · ${decade}ª dezena` : `Ave Maria · ${decade}ª dezena`,
    });
  }

  // ── Pingente (cauda) descendo da medalha
  const medalY = 172;
  const tail = [
    { id: 't0', x: 0, y: 208, isPater: true,  prayer: 'our-father', label: 'Pai Nosso' },
    { id: 't1', x: 0, y: 234, isPater: false, prayer: 'hail-mary',  label: 'Ave Maria · Fé' },
    { id: 't2', x: 0, y: 256, isPater: false, prayer: 'hail-mary',  label: 'Ave Maria · Esperança' },
    { id: 't3', x: 0, y: 278, isPater: false, prayer: 'hail-mary',  label: 'Ave Maria · Caridade' },
    { id: 't4', x: 0, y: 308, isPater: true,  prayer: 'creed',      label: 'Credo' },
  ];
  const crossY = 354;

  // path do cordão do laço
  const loopPath = (() => {
    let d = '';
    // elipse aproximada via beads + fechando a folga pela medalha
    const pts = loop.map(b => `${b.x.toFixed(1)} ${b.y.toFixed(1)}`);
    d = 'M ' + pts.join(' L ');
    return d;
  })();

  const renderBead = (b) => {
    const r = b.isPater ? 9 : 6.6;
    const hr = hover === b.id ? r + 2.2 : r;
    const fill = b.isPater ? 'url(#beadPater)' : 'url(#beadAve)';
    const rim = b.isPater ? '#7A571B' : '#16345C';
    return (
      <g key={b.id} style={{ cursor: 'pointer' }}
         onMouseEnter={() => setHover(b.id)}
         onMouseLeave={() => setHover(null)}
         onClick={() => onPrayerClick(b.prayer, b.label)}>
        {hover === b.id && (
          <circle cx={b.x} cy={b.y} r={hr + 8} fill="rgba(230,197,124,0.20)" />
        )}
        {/* corpo da conta */}
        <circle cx={b.x} cy={b.y} r={hr}
          fill={fill}
          stroke={rim} strokeWidth="0.7"
          filter="url(#beadShadow)" style={{ transition: 'r 160ms' }} />
        {/* faceta / anel equatorial (metal engastado) */}
        <ellipse cx={b.x} cy={b.y} rx={hr * 0.92} ry={hr * 0.5}
          fill="none" stroke={b.isPater ? 'rgba(255,247,220,0.4)' : 'rgba(180,205,240,0.35)'} strokeWidth="0.5" />
        {/* casquilhos dourados (onde a linha passa) */}
        <rect x={b.x - 1} y={b.y - hr - 1.6} width="2" height="2.4" rx="0.6" fill="url(#capGrad)" />
        <rect x={b.x - 1} y={b.y + hr - 0.8} width="2" height="2.4" rx="0.6" fill="url(#capGrad)" />
        {/* brilho especular duplo */}
        <ellipse cx={b.x - hr * 0.34} cy={b.y - hr * 0.4} rx={hr * 0.34} ry={hr * 0.22}
          fill="rgba(255,255,255,0.9)" />
        <ellipse cx={b.x + hr * 0.28} cy={b.y + hr * 0.3} rx={hr * 0.16} ry={hr * 0.1}
          fill="rgba(255,255,255,0.28)" />
      </g>
    );
  };

  return (
    <svg viewBox="-172 -200 344 600" width="100%" style={{ maxHeight: 600 }} aria-label="Terço interativo">
      <defs>
        {/* Ave Maria — azul mariano polido */}
        <radialGradient id="beadAve" cx="34%" cy="28%" r="75%">
          <stop offset="0%" stopColor="#EAF2FC" />
          <stop offset="22%" stopColor="#9CC0E8" />
          <stop offset="55%" stopColor="#3E72AE" />
          <stop offset="82%" stopColor="#28568C" />
          <stop offset="100%" stopColor="#16345C" />
        </radialGradient>
        {/* Pai Nosso — ouro */}
        <radialGradient id="beadPater" cx="34%" cy="26%" r="76%">
          <stop offset="0%" stopColor="#FFF9EC" />
          <stop offset="30%" stopColor="#F0D283" />
          <stop offset="66%" stopColor="#C99A3C" />
          <stop offset="100%" stopColor="#7A5312" />
        </radialGradient>
        <radialGradient id="medalGrad" cx="34%" cy="26%" r="80%">
          <stop offset="0%" stopColor="#FFF7E0" />
          <stop offset="46%" stopColor="#E3C074" />
          <stop offset="100%" stopColor="#7A5312" />
        </radialGradient>
        <linearGradient id="capGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#F7E4AE" />
          <stop offset="100%" stopColor="#9A6E22" />
        </linearGradient>
        <linearGradient id="cordGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#C9A24A" />
          <stop offset="50%" stopColor="#E6C57C" />
          <stop offset="100%" stopColor="#A9781F" />
        </linearGradient>
        <linearGradient id="crossGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#F4DEA4" />
          <stop offset="45%" stopColor="#D9B25A" />
          <stop offset="100%" stopColor="#8C5E16" />
        </linearGradient>
        <filter id="beadShadow" x="-60%" y="-60%" width="220%" height="220%">
          <feDropShadow dx="0" dy="1.4" stdDeviation="1.2" floodColor="#0a1830" floodOpacity="0.42" />
        </filter>
        <filter id="crossShadow" x="-60%" y="-60%" width="220%" height="220%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" floodColor="#2a1d04" floodOpacity="0.45" />
        </filter>
      </defs>

      {/* ─── Cordão do laço (sob as contas) ─── */}
      <path d={loopPath} fill="none" stroke="#7A571B" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" opacity="0.55" />
      <path d={loopPath} fill="none" stroke="url(#cordGrad)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

      {/* ─── Cordão da cauda ─── */}
      <line x1="0" y1={medalY} x2="0" y2={crossY - 18} stroke="#7A571B" strokeWidth="3.4" strokeLinecap="round" opacity="0.55" />
      <line x1="0" y1={medalY} x2="0" y2={crossY - 18} stroke="url(#cordGrad)" strokeWidth="2" strokeLinecap="round" />

      {/* ─── Contas do laço ─── */}
      {loop.map(renderBead)}

      {/* ─── Medalha mariana (junção) ─── */}
      <g style={{ cursor: 'pointer' }}
         onMouseEnter={() => setHover('medal')}
         onMouseLeave={() => setHover(null)}
         onClick={() => onPrayerClick('salve', 'Medalha · Salve Rainha')}>
        {hover === 'medal' && <ellipse cx="0" cy={medalY} rx="22" ry="25" fill="rgba(203,161,76,0.18)" />}
        <ellipse cx="0" cy={medalY} rx={hover === 'medal' ? 15.5 : 14} ry={hover === 'medal' ? 18.5 : 17}
          fill="url(#medalGrad)" stroke="#7A571B" strokeWidth="1" filter="url(#beadShadow)" style={{ transition: 'all 160ms' }} />
        <ellipse cx="0" cy={medalY} rx="10.5" ry="13.5" fill="none" stroke="#8C5E16" strokeWidth="0.7" opacity="0.7" />
        {/* monograma M + coroa */}
        <text x="0" y={medalY + 4.5} textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontSize="15" fill="#5A3D0E">M</text>
        <path d={`M -5 ${medalY - 8} L -3 ${medalY - 10.5} L 0 ${medalY - 8.5} L 3 ${medalY - 10.5} L 5 ${medalY - 8}`} fill="none" stroke="#5A3D0E" strokeWidth="0.7" opacity="0.7" />
      </g>

      {/* ─── Contas da cauda ─── */}
      {tail.map(renderBead)}

      {/* ─── Crucifixo ─── */}
      <g transform={`translate(0, ${crossY})`} style={{ cursor: 'pointer' }}
         onMouseEnter={() => setHover('cross')}
         onMouseLeave={() => setHover(null)}
         onClick={() => onPrayerClick('sign-cross', 'Sinal da Cruz')}>
        {hover === 'cross' && <circle cx="0" cy="6" r="34" fill="rgba(203,161,76,0.16)" />}
        <g filter="url(#crossShadow)">
          {/* haste e travessa */}
          <rect x="-4" y="-26" width="8" height="58" rx="2" fill="url(#crossGrad)" stroke="#7A571B" strokeWidth="0.6" />
          <rect x="-17" y="-7" width="34" height="8" rx="2" fill="url(#crossGrad)" stroke="#7A571B" strokeWidth="0.6" />
          {/* realce central */}
          <rect x="-1.4" y="-25" width="2.8" height="56" rx="1.4" fill="rgba(255,248,225,0.55)" />
          <rect x="-16" y="-5.4" width="32" height="2.6" rx="1.3" fill="rgba(255,248,225,0.5)" />
          {/* terminações trilobadas */}
          <circle cx="0" cy="-26" r="3.4" fill="url(#crossGrad)" stroke="#7A571B" strokeWidth="0.5" />
          <circle cx="0" cy="32" r="3.4" fill="url(#crossGrad)" stroke="#7A571B" strokeWidth="0.5" />
          <circle cx="-17" cy="-3" r="3.4" fill="url(#crossGrad)" stroke="#7A571B" strokeWidth="0.5" />
          <circle cx="17" cy="-3" r="3.4" fill="url(#crossGrad)" stroke="#7A571B" strokeWidth="0.5" />
        </g>
        {/* corpus discreto */}
        <g stroke="#6E4E14" strokeWidth="0.9" strokeLinecap="round" fill="none" opacity="0.65">
          <circle cx="0" cy="-12.5" r="2.2" fill="#C9A24A" stroke="none" />
          <path d="M0 -10 L0 8" />
          <path d="M0 -7 L-13 -3 M0 -7 L13 -3" />
          <path d="M0 8 L-5 20 M0 8 L5 20" />
        </g>
        {/* INRI */}
        <rect x="-7" y="-21" width="14" height="4" rx="1" fill="#EAD7A0" stroke="#7A571B" strokeWidth="0.4" />
      </g>

      {/* ─── Rótulo no topo ─── */}
      {hover && (
        <text x="0" y="-182" textAnchor="middle" fontFamily="Cormorant Garamond, serif"
          fontStyle="italic" fontSize="15" fill="#1C3D66">
          {hover === 'cross' ? 'Sinal da Cruz · início'
            : hover === 'medal' ? 'Medalha · Salve Rainha'
            : [...loop, ...tail].find(b => b.id === hover)?.label}
        </text>
      )}
    </svg>
  );
};

window.InteractiveRosary = InteractiveRosary;
window.PRAYER_CONTENT = PRAYER_CONTENT;
window.MYSTERIES = MYSTERIES;
