"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const historyItems = [
  {
    year: "2004",
    description: "鼎兴电子的生产总部落成，坐落于天安工业村B座6F",
    image: "/history-2004.png",
  },
  {
    year: "2007",
    description:
      "开始与三一重工开始合作，进入三一重工的战略合作供应商名单，并于当年被评为三一优秀供应商。",
    image: "/history-2007.png",
  },
  {
    year: "2008",
    description: "于当年完成管理生产升级，通过9001等质量体系认证",
    image: "/history-2008.png",
  },
  {
    year: "2010",
    description:
      "鼎兴与国内港口机械龙头企业振华重工达成合作，并成为其重要的战略合作伙伴。",
    image: "/history-2010.png",
  },
  {
    year: "2015",
    description:
      "自研挖掘机模拟实验板完成交付，产品性能获三一多方认可，双方技术合作稳步深化",
    image: "/history-2015.png",
  },
  {
    year: "2019",
    description:
      "项目晋级东南大学创新创业大赛复赛，并达成多项院校专业合作，为企业开拓新领域研发筑牢根基。",
    image: "/history-2019.png",
  },
];

const ITEM_WIDTH = 176;
const ITEM_GAP = 53;
const STEP = ITEM_WIDTH + ITEM_GAP;
const VISIBLE_COUNT = 5;

function TimelineItem({
  item,
  isTop,
}: {
  item: (typeof historyItems)[number];
  isTop: boolean;
}) {
  return (
    <div
      className="relative flex h-full shrink-0 flex-col items-center"
      style={{ width: ITEM_WIDTH }}
    >
      {/* Top half */}
      <div className="flex flex-1 flex-col items-center justify-end pb-6">
        {isTop && (
          <>
            <div className="relative h-[117px] w-[176px] overflow-hidden rounded-md">
              <Image
                src={item.image}
                alt={`${item.year} 历史照片`}
                fill
                className="object-cover"
                sizes="176px"
              />
            </div>
            <p className="mt-4 text-[26px] font-bold text-white">{item.year}</p>
            <p className="mt-2 max-w-[176px] text-center text-[12px] leading-normal text-white/90">
              {item.description}
            </p>
          </>
        )}
      </div>

      {/* Timeline dot */}
      <div className="size-3 shrink-0 rounded-full bg-white" />

      {/* Bottom half */}
      <div className="flex flex-1 flex-col items-center justify-start pt-6">
        {!isTop && (
          <>
            <div className="relative h-[117px] w-[176px] overflow-hidden rounded-md">
              <Image
                src={item.image}
                alt={`${item.year} 历史照片`}
                fill
                className="object-cover"
                sizes="176px"
              />
            </div>
            <p className="mt-4 text-[26px] font-bold text-white">{item.year}</p>
            <p className="mt-2 max-w-[176px] text-center text-[12px] leading-normal text-white/90">
              {item.description}
            </p>
          </>
        )}
      </div>
    </div>
  );
}

export function DevelopmentHistory() {
  const [index, setIndex] = useState(0);
  const maxIndex = Math.max(0, historyItems.length - VISIBLE_COUNT);

  const canPrev = index > 0;
  const canNext = index < maxIndex;

  return (
    <section className="relative isolate h-[828px] overflow-hidden bg-[#1d1d1d]">
      {/* Background */}
      <Image
        src="/history-bg.png"
        alt=""
        fill
        className="object-cover opacity-50"
        sizes="100vw"
        aria-hidden
      />
      <div className="absolute inset-0 bg-black/50" />

      <div className="relative z-10 mx-auto flex h-full max-w-[1443px] flex-col items-center justify-center px-6">
        <h2 className="text-[26px] font-bold text-white">发展历程</h2>

        <div className="relative mt-16 w-full max-w-[1046px]">
          {/* Timeline line */}
          <div className="absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-white/30" />

          {/* Items */}
          <div className="overflow-hidden">
            <div
              className="flex transition-transform duration-500 ease-in-out"
              style={{
                transform: `translateX(-${index * STEP}px)`,
                gap: ITEM_GAP,
              }}
            >
              {historyItems.map((item, i) => (
                <TimelineItem key={item.year} item={item} isTop={i % 2 === 0} />
              ))}
            </div>
          </div>

          {/* Navigation */}
          <Button
            variant="outline"
            size="icon"
            onClick={() => setIndex((v) => Math.max(0, v - 1))}
            disabled={!canPrev}
            className={cn(
              "absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-white/30 bg-transparent text-white hover:bg-white/10",
              !canPrev && "opacity-30",
            )}
          >
            <ChevronLeft className="size-5" />
            <span className="sr-only">上一个</span>
          </Button>

          <Button
            variant="outline"
            size="icon"
            onClick={() => setIndex((v) => Math.min(maxIndex, v + 1))}
            disabled={!canNext}
            className={cn(
              "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 rounded-full border-white/30 bg-transparent text-white hover:bg-white/10",
              !canNext && "opacity-30",
            )}
          >
            <ChevronRight className="size-5" />
            <span className="sr-only">下一个</span>
          </Button>
        </div>
      </div>
    </section>
  );
}
