"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Button } from "@/src/components/Button";
import { DecodeText } from "@/src/components/bits/DecodeText";
import { PathScene } from "@/src/components/illustrations/PathScenes";
import { SERVICE_PATHS, type ServicePath } from "@/src/content/paths";

const MONO = "font-mono text-[11px] uppercase tracking-[0.2em] text-slate-500";
const STEP_MS = 4800;

/**
 * PathStory: the four steps of one path, each with a drawing that explains it.
 * The steps advance on their own until the visitor picks one.
 */
const PathStory: React.FC<{ path: ServicePath; active: boolean }> = ({
  path,
  active,
}) => {
  const [step, setStep] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const ref = React.useRef<HTMLDivElement>(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const observer = new IntersectionObserver(
      ([entry]) => setInView(entry?.isIntersecting ?? false),
      { threshold: 0.35 },
    );
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  React.useEffect(() => {
    if (!active || !auto || !inView) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const timer = window.setInterval(
      () => setStep((current) => (current + 1) % path.steps.length),
      STEP_MS,
    );
    return () => window.clearInterval(timer);
  }, [active, auto, inView, path.steps.length]);

  const current = path.steps[step];

  return (
    <div ref={ref} className="grid grid-cols-1 gap-8 md:grid-cols-12 md:gap-12">
      <div className="md:order-2 md:col-span-7">
        <div className="relative overflow-hidden rounded-3xl bg-slate-900 md:sticky md:top-28">
          <div className="flex items-center justify-between border-b border-slate-800 px-5 py-4 md:px-7">
            <DecodeText
              key={current?.title}
              text={current?.title ?? ""}
              className="font-mono text-[11px] uppercase tracking-[0.2em] text-slate-300"
            />
            <span className="font-mono text-[11px] tracking-[0.2em] text-slate-500">
              {step + 1} / {path.steps.length}
            </span>
          </div>
          <div className="px-2 py-4 md:px-10 md:py-8">
            <PathScene
              pathId={path.id}
              step={step}
              title={current ? `${current.title}. ${current.text}` : path.need}
            />
          </div>
        </div>
      </div>

      <ol className="m-0 list-none p-0 md:order-1 md:col-span-5">
        {path.steps.map((item, index) => {
          const selected = index === step;
          return (
            <li key={item.title}>
              <button
                type="button"
                aria-current={selected ? "step" : undefined}
                onClick={() => {
                  setStep(index);
                  setAuto(false);
                }}
                className={`relative flex w-full gap-5 border-t py-6 text-left transition-colors duration-300 md:gap-6 ${
                  selected ? "border-slate-900" : "border-slate-200"
                }`}
              >
                {selected && auto && inView && (
                  <motion.span
                    key={`${path.id}-${index}`}
                    className="absolute left-0 top-[-1px] h-px bg-slate-900"
                    initial={{ width: "0%" }}
                    animate={{ width: "100%" }}
                    transition={{ duration: STEP_MS / 1000, ease: "linear" }}
                    aria-hidden="true"
                  />
                )}
                <span
                  className={`w-8 shrink-0 font-sans text-3xl font-black leading-none tracking-tighter transition-colors duration-300 md:text-4xl ${
                    selected ? "text-slate-900" : "text-slate-200"
                  }`}
                >
                  {index + 1}
                </span>
                <span>
                  <span
                    className={`block font-sans text-lg font-bold tracking-tight transition-colors duration-300 md:text-xl ${
                      selected ? "text-slate-900" : "text-slate-500"
                    }`}
                  >
                    {item.title}
                  </span>
                  <span
                    className={`mt-1.5 block font-sans text-base leading-relaxed transition-colors duration-300 ${
                      selected ? "text-slate-600" : "text-slate-400"
                    }`}
                  >
                    {item.text}
                  </span>
                </span>
              </button>
            </li>
          );
        })}
      </ol>
    </div>
  );
};

/**
 * PathPicker: the visitor says what they need and gets the answer for exactly that:
 * what they get, how it runs, what it costs, what to do next.
 * All three panels stay in the DOM so the content is readable without JavaScript.
 */
export const PathPicker: React.FC = () => {
  const [activeId, setActiveId] = React.useState(SERVICE_PATHS[0]?.id ?? "");

  return (
    <div>
      <div
        role="tablist"
        aria-label="What do you need?"
        className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 lg:gap-4"
      >
        {SERVICE_PATHS.map((path, index) => {
          const selected = path.id === activeId;
          return (
            <button
              key={path.id}
              type="button"
              role="tab"
              id={`path-tab-${path.id}`}
              aria-selected={selected}
              aria-controls={`path-panel-${path.id}`}
              onClick={() => setActiveId(path.id)}
              className={`bit-card group flex h-full flex-col justify-between rounded-3xl border p-5 text-left transition-all duration-300 md:p-7 ${
                selected
                  ? "border-slate-900 bg-slate-900 text-white"
                  : "border-slate-200 bg-white text-slate-900 hover:-translate-y-1 hover:border-slate-400"
              }`}
            >
              <span className="font-mono text-[11px] tracking-[0.2em] text-slate-400">
                0{index + 1}
              </span>
              <span className="mt-3 block font-sans text-xl font-bold leading-tight tracking-tight md:mt-10 md:text-2xl">
                {path.need}
              </span>
              <span
                className={`mt-2 block font-sans text-sm leading-relaxed md:mt-4 md:text-base ${selected ? "text-slate-300" : "text-slate-500"}`}
              >
                {path.forWhom}
              </span>
            </button>
          );
        })}
      </div>

      {SERVICE_PATHS.map((path) => {
        const selected = path.id === activeId;
        return (
          <div
            key={path.id}
            role="tabpanel"
            id={`path-panel-${path.id}`}
            aria-labelledby={`path-tab-${path.id}`}
            hidden={!selected}
            className="mt-12 md:mt-20"
          >
            <motion.div
              key={selected ? "on" : "off"}
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.35 }}
            >
              <div className="grid grid-cols-1 gap-12 md:grid-cols-12 md:gap-12">
                <div className="md:col-span-7">
                  <h3 className="m-0 font-sans text-3xl font-bold leading-[1.05] tracking-tighter text-slate-900 md:text-5xl">
                    {path.headline}
                  </h3>
                  <p className="m-0 mt-6 max-w-2xl font-sans text-lg leading-relaxed text-slate-500 md:text-xl">
                    {path.intro}
                  </p>
                </div>
                <div className="md:col-span-5">
                  <p className={`${MONO} m-0`}>What you get</p>
                  <ul className="m-0 mt-4 list-none p-0">
                    {path.youGet.map((item) => (
                      <li
                        key={item}
                        className="flex gap-4 border-t border-slate-200 py-4 font-sans text-base text-slate-900 md:text-lg"
                      >
                        <span
                          className="mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-900"
                          aria-hidden="true"
                        />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div className="mt-14 md:mt-24">
                <p className={`${MONO} m-0 mb-6`}>How it runs</p>
                <PathStory path={path} active={selected} />
              </div>

              <div className="mt-12 rounded-3xl bg-slate-50 p-6 md:mt-16 md:p-10">
                <p className={`${MONO} m-0`}>What it costs</p>
                <div className="mt-6 grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-12">
                  <div className="md:col-span-6">
                    <p className="m-0 font-sans text-2xl font-bold leading-tight tracking-tight text-slate-900 md:text-4xl">
                      {path.pricingModel}
                    </p>
                    <p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-500 md:text-lg">
                      {path.pricingText}
                    </p>
                  </div>
                  <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:col-span-6">
                    {path.prices.map((price) => (
                      <div key={price.label}>
                        <p className="m-0 font-sans text-base text-slate-500 md:text-lg">
                          {price.label}
                        </p>
                        <p className="m-0 mt-2 font-sans text-3xl font-black tracking-tighter text-slate-900 md:text-5xl">
                          {price.amount}
                        </p>
                        <p className={`${MONO} m-0 mt-2`}>{price.note}</p>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="mt-10 flex flex-col gap-6 border-t border-slate-200 pt-8 md:flex-row md:items-center md:justify-between">
                  <p className="m-0 max-w-2xl font-sans text-base leading-relaxed text-slate-500">
                    {path.smallPrint}
                  </p>
                  <Button href="#contact" size="large">
                    {path.cta}
                  </Button>
                </div>
              </div>
            </motion.div>
          </div>
        );
      })}
    </div>
  );
};