// Active procedure carousel — 4 stages of a dental implant, auto-advancing.
// Used inside the patient view phone.

const ImplantStage = ({ stage }) => {
  // Common scene: cross-section, upper jaw. Adjacent teeth #13 (left) and #15 (right).
  // Stage 0: missing tooth — gap in gum with healed bone underneath
  // Stage 1: surgical access — gum reflected, pilot hole in bone
  // Stage 2: implant placed — titanium post seated, healing abutment on top
  // Stage 3: healed + crown — final crown on integrated implant
  return (
    <svg viewBox="0 0 240 160" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="bone-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#F4D9A8" />
          <stop offset="1" stopColor="#C99B6A" />
        </linearGradient>
        <linearGradient id="implant-grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#9A9A9A" />
          <stop offset="0.5" stopColor="#C8C8C8" />
          <stop offset="1" stopColor="#7A7A7A" />
        </linearGradient>
        <linearGradient id="crown-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FFFFFF" />
          <stop offset="1" stopColor="#E8E0D0" />
        </linearGradient>
      </defs>

      {/* Bone (always present) */}
      <path d="M0 115 Q60 110, 120 112 T240 115 L240 160 L0 160 Z" fill="url(#bone-grad)" opacity="0.95" />
      {/* Bone speckle texture */}
      {[
        [20, 130], [50, 138], [80, 124], [110, 132], [140, 140],
        [170, 126], [200, 134], [225, 144], [35, 150], [95, 152], [165, 148], [205, 150],
      ].map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r={1.2} fill="rgba(120, 80, 30, 0.25)" />
      ))}

      {/* Adjacent tooth #13 (left of gap) */}
      <g>
        {/* Root */}
        <path d="M48 115 Q44 145 50 152 Q56 154 60 152 Q66 145 62 115 Z" fill="#F8F2E0" stroke="rgba(0,0,0,0.08)" />
        {/* Crown */}
        <path d="M46 115 L48 95 Q52 82 60 82 Q68 82 72 95 L74 115 Z" fill="url(#crown-grad)" stroke="rgba(0,0,0,0.1)" />
        <ellipse cx="60" cy="92" rx="5" ry="2.5" fill="rgba(255,255,255,0.7)" />
      </g>

      {/* Adjacent tooth #15 (right of gap) */}
      <g>
        <path d="M178 115 Q174 145 180 152 Q186 154 190 152 Q196 145 192 115 Z" fill="#F8F2E0" stroke="rgba(0,0,0,0.08)" />
        <path d="M176 115 L178 95 Q182 82 190 82 Q198 82 202 95 L204 115 Z" fill="url(#crown-grad)" stroke="rgba(0,0,0,0.1)" />
        <ellipse cx="190" cy="92" rx="5" ry="2.5" fill="rgba(255,255,255,0.7)" />
      </g>

      {/* ── Stage-specific elements ── */}

      {/* Stage 0: missing tooth — intact gum + healed bone over gap */}
      {stage === 0 && (
        <g>
          <path d="M76 115 Q90 102, 120 100 T164 115" fill="#E8B89C" stroke="rgba(160, 80, 40, 0.15)" />
          {/* Subtle dip showing missing tooth area */}
          <path d="M88 115 Q120 107 152 115" fill="none" stroke="rgba(150, 90, 60, 0.18)" />
        </g>
      )}

      {/* Stage 1: pilot drill — gum reflected, hole being made */}
      {stage === 1 && (
        <g>
          {/* Reflected gum flaps */}
          <path d="M76 115 L82 100 L98 108 Q105 112, 105 118 L88 122 Z" fill="#E8B89C" stroke="rgba(160, 80, 40, 0.2)" />
          <path d="M164 115 L158 100 L142 108 Q135 112, 135 118 L152 122 Z" fill="#E8B89C" stroke="rgba(160, 80, 40, 0.2)" />
          {/* Pilot hole in bone */}
          <ellipse cx="120" cy="118" rx="6" ry="3" fill="rgba(60, 30, 10, 0.6)" />
          <rect x="115" y="118" width="10" height="22" fill="rgba(60, 30, 10, 0.5)" />
          {/* Drill bit descending */}
          <g>
            <rect x="116" y="40" width="8" height="60" fill="#888" rx="1" />
            <rect x="115" y="44" width="10" height="2" fill="#666" />
            <rect x="115" y="52" width="10" height="2" fill="#666" />
            <rect x="115" y="60" width="10" height="2" fill="#666" />
            <rect x="115" y="68" width="10" height="2" fill="#666" />
            <rect x="115" y="76" width="10" height="2" fill="#666" />
            <rect x="115" y="84" width="10" height="2" fill="#666" />
            {/* Drill tip — twist */}
            <path d="M115 100 L120 112 L125 100 Z" fill="#666" />
            <path d="M117 100 L120 106 L123 100 Z" fill="#333" />
            {/* Handle hint */}
            <rect x="112" y="32" width="16" height="10" rx="2" fill="#444" />
          </g>
          {/* Tiny irrigation drops */}
          <circle cx="108" cy="78" r="1.5" fill="rgba(120, 180, 220, 0.7)" />
          <circle cx="134" cy="86" r="1.2" fill="rgba(120, 180, 220, 0.7)" />
        </g>
      )}

      {/* Stage 2: implant placed + healing abutment */}
      {stage === 2 && (
        <g>
          {/* Gum closed around abutment */}
          <path d="M76 115 Q90 104, 110 104 L130 104 Q150 104, 164 115 L164 122 L76 122 Z" fill="#E8B89C" stroke="rgba(160, 80, 40, 0.15)" />
          {/* Titanium implant body in bone */}
          <rect x="111" y="106" width="18" height="38" rx="1" fill="url(#implant-grad)" />
          {/* Implant threads */}
          {[110, 116, 122, 128, 134, 140].map((y) => (
            <path key={y} d={`M111 ${y} L129 ${y + 2}`} stroke="rgba(0,0,0,0.35)" strokeWidth="1.2" />
          ))}
          {/* Implant tip taper */}
          <path d="M111 144 L120 150 L129 144 Z" fill="#7A7A7A" />
          {/* Healing abutment cap */}
          <rect x="113" y="98" width="14" height="10" rx="2" fill="#B8B8B8" stroke="rgba(0,0,0,0.2)" />
          <ellipse cx="120" cy="98" rx="7" ry="2" fill="#D8D8D8" />
        </g>
      )}

      {/* Stage 3: healed + crown */}
      {stage === 3 && (
        <g>
          {/* Healthy gum line */}
          <path d="M76 115 Q90 105, 120 103 T164 115" fill="#E8B89C" stroke="rgba(160, 80, 40, 0.15)" />
          {/* Implant body — visible underneath but subtler */}
          <rect x="112" y="108" width="16" height="36" rx="1" fill="url(#implant-grad)" opacity="0.85" />
          {[112, 118, 124, 130, 136, 142].map((y) => (
            <path key={y} d={`M112 ${y} L128 ${y + 1.5}`} stroke="rgba(0,0,0,0.3)" strokeWidth="1" />
          ))}
          <path d="M112 144 L120 148 L128 144 Z" fill="#7A7A7A" opacity="0.85" />
          {/* Abutment (small connector) */}
          <rect x="115" y="100" width="10" height="6" fill="#9A9A9A" />
          {/* New crown */}
          <path d="M106 105 L108 88 Q114 76 120 76 Q126 76 132 88 L134 105 Z" fill="url(#crown-grad)" stroke="rgba(0,0,0,0.12)" />
          <ellipse cx="120" cy="84" rx="5" ry="2.5" fill="rgba(255,255,255,0.85)" />
          {/* Subtle glow to celebrate completion */}
          <circle cx="120" cy="92" r="22" fill="none" stroke="rgba(230, 204, 138, 0.4)" strokeWidth="2" />
        </g>
      )}
    </svg>
  );
};

