import { cn } from "@/lib/utils";
import {
  ClipboardList,
  ShieldCheck,
  Syringe,
  HeartPulse,
  GraduationCap,
  type LucideIcon,
} from "lucide-react";

type TimelineStep = {
  title: string;
  description: string;
  icon: LucideIcon;
  iconBgColor: string;
};

const TIMELINE_STEPS: TimelineStep[] = [
  {
    title: "Pendaftaran awal vaksin",
    description:
      "Daftar mudah secara online atau datang langsung ke klinik tanpa ribet.",
    icon: ClipboardList,
    iconBgColor: "#26FB9B",
  },
  {
    title: "Skrining dengan waktu Singkat",
    description:
      "Pemeriksaan singkat memastikan kondisi pasien aman sebelum menerima vaksin.",
    icon: ShieldCheck,
    iconBgColor: "#FC8E44",
  },
  {
    title: "Penyuntikan untuk Vaksin",
    description:
      "Vaksin diberikan oleh tenaga medis berpengalaman dengan prosedur aman.",
    icon: Syringe,
    iconBgColor: "#D400FF",
  },
  {
    title: "Pemantauan atau Observasi",
    description:
      "Pemantauan singkat setelah vaksin untuk memastikan kondisi pasien tetap stabil.",
    icon: HeartPulse,
    iconBgColor: "#FC4478",
  },
  {
    title: "Mendapatkan Edukasi",
    description:
      "Pasien mendapat penjelasan perawatan dan hal yang perlu diperhatikan pasca vaksin.",
    icon: GraduationCap,
    iconBgColor: "#00A6FF",
  },
];

const TimelineCard = ({
  step,
  position,
}: {
  step: TimelineStep;
  position: "top" | "bottom";
}) => {
  const Icon = step.icon;

  return (
    <div style={{ filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.07))" }}>
      {/* Concave bridge at top (for bottom cards) */}
      {position === "bottom" && (
        <div
          className="h-8 bg-white rounded-t-2xl"
          style={{
            WebkitMaskImage:
              "radial-gradient(circle 30px at 50% 0%, transparent 29px, white 30px)",
            maskImage:
              "radial-gradient(circle 30px at 50% 0%, transparent 29px, white 30px)",
          }}
        />
      )}

      {/* Card content */}
      <div
        className={cn(
          "bg-white p-5 text-left",
          position === "top"
            ? "rounded-2xl rounded-b-none"
            : "rounded-2xl rounded-t-none",
        )}
      >
        <div className="flex flex-col items-start gap-3">
          <div className="flex flex-row gap-2 items-center">
            <h3 className="text-lg font-semibold text-[#003DD8] leading-tight">
              {step.title}
            </h3>
            <div
              className="shrink-0 rounded p-2 flex items-center justify-center w-fit h-fit"
              style={{ backgroundColor: step.iconBgColor }}
            >
              <Icon className="size-5 text-white" />
            </div>
          </div>
          <p className="text-xs text-[#10187B] leading-tight">
            {step.description}
          </p>
        </div>
      </div>

      {/* Concave bridge at bottom (for top cards) */}
      {position === "top" && (
        <div
          className="h-8 bg-white rounded-b-2xl"
          style={{
            WebkitMaskImage:
              "radial-gradient(circle 30px at 50% 100%, transparent 30px, white 30px)",
            maskImage:
              "radial-gradient(circle 30px at 50% 100%, transparent 30px, white 30px)",
          }}
        />
      )}
    </div>
  );
};

const TimelineCircle = ({ number }: { number: number }) => (
  <div className="relative z-10 size-12 rounded-full bg-[#FFCC00] border-[5px] border-white flex items-center justify-center">
    <span className="text-[#594435] font-bold text-lg">{number}</span>
  </div>
);

const ProgramVaksinasiAlurSection = () => {
  return (
    <section className="bg-background-custom p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col gap-10 items-center text-center">
          <div className="flex flex-col gap-5">
            <h2 className="text-text-sub font-semibold text-4xl">
              Alur Vaksinasi di Klinik Adera
            </h2>
            <span className="text-[#383636CC] text-xl">
              Alur Vaksinasi Mudah & Cepat
            </span>
          </div>

          {/* Desktop Timeline — zigzag horizontal */}
          <div
            className="hidden lg:grid grid-cols-5 w-full"
            style={{ gridTemplateRows: "1fr auto 1fr" }}
          >
            {/* Row 1: Top cards (steps 1, 3, 5) */}
            {TIMELINE_STEPS.map((step, i) => (
              <div
                key={`top-${i}`}
                className="flex flex-col justify-end items-stretch px-2"
              >
                {i % 2 === 0 ? (
                  <TimelineCard step={step} position="top" />
                ) : null}
              </div>
            ))}

            {/* Row 2: Timeline line + numbered circles */}
            {TIMELINE_STEPS.map((_, i) => (
              <div
                key={`mid-${i}`}
                className="flex items-center justify-center relative h-7"
              >
                {/* Left line segment */}
                {i > 0 && (
                  <div className="absolute left-0 right-1/2 top-1/2 -translate-y-1/2 h-2 bg-white" />
                )}
                {/* Right line segment */}
                {i < TIMELINE_STEPS.length - 1 && (
                  <div className="absolute left-1/2 right-0 top-1/2 -translate-y-1/2 h-2 bg-white" />
                )}
                <TimelineCircle number={i + 1} />
              </div>
            ))}

            {/* Row 3: Bottom cards (steps 2, 4) */}
            {TIMELINE_STEPS.map((step, i) => (
              <div
                key={`bot-${i}`}
                className="flex flex-col justify-start items-stretch px-2"
              >
                {i % 2 === 1 ? (
                  <TimelineCard step={step} position="bottom" />
                ) : null}
              </div>
            ))}
          </div>

          {/* Mobile Timeline — vertical */}
          <div className="lg:hidden w-full max-w-md">
            <div className="flex flex-col">
              {TIMELINE_STEPS.map((step, i) => {
                const Icon = step.icon;
                const isLast = i === TIMELINE_STEPS.length - 1;

                return (
                  <div key={i} className="flex gap-4">
                    {/* Left: vertical line + circle */}
                    <div className="flex flex-col items-center">
                      {i !== 0 ? (
                        <div className="w-0.5 flex-1 bg-[#D0DEFF]" />
                      ) : (
                        <div className="flex-1" />
                      )}
                      <TimelineCircle number={i + 1} />
                      {!isLast ? (
                        <div className="w-0.5 flex-1 bg-[#D0DEFF]" />
                      ) : (
                        <div className="flex-1" />
                      )}
                    </div>

                    {/* Right: card */}
                    <div className="flex-1 py-3">
                      <div
                        className="bg-white rounded-2xl p-5 text-left"
                        style={{
                          boxShadow: "0px 2px 8px rgba(0,0,0,0.07)",
                        }}
                      >
                        <div className="flex justify-between items-start gap-3">
                          <div className="flex flex-col gap-2">
                            <h3 className="text-base font-bold text-foreground leading-tight">
                              {step.title}
                            </h3>
                            <p className="text-sm text-[#383636CC] leading-relaxed">
                              {step.description}
                            </p>
                          </div>
                          <div
                            className="shrink-0 rounded-xl p-2 flex items-center justify-center"
                            style={{ backgroundColor: step.iconBgColor }}
                          >
                            <Icon className="size-4 text-white" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiAlurSection;