"use client";

import { motion, AnimatePresence } from "framer-motion";
import { AbstractCircuit } from "../../Effects/AbstractCircuit";
import { RotateCcw, ChevronRight, ChevronLeft } from "lucide-react";

interface ConfiguratorLayoutProps {
  children: React.ReactNode;
  stepIndex: number;
  totalSteps: number;
  title: string;
  onNext?: () => void;
  onPrev?: () => void;
  isSubmitting?: boolean;
  totalPrice?: number;
  monthlyPrice?: number;
  onRestart?: () => void;
}

export const ConfiguratorLayout = ({
  children,
  stepIndex,
  totalSteps,
  title,
  onNext,
  onPrev,
  isSubmitting,
  totalPrice = 0,
  monthlyPrice = 0,
  onRestart,
}: ConfiguratorLayoutProps) => {
  const handleRestart = () => {
    if (
      window.confirm("Konfiguration neustarten? Ihr Fortschritt geht verloren.")
    ) {
      if (onRestart) {
        onRestart();
      } else {
        window.location.reload();
      }
    }
  };

  return (
    <div className="relative w-full min-h-[85vh] bg-white text-slate-900 flex flex-col overflow-hidden border border-slate-200 rounded-xl shadow-lg">
      {/* Background: Geometric Dot Grid */}
      <div
        className="absolute inset-0 z-0 opacity-[0.4] pointer-events-none"
        style={{
          backgroundImage: `radial-gradient(#cbd5e1 1px, transparent 1px)`,
          backgroundSize: `24px 24px`,
        }}
      />

      {/* Subtle Circuit Overlay */}
      <div className="absolute inset-0 z-0 opacity-[0.05] pointer-events-none mix-blend-multiply">
        <AbstractCircuit />
      </div>

      {/* Header (Functional) */}
      <header className="relative z-10 flex flex-col border-b border-slate-200 bg-white/80 backdrop-blur-sm">
        {/* Top Bar: Controls */}
        <div className="flex items-center justify-between px-6 py-4 md:px-8">
          <div className="flex items-center gap-3">
            <div className="relative flex items-center justify-center w-4 h-4">
              <div className="w-2 h-2 rounded-full bg-green-500 shadow-sm" />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-bold text-slate-900 leading-none tracking-tight">
                SYSTEM KONFIGURATOR
              </span>
              <span className="text-[10px] font-mono text-slate-400 uppercase tracking-widest mt-0.5">
                Schritt {String(stepIndex + 1).padStart(2, "0")} /{" "}
                {String(totalSteps).padStart(2, "0")}
              </span>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handleRestart}
              className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold text-slate-400 hover:text-red-600 hover:bg-slate-50 transition-colors uppercase tracking-wider"
            >
              <RotateCcw size={14} />{" "}
              <span className="hidden md:inline">Zurücksetzen</span>
            </button>
          </div>
        </div>

        {/* Progress Line */}
        <div className="relative w-full h-1 bg-slate-100">
          <motion.div
            className="absolute top-0 left-0 h-full bg-slate-900"
            initial={{ width: 0 }}
            animate={{ width: `${((stepIndex + 1) / totalSteps) * 100}%` }}
            transition={{ duration: 0.5, ease: "easeInOut" }}
          />
        </div>
      </header>

      {/* Main Content Area */}
      <main className="flex-1 relative z-10 flex flex-col items-center justify-center p-6 md:p-12 w-full overflow-y-auto">
        <AnimatePresence mode="wait">
          <motion.div
            key={stepIndex}
            initial={{ opacity: 0, y: 15, filter: "blur(4px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -15, filter: "blur(4px)" }}
            transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
            className="w-full max-w-5xl"
          >
            {children}
          </motion.div>
        </AnimatePresence>
      </main>

      {/* Footer / Controls */}
      <footer className="relative z-10 flex flex-col md:flex-row items-center justify-between px-6 py-5 md:px-8 border-t border-slate-200 bg-white/90 backdrop-blur-sm gap-4">
        {/* Left: Live Estimate (Integrated, No Overlay) */}
        <div className="w-full md:w-auto flex items-center gap-6">
          <div className="flex flex-col">
            <span className="text-[10px] font-bold font-mono text-slate-400 uppercase tracking-widest mb-0.5">
              Kalkuliertes Budget
            </span>
            <div className="flex items-baseline gap-2">
              <span className="text-xl font-bold text-slate-900">
                €{totalPrice.toLocaleString("de-DE")}
              </span>
              {monthlyPrice > 0 && (
                <span className="text-xs font-medium text-slate-500">
                  + €{monthlyPrice}/mtl.
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Right: Navigation */}
        <div className="flex items-center gap-3 w-full md:w-auto justify-end">
          {onPrev && (
            <button
              onClick={onPrev}
              className="px-5 py-3 rounded-xl text-xs font-bold font-mono tracking-wider text-slate-500 hover:text-slate-900 hover:bg-slate-50 transition-all flex items-center gap-2"
            >
              <ChevronLeft size={16} /> ZURÜCK
            </button>
          )}
          {onNext && (
            <button
              onClick={onNext}
              disabled={isSubmitting}
              className="px-8 py-3 bg-slate-900 text-white rounded-xl text-xs font-bold font-mono tracking-wider hover:bg-slate-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transform active:scale-[0.98]"
            >
              {isSubmitting ? "VERARBEITE..." : "WEITER"}
              {!isSubmitting && <ChevronRight size={16} />}
            </button>
          )}
        </div>
      </footer>
    </div>
  );
};
