"use client";

import { useState } from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";

const longitudinalBarData = [
  { label: "Aug", value: 45 },
  { label: "Sep", value: 62 },
  { label: "Oct", value: 55 },
  { label: "Nov", value: 78 },
  { label: "Dec", value: 70 },
  { label: "Jan", value: 85 },
  { label: "Feb", value: 92 },
];

function LongitudinalMiniChart() {
  const maxVal = 100;
  const cW = 244, cH = 140;
  const pad = { top: 8, right: 12, bottom: 18, left: 30 };
  const iW = cW - pad.left - pad.right;
  const iH = cH - pad.top - pad.bottom;
  const bH = 10;
  const rowSpacing = iH / longitudinalBarData.length;
  const yPos = (i: number) => pad.top + rowSpacing / 2 - bH / 2 + i * rowSpacing;
  const barWidth = (v: number) => Math.max(1, (v / maxVal) * iW);
  const xTick = (tick: number) => pad.left + (tick / maxVal) * iW;
  const ticks = [0, 25, 50, 75, 100];

  return (
    <svg viewBox={`0 0 ${cW} ${cH}`} className="w-full h-auto">
      {ticks.map((tick) => (
        <g key={tick}>
          <line
            x1={xTick(tick)} y1={pad.top}
            x2={xTick(tick)} y2={pad.top + iH}
            stroke="#E5E7EB" strokeDasharray="4,4"
          />
          <text
            x={xTick(tick)}
            y={cH - 4}
            textAnchor="middle"
            fontSize="7"
            fill="#9CA3AF"
          >
            {tick}
          </text>
        </g>
      ))}
      {longitudinalBarData.map((d, i) => (
        <g key={i}>
          <rect
            x={pad.left}
            y={yPos(i)}
            width={barWidth(d.value)}
            height={bH}
            rx="4"
            fill={i === longitudinalBarData.length - 1 ? "#3B9EC9" : "#E8F4F8"}
          />
          <text
            x={pad.left - 4}
            y={yPos(i) + bH / 2}
            textAnchor="end"
            dominantBaseline="middle"
            fontSize="7"
            fill="#9CA3AF"
          >
            {d.label}
          </text>
        </g>
      ))}
    </svg>
  );
}

