"use client";

import { ScrollReveal } from "@/components/ScrollReveal";
import { useInView } from "@/hooks/useInView";
import { useMockupProgress } from "@/hooks/useMockupProgress";

function LayersIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M12 2L2 7l10 5 10-5-10-5z" />
      <path d="M2 17l10 5 10-5" />
      <path d="M2 12l10 5 10-5" />
    </svg>
  );
}

function SlidersIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
      <circle cx="4" cy="14" r="2" />
      <circle cx="12" cy="12" r="2" />
      <circle cx="20" cy="16" r="2" />
    </svg>
  );
}

function CloudUploadIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M12 16V8M12 8l-3 3M12 8l3 3" />
      <path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.9-1A4 4 0 1 1 17 18H7z" />
    </svg>
  );
}

function ImageIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="3" y="3" width="18" height="18" rx="2" />
      <circle cx="8.5" cy="8.5" r="1.5" />
      <path d="M21 15l-5-5L5 21" />
    </svg>
  );
}

function AudioIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M9 18V5l12-2v13" />
      <circle cx="6" cy="18" r="3" />
      <circle cx="18" cy="16" r="3" />
    </svg>
  );
}

const STEPS = [
  {
    number: 1,
    title: "Single/Batch creation",
    desc: "One image, many audios, each becomes a separate video.",
    Icon: LayersIcon,
  },
  {
    number: 2,
    title: "Per-video settings",
    desc: "Title, tags, privacy, and category for every upload.",
    Icon: SlidersIcon,
  },
  {
    number: 3,
    title: "Direct upload",
    desc: "Connect YouTube once and publish automatically.",
    Icon: CloudUploadIcon,
  },
] as const;

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      aria-hidden="true"
    >
      <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function AppMockup() {
  const phaseOneMs = 3000;
  const phaseTwoMs = 2000;
  const initialWidth = "20%";
  const midWidth = "45%";
  const { ref, inView } = useInView();
  const { phase, processed, transitionMs } = useMockupProgress(inView, phaseOneMs, phaseTwoMs);

  const width = phase === 0 ? initialWidth : phase === 1 ? midWidth : "100%";

  return (
    <div
      ref={ref}
      className="mt-10 overflow-hidden rounded-2xl border border-gray-700/60 bg-surface-dark shadow-2xl shadow-black/40"
    >
      <div className="flex items-center gap-2 border-b border-gray-700/50 px-4 py-3">
        <span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
        <span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
        <span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
      </div>

      <div className="p-6">
        <div className="rounded-xl border border-gray-700/50 bg-surface p-6">
          <div className="grid grid-cols-2 gap-4">
            <div className="mockup-upload-box mockup-upload-box-image flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-600 bg-surface-dark px-4 py-8">
              <ImageIcon className="mockup-icon-image mb-3 h-8 w-8 text-gray-500" />
              <span className="text-xs font-semibold tracking-widest text-gray-500">IMAGE</span>
            </div>
            <div className="mockup-upload-box mockup-upload-box-audio flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-600 bg-surface-dark px-4 py-8">
              <AudioIcon className="mockup-icon-audio mb-3 h-8 w-8 text-gray-500" />
              <span className="text-xs font-semibold tracking-widest text-gray-500">AUDIO</span>
            </div>
          </div>

          <p className="mt-6 text-sm text-gray-400">
            {processed ? (
              "Processed"
            ) : (
              <>
                Processing
                <span className="mockup-dot-1">.</span>
                <span className="mockup-dot-2">.</span>
                <span className="mockup-dot-3">.</span>
              </>
            )}
          </p>
          <div className="mt-2 flex items-center gap-2">
            <div className="relative h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-700">
              <div
                className="relative h-full rounded-full bg-white/90 ease-out"
                style={{
                  width,
                  transition: phase >= 1 ? `width ${transitionMs}ms ease-out` : "none",
                }}
              >
                {!processed && (
                  <span className="mockup-progress-shimmer absolute inset-y-0 w-1/2 rounded-full bg-gradient-to-r from-transparent via-white/50 to-transparent" />
                )}
              </div>
            </div>
            <CheckIcon
              className={`h-4 w-4 shrink-0 text-accent transition-all duration-300 ${
                processed ? "scale-100 opacity-100" : "scale-75 opacity-0"
              }`}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function StepCard({
  number,
  title,
  desc,
  Icon,
}: {
  number: number;
  title: string;
  desc: string;
  Icon: typeof LayersIcon;
}) {
  return (
    <div className="group relative overflow-hidden rounded-2xl border border-gray-700/50 bg-surface transition-all duration-300 hover:border-gray-500 hover:bg-surface-light hover:shadow-xl hover:shadow-black/30">
      <span
        className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 select-none text-[7.5rem] font-bold leading-none text-gray-600/20 transition-all duration-500 ease-out group-hover:left-1/2 group-hover:-translate-x-1/2 group-hover:scale-[1.18] group-hover:text-red-500/25 sm:text-[8.5rem]"
        aria-hidden="true"
      >
        {number}
      </span>

      <div className="relative flex items-center gap-6 px-8 py-9 pl-24 sm:pl-28">
        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-gray-600/50 bg-surface-dark text-gray-400 transition-all duration-300 group-hover:border-red-500/30 group-hover:text-red-400">
          <Icon className="h-7 w-7" />
        </div>
        <div>
          <h3 className="text-lg font-semibold text-white transition-colors duration-300 group-hover:text-red-400 sm:text-xl">
            {title}
          </h3>
          <p className="mt-2 text-base leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
            {desc}
          </p>
        </div>
      </div>
    </div>
  );
}

export function StepsSection() {
  return (
    <section className="mx-auto max-w-6xl scroll-mt-20 px-6 pb-24 pt-32">
      <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
        <ScrollReveal direction="left">
          <div>
            <h2 className="text-2xl font-bold leading-snug text-white sm:text-3xl">
              Upload your content in 3 simple steps:
            </h2>
            <p className="mt-6 text-base leading-relaxed text-gray-400">
              From a single track to a full batch, Songs2YT walks you through creating and
              publishing videos to YouTube without touching a video editor.
            </p>
            <AppMockup />
          </div>
        </ScrollReveal>

        <div className="flex flex-col gap-7">
          {STEPS.map((step, index) => (
            <ScrollReveal key={step.number} delay={index * 120} direction="right">
              <StepCard
                number={step.number}
                title={step.title}
                desc={step.desc}
                Icon={step.Icon}
              />
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}