/* global React */
const { useEffect, useRef, useState } = React;

function CycleGraph() {
  const svgRef = useRef(null);
  const [hoveredPhase, setHoveredPhase] = useState(null);

  useEffect(() => {
    const svg = svgRef.current;
    if (!svg) return undefined;
    const paths = svg.querySelectorAll('path.draw');
    
    // Calculate total length for each path for the drawing animation
    paths.forEach(p => {
      const length = p.getTotalLength();
      p.style.setProperty('--path-length', length);
      p.style.strokeDasharray = length;
      p.style.strokeDashoffset = length;
    });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          paths.forEach((p, i) => {
            p.style.animation = `drawPath 2.5s cubic-bezier(0.22, 1, 0.36, 1) ${i * 0.15}s forwards`;
          });
        } else {
          // Reset animation if it leaves viewport
          paths.forEach(p => {
            p.style.animation = 'none';
            p.style.strokeDashoffset = p.style.getPropertyValue('--path-length');
          });
        }
      });
    }, { threshold: 0.3 });
    observer.observe(svg);
    return () => observer.disconnect();
  }, []);

  const phases = [
    { id: 'menstrual', name: 'Menstrual', range: '2–10+ days (irregular, very light, or heavy)', left: '0%', width: '20%' },
    { id: 'follicular', name: 'Follicular', range: 'Highly variable (often 14–60+ days)', left: '20%', width: '30%' },
    { id: 'ovulatory', name: 'Ovulatory', range: 'Often delayed, inconsistent, or absent', left: '50%', width: '30%' },
    { id: 'luteal', name: 'Luteal', range: '~11–14 days if ovulation occurs', left: '80%', width: '20%' },
  ];

  return (
    <div className="cycle-graph-container" style={{
      background: 'var(--ivory)',
      height: '100%',
      borderRadius: 24,
      border: '1px solid var(--hair)',
      padding: '24px',
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden'
    }}>
      
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1, pointerEvents: 'none' }}>
        <svg ref={svgRef} viewBox="0 0 400 300" preserveAspectRatio="none" style={{ width: '100%', height: '100%', overflow: 'visible' }}>
          
          {/* Phase Grid lines */}
          <line x1="80" y1="40" x2="80" y2="260" stroke="var(--hair)" strokeWidth="1" strokeDasharray="4 4" />
          <line x1="200" y1="40" x2="200" y2="260" stroke="var(--hair)" strokeWidth="1" strokeDasharray="4 4" />
          <line x1="320" y1="40" x2="320" y2="260" stroke="var(--hair)" strokeWidth="1" strokeDasharray="4 4" />
          
          {/* Estrogen */}
          <path className="draw" d="M -10 250 C 60 250, 140 100, 180 80 C 210 170, 240 230, 290 200 C 340 170, 380 250, 410 260" fill="none" stroke="var(--lavender)" strokeWidth="2" />
          
          {/* Progesterone (using dark teal/slate from header) */}
          <path className="draw" d="M -10 270 C 150 270, 180 270, 210 250 C 260 100, 320 80, 360 180 C 380 230, 390 270, 410 270" fill="none" stroke="#3E657B" strokeWidth="2" />
          
          {/* LH */}
          <path className="draw" d="M -10 265 C 130 265, 170 265, 185 240 C 195 100, 205 100, 215 240 C 230 265, 300 265, 410 265" fill="none" stroke="var(--ink)" strokeWidth="1.5" />
          
          {/* FSH */}
          <path className="draw" d="M -10 255 C 80 255, 140 230, 180 210 C 210 260, 250 260, 410 260" fill="none" stroke="var(--ink-3)" strokeWidth="1.5" strokeDasharray="6 4" />
        </svg>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', zIndex: 2, alignItems: 'flex-start' }}>
        <h4 style={{ fontFamily: 'var(--sans)', fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.1em', margin: 0, color: 'var(--ink-2)' }}>Cycle Hormones</h4>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 10, fontFamily: 'var(--sans)', color: 'var(--ink-2)', textAlign: 'right' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>Estrogen <span style={{ width: 12, height: 2, background: 'var(--lavender)', borderRadius: 2 }}></span></span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>Progesterone <span style={{ width: 12, height: 2, background: '#3E657B', borderRadius: 2 }}></span></span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>LH <span style={{ width: 12, height: 2, background: 'var(--ink)', borderRadius: 2 }}></span></span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>FSH <span style={{ width: 12, height: 2, background: 'var(--ink-3)', borderRadius: 2 }}></span></span>
        </div>
      </div>

      {/* Hover interaction areas */}
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 3, display: 'flex' }}>
        {phases.map(phase => (
          <div
            key={phase.id}
            onMouseEnter={() => setHoveredPhase(phase.id)}
            onMouseLeave={() => setHoveredPhase(null)}
            style={{
              position: 'absolute',
              top: 0,
              left: phase.left,
              width: phase.width,
              height: '100%',
              cursor: 'default',
              transition: 'background 0.2s ease',
              background: hoveredPhase === phase.id ? 'rgba(0, 0, 0, 0.02)' : 'transparent',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'flex-end',
              alignItems: 'center',
              paddingBottom: '32px'
            }}
          >
            <div style={{
              opacity: hoveredPhase === phase.id ? 1 : 0,
              transition: 'opacity 0.2s ease, transform 0.2s ease',
              transform: hoveredPhase === phase.id ? 'translateY(0)' : 'translateY(10px)',
              textAlign: 'center',
              background: 'var(--ivory)',
              padding: '6px 12px',
              borderRadius: '8px',
              boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
              border: '1px solid var(--hair-2)'
            }}>
              <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--ink)' }}>{phase.name}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2, maxWidth: 120, lineHeight: 1.3 }}>{phase.range}</div>
            </div>
          </div>
        ))}
      </div>
      
    </div>
  );
}

Object.assign(window, { CycleGraph });