export default function HowItWorks() {
  const t = useTranslations("howItWorks");
  const [activePractitionerStep, setActivePractitionerStep] = useState(0);

  const practitionerSteps = [
    {
      title: t("practitioner.step1.title"),
      description: t("practitioner.step1.description"),
    },
    {
      title: t("practitioner.step2.title"),
      description: t("practitioner.step2.description"),
    },
    {
      title: t("practitioner.step3.title"),
      description: t("practitioner.step3.description"),
    },
    {
      title: t("practitioner.step4.title"),
      description: t("practitioner.step4.description"),
    },
  ];

  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
            {t("title")}
          </h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            {t("subtitle")}
          </p>
        </div>

        {/* For Practitioners Section */}
        <div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
            {/* Image - Left Side */}
            <div className="relative">
              <Image
                src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=600&h=450&fit=crop&q=80"
                alt="Doctor with laptop"
                width={600}
                height={450}
                className="w-full rounded-2xl shadow-lg"
              />

              {/* Step 1: Add Client Details Modal */}
              {activePractitionerStep === 0 && (
                <>
                  <div className="absolute -right-4 bottom-6 bg-white rounded-xl shadow-xl p-4 w-56 transition-all duration-300">
                    <p className="text-xs font-semibold text-gray-700 mb-3">{t("popups.step1.title")}</p>
                    <div className="space-y-2">
                      <div>
                        <p className="text-[10px] text-gray-500">{t("popups.step1.clientName")}</p>
                        <div className="h-6 bg-gray-100 rounded border border-gray-200"></div>
                      </div>
                      <div>
                        <p className="text-[10px] text-gray-500">{t("popups.step1.email")}</p>
                        <div className="h-6 bg-gray-100 rounded border border-gray-200"></div>
                      </div>
                      <div>
                        <p className="text-[10px] text-gray-500">{t("popups.step1.number")}</p>
                        <div className="h-6 bg-gray-100 rounded border border-gray-200"></div>
                      </div>
                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <p className="text-[10px] text-gray-500">{t("popups.step1.age")}</p>
                          <div className="h-6 bg-gray-100 rounded border border-gray-200"></div>
                        </div>
                        <div>
                          <p className="text-[10px] text-gray-500">{t("popups.step1.gender")}</p>
                          <div className="h-6 bg-gray-100 rounded border border-gray-200"></div>
                        </div>
                      </div>
                      <button className="w-full mt-2 py-1.5 bg-[#3B9EC9] text-white text-xs rounded-md">
                        {t("popups.step1.addButton")}
                      </button>
                    </div>
                  </div>
                  <div className="absolute top-4 right-12 bg-[#3B9EC9] text-white text-xs px-3 py-1.5 rounded-md shadow-md">
                    {t("popups.step1.badge")}
                  </div>
                </>
              )}

              {/* Step 2: Screening Invitation Modal */}
              {activePractitionerStep === 1 && (
                <>
                  <div className="absolute -right-4 bottom-6 bg-white rounded-xl shadow-xl p-4 w-60 transition-all duration-300">
                    <div className="flex items-center gap-2 mb-3">
                      <div className="w-5 h-5 bg-[#3B9EC9] rounded flex items-center justify-center">
                        <span className="text-white text-[8px] font-bold">M</span>
                      </div>
                      <span className="text-sm font-bold text-gray-800">MBHS</span>
                    </div>
                    <p className="text-xs font-semibold text-gray-800 mb-2">{t("popups.step2.title")}</p>
                    <p className="text-[9px] text-gray-500 mb-2">{t("popups.step2.greeting")}</p>
                    <p className="text-[9px] text-gray-500 mb-3">{t("popups.step2.body")}</p>
                    <p className="text-[9px] font-semibold text-gray-700 mb-1">{t("popups.step2.whatToExpect")}</p>
                    <ul className="text-[8px] text-gray-500 space-y-0.5 mb-3">
                      <li>• {t("popups.step2.bullet1")}</li>
                      <li>• {t("popups.step2.bullet2")}</li>
                      <li>• {t("popups.step2.bullet3")}</li>
                    </ul>
                    <button className="w-full py-1.5 bg-[#3B9EC9] text-white text-xs rounded-full">
                      {t("popups.step2.startButton")}
                    </button>
                  </div>
                  <div className="absolute top-4 right-12 bg-[#3B9EC9] text-white text-xs px-3 py-1.5 rounded-md shadow-md">
                    {t("popups.step2.badge")}
                  </div>
                </>
              )}

              {/* Step 3: Screening Question Modal */}
              {activePractitionerStep === 2 && (
                <>
                  <div className="absolute -right-4 bottom-6 bg-white rounded-xl shadow-xl p-4 w-64 transition-all duration-300">
                    <div className="flex items-center justify-between mb-3">
                      <p className="text-[10px] text-gray-500">{t("popups.step3.questionProgress")}</p>
                      <p className="text-[10px] text-gray-400">{t("popups.step3.percentComplete")}</p>
                    </div>
                    <p className="text-sm font-medium text-gray-800 mb-3">{t("popups.step3.sampleQuestion")}</p>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2 px-3 py-2 bg-[#3B9EC9] text-white rounded-full text-xs">
                        <div className="w-3 h-3 border-2 border-white rounded-full bg-white"></div>
                        <span>{t("popups.step3.answer0")}</span>
                      </div>
                      <div className="flex items-center gap-2 px-3 py-2 bg-gray-50 text-gray-600 rounded-full text-xs">
                        <div className="w-3 h-3 border border-gray-300 rounded-full"></div>
                        <span>{t("popups.step3.answer1")}</span>
                      </div>
                      <div className="flex items-center gap-2 px-3 py-2 bg-gray-50 text-gray-600 rounded-full text-xs">
                        <div className="w-3 h-3 border border-gray-300 rounded-full"></div>
                        <span>{t("popups.step3.answer2")}</span>
                      </div>
                      <div className="flex items-center gap-2 px-3 py-2 bg-gray-50 text-gray-600 rounded-full text-xs">
                        <div className="w-3 h-3 border border-gray-300 rounded-full"></div>
                        <span>{t("popups.step3.answer3")}</span>
                      </div>
                    </div>
                    <div className="flex items-center justify-between mt-4">
                      <button className="px-4 py-1.5 border border-gray-200 text-gray-600 text-xs rounded-full flex items-center gap-1">
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
                        {t("popups.step3.previous")}
                      </button>
                      <button className="px-4 py-1.5 bg-[#3B9EC9] text-white text-xs rounded-full flex items-center gap-1">
                        {t("popups.step3.nextQuestion")}
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
                      </button>
                    </div>
                  </div>
                  <div className="absolute top-4 right-12 bg-[#3B9EC9] text-white text-xs px-3 py-1.5 rounded-md shadow-md">
                    {t("popups.step3.badge")}
                  </div>
                </>
              )}

              {/* Step 4: Longitudinal Bar Chart */}
              {activePractitionerStep === 3 && (
                <>
                  <div className="absolute -right-4 bottom-6 bg-white rounded-xl shadow-xl p-4 w-72 transition-all duration-300">
                    <div className="flex items-center justify-between mb-2">
                      <p className="text-xs font-semibold text-gray-700">{t("chart.clientsOverTime")}</p>
                      <span className="text-[9px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded">{t("chart.monthly")}</span>
                    </div>
                    <LongitudinalMiniChart />
                  </div>
                  <div className="absolute top-4 right-12 bg-[#3B9EC9] text-white text-xs px-3 py-1.5 rounded-md shadow-md">
                    {t("popups.step4.badge")}
                  </div>
                </>
              )}
            </div>

            {/* Steps - Right Side */}
            <div>
              <div className="flex items-center gap-2 mb-6">
                <span className="px-4 py-2 bg-[#3B9EC9] text-white text-sm font-medium rounded-full">
                  {t("forPractitioners")}
                </span>
              </div>

              <div className="relative">
                {/* Vertical Timeline Line */}
                <div className="absolute left-[5px] top-2 bottom-2 w-[2px] border-l-2 border-dashed border-[#3B9EC9]/40"></div>

                <div className="space-y-8">
                  {practitionerSteps.map((step, index) => (
                    <div
                      key={index}
                      className={`flex gap-5 cursor-pointer transition-all duration-200 ${
                        activePractitionerStep === index ? "opacity-100" : "opacity-60 hover:opacity-80"
                      }`}
                      onClick={() => setActivePractitionerStep(index)}
                    >
                      {/* Timeline Dot */}
                      <div className={`flex-shrink-0 w-3 h-3 rounded-full mt-1.5 relative z-10 transition-all duration-200 ${
                        activePractitionerStep === index
                          ? "bg-[#3B9EC9] scale-125"
                          : "bg-[#3B9EC9]/50"
                      }`}></div>
                      <div>
                        <h3 className={`text-lg font-bold mb-1 transition-colors duration-200 ${
                          activePractitionerStep === index ? "text-[#3B9EC9]" : "text-gray-900"
                        }`}>
                          {step.title}
                        </h3>
                        <p className="text-sm text-gray-600 leading-relaxed">
                          {step.description}
                        </p>
                        {index === 3 && (
                          <Link
                            href="/sample-report/therapist"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-block mt-2 text-[#3B9EC9] text-sm font-medium underline"
                          >
                            {t("viewSampleReport")}
                          </Link>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}