'use client';

import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { SECTION_ORDER } from '../sectionConfig';

const CHART_DELAY_MS = 700;

export default function GrowthChartSection() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const qs = searchParams.toString();
  const suffix = qs ? `?${qs}` : '';

  const [chartVisible, setChartVisible] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => setChartVisible(true), CHART_DELAY_MS);
    return () => clearTimeout(t);
  }, []);

  const handleContinue = () => {
    const idx = SECTION_ORDER.indexOf('growth-chart');
    const next = SECTION_ORDER[idx + 1];
    if (next) router.push(`/onboarding/${next}${suffix}`);
  };

  const nextMonth = new Date();
  nextMonth.setMonth(nextMonth.getMonth() + 1);
  const monthName = nextMonth.toLocaleString('en', { month: 'long' });

  const LINE_PATH =
    'M40 145 C60 130, 88 105, 118 118 C148 130, 172 142, 202 128 C232 112, 258 82, 288 74 C302 72, 310 78, 310 30';
  const FILL_PATH = `${LINE_PATH} L310 165 L40 165 Z`;

  return (
    <main className="growth-page">
      <div className="growth-content">
        <h1 className="growth-title">
          See your connection with Allah grow by <span className="gold">{monthName}</span>
        </h1>

        <div className={`growth-chart ${chartVisible ? 'is-visible' : ''}`}>
          {chartVisible && (
            <>
              <svg viewBox="0 0 380 220" fill="none" preserveAspectRatio="xMidYMid meet">
                {/* Grid lines */}
                <line x1="40" y1="30" x2="340" y2="30" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
                <line x1="40" y1="75" x2="340" y2="75" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
                <line x1="40" y1="120" x2="340" y2="120" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
                <line x1="40" y1="165" x2="340" y2="165" stroke="rgba(255,255,255,0.1)" strokeWidth="1" />

                <defs>
                  <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#e6c26c" stopOpacity="0.65" />
                    <stop offset="100%" stopColor="#e6c26c" stopOpacity="0" />
                  </linearGradient>
                  <clipPath id="chartClip">
                    <rect x="0" y="0" width="40" height="220">
                      <animate
                        attributeName="width"
                        from="40"
                        to="320"
                        dur="1.6s"
                        begin="0.25s"
                        fill="freeze"
                        calcMode="spline"
                        keySplines="0.45 0 0.2 1"
                        keyTimes="0;1"
                        values="40;320"
                      />
                    </rect>
                  </clipPath>
                </defs>

                {/* Gradient fill revealed in sync with the line */}
                <path d={FILL_PATH} fill="url(#chartGrad)" clipPath="url(#chartClip)" />

                {/* Line — draws itself using stroke-dashoffset */}
                <path
                  pathLength="1"
                  d={LINE_PATH}
                  stroke="#e6c26c"
                  strokeWidth="3"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeDasharray="1"
                  strokeDashoffset="1"
                >
                  <animate
                    attributeName="stroke-dashoffset"
                    from="1"
                    to="0"
                    dur="1.6s"
                    begin="0.25s"
                    fill="freeze"
                    calcMode="spline"
                    keySplines="0.45 0 0.2 1"
                    keyTimes="0;1"
                    values="1;0"
                  />
                </path>

                {/* Start dot — hollow circle */}
                <circle cx="40" cy="145" r="6" fill="none" stroke="#D4840E" strokeWidth="2.5" />

                {/* End dot — fades in once the line has arrived */}
                <circle cx="310" cy="30" r="7" fill="#FFC149" stroke="#161310" strokeWidth="3" opacity="0">
                  <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="2s" fill="freeze" />
                </circle>

                {/* Dashed line to label — fades in with the end dot */}
                <line x1="228" y1="30" x2="300" y2="30" stroke="#FFC149" strokeWidth="1.5" strokeDasharray="4 4" opacity="0">
                  <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="2s" fill="freeze" />
                </line>

                {/* Week labels */}
                <text x="40" y="186" fill="#fff" fontSize="12" textAnchor="middle" fontWeight="600">Week 1</text>
                <text x="130" y="186" fill="#fff" fontSize="12" textAnchor="middle" fontWeight="600">Week 2</text>
                <text x="220" y="186" fill="#fff" fontSize="12" textAnchor="middle" fontWeight="600">Week 3</text>
                <text x="310" y="186" fill="#fff" fontSize="12" textAnchor="middle" fontWeight="600">Week 4</text>
              </svg>

              <div className="growth-badge">Your progress in 4 weeks</div>
            </>
          )}
        </div>

        <p className="growth-disclaimer">
          *This chart is for <span style={{ fontWeight: 600 }}>illustrative purposes</span> only
        </p>
      </div>

      <div className="growth-footer">
        <button type="button" className="cta-gold" onClick={handleContinue}>
          Continue
        </button>
      </div>
    </main>
  );
}
