import { useEffect } from 'react'

export function SaveBookAnimation({ onDone }: { onDone: () => void }) {
  useEffect(() => {
    const t = setTimeout(onDone, 2900)
    return () => clearTimeout(t)
  }, [onDone])

  return (
    <div className="sba-overlay" aria-hidden="true">
      <div className="sba-wrap">
        <svg viewBox="0 0 260 185" fill="none" xmlns="http://www.w3.org/2000/svg" className="sba-svg">
          {/* Drop shadow */}
          <ellipse className="sba-shadow" cx="130" cy="172" rx="74" ry="9" fill="rgba(34,197,94,0.14)" />

          {/* LEFT PAGE */}
          <g className="sba-left-group">
            <rect x="22" y="18" width="98" height="140" rx="4" fill="#ffffff" stroke="#d4e8d4" strokeWidth="1.5" />
            <line x1="34" y1="50"  x2="108" y2="50"  stroke="#edf7ed" strokeWidth="1" />
            <line x1="34" y1="66"  x2="108" y2="66"  stroke="#edf7ed" strokeWidth="1" />
            <line x1="34" y1="82"  x2="108" y2="82"  stroke="#edf7ed" strokeWidth="1" />
            <line x1="34" y1="98"  x2="108" y2="98"  stroke="#edf7ed" strokeWidth="1" />
            <line x1="34" y1="114" x2="108" y2="114" stroke="#edf7ed" strokeWidth="1" />
            <line x1="34" y1="130" x2="108" y2="130" stroke="#edf7ed" strokeWidth="1" />
          </g>

          {/* SPINE */}
          <g className="sba-spine">
            <rect x="119" y="16" width="7" height="144" rx="2.5" fill="#22c55e" opacity="0.45" />
          </g>

          {/* RIGHT PAGE (writing lines live here — folds independently) */}
          <g className="sba-right-group">
            <rect x="126" y="18" width="98" height="140" rx="4" fill="#f7fdf5" stroke="#d4e8d4" strokeWidth="1.5" />
            <line className="sba-line sba-line-1" x1="138" y1="50"  x2="212" y2="50"  stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" />
            <line className="sba-line sba-line-2" x1="138" y1="72"  x2="212" y2="72"  stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" />
            <line className="sba-line sba-line-3" x1="138" y1="94"  x2="202" y2="94"  stroke="#16a34a" strokeWidth="2.5" strokeLinecap="round" />
            <line className="sba-line sba-line-4" x1="138" y1="116" x2="195" y2="116" stroke="#16a34a" strokeWidth="2.5" strokeLinecap="round" />
          </g>

          {/* PEN — independent so it doesn't fold with the page */}
          <g className="sba-pen">
            {/* body */}
            <rect x="-3.5" y="-24" width="7" height="22" rx="2.5" fill="#374151" />
            {/* metal band */}
            <rect x="-3.5" y="-5"  width="7" height="3"  fill="#9ca3af" />
            {/* nib */}
            <polygon points="-3.5,-2 3.5,-2 0,7" fill="#f59e0b" />
            {/* ink dot */}
            <circle cx="0" cy="7" r="1.8" fill="#15803d" />
          </g>

          {/* CLOSED BOOK — hidden until pages fold away */}
          <g className="sba-closed-book">
            {/* spine side */}
            <rect x="55"  y="18" width="150" height="140" rx="7" fill="#15803d" />
            {/* cover face */}
            <rect x="63"  y="18" width="135" height="140" rx="5" fill="#22c55e" />
            {/* spine shadow */}
            <rect x="55"  y="18" width="10"  height="140" rx="4" fill="rgba(0,0,0,0.18)" />
            {/* decorative ruled lines */}
            <line x1="83" y1="76"  x2="183" y2="76"  stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" />
            <line x1="83" y1="93"  x2="183" y2="93"  stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" />
            <line x1="83" y1="110" x2="170" y2="110" stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" />
            {/* checkmark */}
            <path className="sba-check" d="M96 90 L115 109 L162 62" stroke="white" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
          </g>
        </svg>
      </div>
    </div>
  )
}