const stageMeta = [
  { label: 'Missing tooth', sub: 'Tooth #14 has been extracted. The bone underneath is healthy.' },
  { label: 'Bone preparation', sub: 'A precise pilot channel is shaped in the jawbone — gentler than you\'d guess.' },
  { label: 'Implant placement', sub: 'A titanium post is seated. Over 3 months, your bone grows to lock it in.' },
  { label: 'Final crown', sub: 'A porcelain crown — color-matched to your other teeth — completes the restoration.' },
];

const ImplantCarousel = () => {
  const [stage, setStage] = useState(0);
  const [paused, setPaused] = useState(false);
  const STAGE_MS = 4000;

  useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => {
      setStage((s) => (s + 1) % 4);
    }, STAGE_MS);
    return () => clearTimeout(id);
  }, [paused, stage]);

  const jumpTo = (i) => {
    setStage(i);
  };

  return (
    <div style={{ marginBottom: 14 }}>
      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          height: 180,
          borderRadius: 12,
          background: 'radial-gradient(circle at 30% 25%, #F6E8C8 0%, #E6D2A8 100%)',
          position: 'relative',
          overflow: 'hidden',
          cursor: 'pointer',
        }}>
        <style>{`
          @keyframes pv-progress {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
          }
        `}</style>
        {/* Stages — crossfade */}
        {[0, 1, 2, 3].map((i) => (
          <div key={i} style={{
            position: 'absolute', inset: 0,
            opacity: stage === i ? 1 : 0,
            transition: 'opacity 0.5s ease',
            pointerEvents: 'none',
          }}>
            <ImplantStage stage={i} />
          </div>
        ))}

        {/* Top-left stage label */}
        <div style={{
          position: 'absolute',
          top: 10, left: 12,
          background: 'rgba(26,26,26,0.78)',
          color: '#FBF6EC',
          backdropFilter: 'blur(8px)',
          padding: '4px 10px',
          borderRadius: 999,
          fontSize: 10,
          fontFamily: 'Geist Mono',
          letterSpacing: '0.02em',
          display: 'flex',
          alignItems: 'center',
          gap: 6,
        }}>
          <span style={{ color: '#E6CC8A' }}>0{stage + 1}</span>
          <span style={{ color: 'rgba(245,241,232,0.5)' }}>/</span>
          <span>04</span>
          <span style={{ color: 'rgba(245,241,232,0.5)', margin: '0 2px' }}>·</span>
          <span>{stageMeta[stage].label}</span>
        </div>

        {/* Top-right time/play indicator */}
        <div style={{
          position: 'absolute',
          top: 10, right: 12,
          background: 'rgba(26,26,26,0.78)',
          color: '#FBF6EC',
          padding: '4px 8px',
          borderRadius: 999,
          fontSize: 10,
          fontFamily: 'Geist Mono',
          display: 'flex',
          alignItems: 'center',
          gap: 6,
        }}>
          {paused ? <Icon name="play" size={9} /> : <span style={{
            display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
            background: '#E6CC8A', animation: 'pulse-soft 1.5s ease-in-out infinite',
          }}></span>}
          3D
        </div>

        {/* Progress dots — sit at the very bottom of the image */}
        <div style={{
          position: 'absolute',
          bottom: 10, left: 12, right: 12,
          display: 'flex', gap: 4,
        }}>
          {[0, 1, 2, 3].map((i) => {
            const isPast = i < stage;
            const isCurrent = i === stage;
            return (
              <button
                key={i}
                onClick={(e) => { e.stopPropagation(); jumpTo(i); }}
                style={{
                  flex: 1,
                  height: 3,
                  borderRadius: 999,
                  border: 'none',
                  padding: 0,
                  cursor: 'pointer',
                  background: 'rgba(255,255,255,0.55)',
                  position: 'relative',
                  overflow: 'hidden',
                  boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
                }}
                aria-label={`Jump to stage ${i + 1}`}
              >
                <div
                  key={`${stage}-${i}-${paused}`}
                  style={{
                    position: 'absolute',
                    inset: 0,
                    background: '#1A1A1A',
                    transformOrigin: 'left',
                    transform: isPast ? 'scaleX(1)' : 'scaleX(0)',
                    animation: isCurrent && !paused ? `pv-progress ${STAGE_MS}ms linear forwards` : 'none',
                  }}></div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Stage caption — below the image so it never covers the visual */}
      <div style={{
        marginTop: 10,
        padding: '8px 0',
        fontSize: 12,
        lineHeight: 1.5,
        color: '#3a3a3a',
        display: 'flex',
        alignItems: 'flex-start',
        gap: 10,
      }}>
        <span style={{
          fontFamily: 'Geist Mono',
          fontSize: 10,
          color: '#8B6B2E',
          fontWeight: 600,
          flexShrink: 0,
          paddingTop: 1,
          letterSpacing: '0.04em',
          textTransform: 'uppercase',
        }}>
          Step {stage + 1}
        </span>
        <span style={{ flex: 1 }}>
          <strong style={{ color: '#1A1A1A', fontWeight: 600 }}>{stageMeta[stage].label}.</strong>{' '}
          {stageMeta[stage].sub}
        </span>
      </div>
    </div>
  );
};

Object.assign(window, { ImplantCarousel, ImplantStage });