"use client";

import React from "react";
import { usePathname } from "next/navigation";
import { Check, Upload, Settings, ListChecks, Loader2, PenTool } from "lucide-react";
import { cn } from "@/lib/utils";
import Wrapper from "@/components/Wrapper";
import HeaderNav from "@/app/(presentation-generator)/components/HeaderNab";
import Logo from "@/components/Logo";

const WIZARD_STEPS = [
  { step: 1, label: "Upload", path: "/generate/upload", icon: Upload },
  { step: 2, label: "Configure", path: "/generate/configure", icon: Settings },
  { step: 3, label: "Outline", path: "/generate/outline", icon: ListChecks },
  { step: 4, label: "Generate", path: "/generate/progress", icon: Loader2 },
  { step: 5, label: "Edit", path: "/presentation", icon: PenTool },
] as const;

function getActiveStep(pathname: string): number {
  for (const s of WIZARD_STEPS) {
    if (pathname.startsWith(s.path)) return s.step;
  }
  return 1;
}

export default function GenerateLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const activeStep = getActiveStep(pathname);

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      {/* Header */}
      <div className="bg-[#5146E5] w-full shadow-lg sticky top-0 z-50">
        <Wrapper>
          <div className="flex items-center justify-between py-1">
            <Logo variant="light" />
            <HeaderNav />
          </div>
        </Wrapper>
      </div>

      {/* Step Indicator */}
      <div className="bg-white border-b">
        <Wrapper className="py-4">
          <div className="flex items-center justify-center max-w-2xl mx-auto">
            {WIZARD_STEPS.map((s, idx) => {
              const isActive = activeStep === s.step;
              const isCompleted = activeStep > s.step;
              const Icon = s.icon;

              return (
                <React.Fragment key={s.step}>
                  {idx > 0 && (
                    <div
                      className={cn(
                        "flex-1 h-0.5 mx-2",
                        isCompleted ? "bg-[#5146E5]" : "bg-gray-200"
                      )}
                    />
                  )}
                  <div className="flex flex-col items-center gap-1">
                    <div
                      className={cn(
                        "w-9 h-9 rounded-full flex items-center justify-center text-sm font-medium transition-colors",
                        isCompleted && "bg-[#5146E5] text-white",
                        isActive && "bg-[#5146E5] text-white ring-4 ring-[#5146E5]/20",
                        !isActive && !isCompleted && "bg-gray-100 text-gray-400"
                      )}
                    >
                      {isCompleted ? (
                        <Check className="w-4 h-4" />
                      ) : (
                        <Icon className="w-4 h-4" />
                      )}
                    </div>
                    <span
                      className={cn(
                        "text-xs font-medium",
                        isActive ? "text-[#5146E5]" : isCompleted ? "text-gray-700" : "text-gray-400"
                      )}
                    >
                      {s.label}
                    </span>
                  </div>
                </React.Fragment>
              );
            })}
          </div>
        </Wrapper>
      </div>

      {/* Page Content */}
      <div className="flex-1">
        {children}
      </div>
    </div>
  );
}
