import type { ReactNode } from "react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { Container } from "@/components/ui/container";
import { SectionHead } from "@/components/ui/section-head";
import { cn } from "@/lib/utils";

import { PipelineConnector } from "./connector";

const Circle = ({
  className,
  children,
}: {
  className?: string;
  children?: ReactNode;
}) => (
  <div
    className={cn(
      "border-hairline-2 bg-surface-2 z-10 flex size-12 items-center justify-center rounded-full border shadow-[0_8px_24px_-12px_rgba(0,0,0,0.8)]",
      className,
    )}
  >
    {children}
  </div>
);

type Step = Dictionary["pipeline"]["steps"][number];

// Horizontal connector: a base line through the step centres with a single
// gradient pulse sweeping across uniformly (2.6s — matching the Problem beam).
const PipelineBeam = ({ steps }: { steps: readonly Step[] }) => {
  // First/last circle centres sit at (1/2N) and (1 - 1/2N) of the width.
  const inset = `${(1 / (2 * steps.length)) * 100}%`;

  return (
    <div className="relative w-full py-10">
      {/* connector line aligned with the circle centres (size-14 → 68px) */}
      <PipelineConnector inset={inset} />

      <div className="relative flex flex-row items-start justify-between gap-3">
        {steps.map((step, idx) => (
          <div
            key={step.title}
            className="flex flex-1 flex-col items-center gap-3 text-center"
          >
            <Circle className="border-brand-blue/40 size-14">
              <span className="text-brand-blue text-sm font-bold">
                {idx + 1}
              </span>
            </Circle>
            <div>
              <h3 className="text-ink-1 text-sm font-bold">{step.title}</h3>
              <p className="text-ink-3 mt-1 text-xs">{step.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export const Pipeline = ({ dict }: { dict: Dictionary["pipeline"] }) => {
  return (
    <section className="relative py-10 md:py-20 lg:py-32">
      <Container>
        <SectionHead
          center
          eyebrow={dict.eyebrow}
          title={dict.title}
          titleGrad={dict.title_grad}
          subtitle={dict.subtitle}
        />

        {/* Desktop: linear flow pipeline */}
        <div className="hidden lg:block">
          <PipelineBeam steps={dict.steps} />
        </div>

        {/* Mobile / tablet: stacked numbered steps */}
        <div className="mt-10 flex flex-col gap-4 lg:hidden">
          {dict.steps.map((step, idx) => (
            <div
              key={step.title}
              className="border-hairline bg-surface flex items-start gap-4 rounded-xl border p-4"
            >
              <span className="border-hairline-2 bg-surface-2 text-brand-blue flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-bold">
                {idx + 1}
              </span>
              <div>
                <h3 className="text-ink-1 text-base font-bold">{step.title}</h3>
                <p className="text-ink-3 mt-1 text-sm">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};