"use client"

import { useState } from "react"
import type { SaflProcessData } from "@/lib/strapi/types"
import { SectionBadge, ArrowButton } from "./shared"

export default function SaflProcess({ data }: { data: SaflProcessData }) {
  const [activeProcess, setActiveProcess] = useState(0)

  if (data.steps.length === 0) return null
  const step = data.steps[activeProcess]

  return (
    <section className="bg-white w-full px-4 lg:px-[72px] pb-[50px]">
      <div className="max-w-[1296px] mx-auto flex flex-col gap-5 lg:gap-12">
        <SectionBadge label={data.badge} variant="gray" icon={data.badgeIcon} />

        <div className="flex flex-col lg:flex-row gap-5 lg:gap-8 items-stretch">
          {/* Left: Process image */}
          <div className="flex-1 h-[261px] lg:h-auto min-h-0 lg:min-h-[438px] rounded-[15px] lg:rounded-[16px] overflow-hidden">
            {step.image ? (
              <img
                key={activeProcess}
                src={step.image}
                alt={step.title}
                loading="lazy"
                className="w-full h-full object-cover rounded-[15px] lg:rounded-[16px] animate-fade-in"
              />
            ) : null}
          </div>

          {/* Right: Process details */}
          <div
            className="sp-card relative w-full lg:w-[627px] rounded-[16px] border border-[#e5e7eb] px-4 py-5 lg:p-8 flex flex-col justify-between overflow-hidden"
            style={{
              background:
                "radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)",
            }}
          >
            <div className="relative z-10 flex flex-col gap-3 lg:gap-4">
              {/* Step indicators */}
              <div className="flex items-center gap-0">
                {data.steps.map((_, i) => (
                  <button key={i} onClick={() => setActiveProcess(i)} className="relative">
                    <div
                      className={`w-[48px] h-[48px] lg:w-[66px] lg:h-[66px] rounded-full border flex items-center justify-center transition-colors duration-300 ${
                        i === activeProcess ? "border-[#9c1d35]" : "border-[rgba(156,29,53,0.05)]"
                      }`}
                    >
                      <span className="text-[#0a0a0a] text-[16px] leading-[24px]">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                    </div>
                  </button>
                ))}
              </div>
            </div>

            <div className="relative z-10 flex flex-col gap-[30px] lg:gap-4 mt-[30px] lg:mt-0">
              {/* Step title + description */}
              <div key={`content-${activeProcess}`} className="flex flex-col gap-2 animate-fade-in">
                <h3 className="font-accent text-[#20262b] text-[20px] lg:text-[24px] leading-[36px]">
                  {step.title}
                </h3>
                <p className="text-[rgba(35,35,35,0.6)] lg:text-[#20262b]/80 text-[16px] leading-[1.5] lg:leading-[24px]">
                  {step.description}
                </p>
              </div>

              {/* Navigation arrows */}
              <div className="flex items-center gap-[13px] lg:gap-2">
                <ArrowButton
                  direction="left"
                  disabled={activeProcess === 0}
                  onClick={() => setActiveProcess(Math.max(0, activeProcess - 1))}
                />
                <ArrowButton
                  direction="right"
                  disabled={activeProcess === data.steps.length - 1}
                  onClick={() =>
                    setActiveProcess(Math.min(data.steps.length - 1, activeProcess + 1))
                  }
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}