"use client";

import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useRef } from "react";
import Overline from "@/components/ui/Overline";
import Step01 from "../../../public/production/steps/step-01-development-design.webp";
import Step02 from "../../../public/production/steps/step-02-cad-prototyping.webp";
import Step03 from "../../../public/production/steps/step-03-model-making.webp";
import Step04 from "../../../public/production/steps/step-04-casting.webp";
import Step05 from "../../../public/production/steps/step-05-wax-injection.webp";
import Step06 from "../../../public/production/steps/step-06-laser-soldering.webp";
import Step07 from "../../../public/production/steps/step-07-filing-polishing.webp";
import Step08 from "../../../public/production/steps/step-08-setting.webp";
import Step09 from "../../../public/production/steps/step-09-plating.webp";
import Step10 from "../../../public/production/steps/step-10-enamel-resin.webp";
import Step11 from "../../../public/production/steps/step-11-quality-control.webp";
import Step12 from "../../../public/production/steps/step-12-packaging.webp";

const STEPS = [
  { key: "development", number: "01", img: Step01 },
  { key: "cad", number: "02", img: Step02 },
  { key: "model", number: "03", img: Step03 },
  { key: "casting", number: "04", img: Step04 },
  { key: "wax", number: "05", img: Step05 },
  { key: "laser", number: "06", img: Step06 },
  { key: "filing", number: "07", img: Step07 },
  { key: "setting", number: "08", img: Step08 },
  { key: "plating", number: "09", img: Step09 },
  { key: "enamel", number: "10", img: Step10 },
  { key: "quality", number: "11", img: Step11 },
  { key: "packaging", number: "12", img: Step12 },
] as const;

// Progress segment width as a percentage of the track (matches the mockup).
const SEGMENT = 16.6;

export default function ProcessSteps() {
  const t = useTranslations("ProductionProcessPage.methodology");
  const tCommon = useTranslations("Common");
  const filmRef = useRef<HTMLDivElement>(null);
  const progressRef = useRef<HTMLSpanElement>(null);

  const scroll = (direction: 1 | -1) => {
    const film = filmRef.current;
    if (!film) {
      return;
    }
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const amount = Math.min(film.clientWidth * 0.6, 500);
    film.scrollBy({ left: direction * amount, behavior: reduce ? "auto" : "smooth" });
  };

  const handleScroll = () => {
    const film = filmRef.current;
    const bar = progressRef.current;
    if (!film || !bar) {
      return;
    }
    const max = film.scrollWidth - film.clientWidth;
    const ratio = max > 0 ? film.scrollLeft / max : 0;
    bar.style.left = `${ratio * (100 - SEGMENT)}%`;
  };

  return (
    <section className="py-[76px] lg:py-[104px]">
      {/* Header — stacked/centered on mobile, split row on desktop. */}
      <div className="mx-auto mb-9 flex max-w-[1440px] flex-col items-center gap-[18px] px-6 text-center lg:mb-12 lg:flex-row lg:items-end lg:justify-between lg:px-16 lg:text-left">
        <div>
          <Overline align="responsive" className="mb-[18px]">
            {t("overline")}
          </Overline>
          <h2 className="mb-3.5 font-display text-[31px] font-normal leading-[1.18] text-foreground lg:text-[40px] lg:leading-[1.15]">
            {t("title")}
          </h2>
          <p className="max-w-[560px] text-[15px] leading-[1.65] text-on-surface-variant">
            {t("intro")}
          </p>
        </div>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => scroll(-1)}
            aria-label={tCommon("previous")}
            className="flex size-12 items-center justify-center rounded-full border border-outline-soft text-foreground transition-colors hover:bg-foreground hover:text-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold"
          >
            <ArrowLeftIcon aria-hidden="true" className="size-[17px]" />
          </button>
          <button
            type="button"
            onClick={() => scroll(1)}
            aria-label={tCommon("next")}
            className="flex size-12 items-center justify-center rounded-full border border-outline-soft text-foreground transition-colors hover:bg-foreground hover:text-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold"
          >
            <ArrowRightIcon aria-hidden="true" className="size-[17px]" />
          </button>
        </div>
      </div>

      {/* Filmstrip — full-bleed horizontal scroll-snap. A labelled <section> is
          exposed as a region landmark; tabIndex keeps it keyboard-scrollable. */}
      <section
        ref={filmRef}
        onScroll={handleScroll}
        aria-label={t("listLabel")}
        className="flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth px-6 pb-7 no-scrollbar lg:px-16 lg:pb-8"
        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
        tabIndex={0}
      >
        {STEPS.map((step) => (
          <article
            key={step.key}
            className="group relative flex w-[85vw] shrink-0 snap-start flex-col border border-hairline bg-white lg:w-[clamp(300px,30vw,440px)]"
          >
            <span className="absolute left-4 top-4 z-[2] border border-hairline bg-background px-2.5 py-[5px] text-[11px] font-semibold tracking-[0.1em] text-foreground">
              {step.number}
            </span>
            <div className="relative h-[240px] overflow-hidden border-b border-hairline bg-surface-container lg:h-[300px]">
              <Image
                alt={t(`steps.${step.key}.imageAlt`)}
                src={step.img}
                fill
                sizes="(min-width:1024px) 440px, 85vw"
                className="object-cover transition-transform duration-700 motion-safe:group-hover:scale-105"
              />
            </div>
            <div className="p-7 pb-8">
              <h2 className="font-display text-[21px] leading-[1.3] text-foreground">
                {t(`steps.${step.key}.title`)}
              </h2>
              <p className="mt-3.5 text-[13.5px] leading-[1.6] text-on-surface-variant">
                {t(`steps.${step.key}.body`)}
              </p>
            </div>
          </article>
        ))}
      </section>

      {/* Progress bar — reflects scroll position, decorative. */}
      <div aria-hidden="true" className="mt-4 flex justify-center px-6">
        <div className="relative h-px w-full max-w-[440px] bg-outline-soft">
          <span
            ref={progressRef}
            className="absolute -top-px left-0 h-[3px] w-[16.6%] bg-gold transition-[left] duration-200"
          />
        </div>
      </div>
    </section>
  );
}