"use client";

import { Check, Plus } from "lucide-react";
import { cn } from "../../../utils/cn";
import { Reveal } from "../../Reveal";

interface ModuleOption {
  id: string;
  title: string;
  description: string;
  priceEstimate?: string;
  icon?: React.ReactNode;
}

interface ModuleGridProps {
  title: string;
  options: ModuleOption[];
  selected: string[];
  onToggle: (id: string) => void;
  maxSelection?: number;
  otherCount?: number;
  onOtherCountChange?: (val: number) => void;
  otherLabel?: string;
}

export const ModuleGrid = ({
  title,
  options,
  selected,
  onToggle,
  otherCount = 0,
  onOtherCountChange,
  otherLabel = "Zusätzliche Elemente",
}: ModuleGridProps) => {
  return (
    <div className="w-full">
      <Reveal width="100%" delay={0.05} direction="none">
        <div className="flex items-center gap-4 mb-8">
          <div className="h-px bg-slate-200 flex-1" />
          <h3 className="text-xl font-bold text-slate-900 uppercase tracking-widest text-center min-w-max px-4">
            {title}
          </h3>
          <div className="h-px bg-slate-200 flex-1" />
        </div>
      </Reveal>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {options.map((option, i) => {
          const isSelected = selected.includes(option.id);
          return (
            <Reveal
              key={option.id}
              width="100%"
              delay={i * 0.05}
              direction="up"
              scale={0.95}
            >
              <button
                onClick={() => onToggle(option.id)}
                className={cn(
                  "relative flex flex-col items-start p-6 rounded-2xl border text-left w-full h-full transition-all duration-300",
                  isSelected
                    ? "bg-green-50/40 border-green-500 ring-4 ring-green-500/10 shadow-xl scale-[1.02] z-10"
                    : "bg-white border-slate-200 hover:border-slate-300 hover:shadow-lg hover:-translate-y-1 hover:z-10",
                )}
              >
                <div className="flex items-start justify-between w-full mb-4">
                  <div
                    className={cn(
                      "w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 shadow-sm",
                      isSelected
                        ? "bg-green-500 text-white shadow-green-500/30 ring-4 ring-green-100"
                        : "bg-slate-50 text-slate-500 group-hover:bg-slate-100",
                    )}
                  >
                    {option.icon ||
                      (isSelected ? <Check size={24} /> : <Plus size={24} />)}
                  </div>
                  {option.priceEstimate && (
                    <span
                      className={cn(
                        "px-2.5 py-1 rounded text-[10px] font-bold font-mono uppercase tracking-wider transition-colors",
                        isSelected
                          ? "bg-green-100 text-green-700"
                          : "bg-slate-100 text-slate-500",
                      )}
                    >
                      +{option.priceEstimate}
                    </span>
                  )}
                </div>

                <div className="flex-1">
                  <h4
                    className={cn(
                      "text-lg font-bold mb-2 transition-colors",
                      isSelected ? "text-green-900" : "text-slate-900",
                    )}
                  >
                    {option.title}
                  </h4>
                  <p
                    className={cn(
                      "text-sm leading-relaxed transition-colors",
                      isSelected ? "text-green-800/70" : "text-slate-500",
                    )}
                  >
                    {option.description}
                  </p>
                </div>

                {/* Selection Check Circle */}
                <div
                  className={cn(
                    "absolute top-4 right-4 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all",
                    isSelected
                      ? "border-green-500 bg-green-500 text-white scale-100 opacity-100"
                      : "border-slate-200 bg-transparent scale-90 opacity-0",
                  )}
                >
                  <Check size={14} strokeWidth={3} />
                </div>
              </button>
            </Reveal>
          );
        })}

        {onOtherCountChange && (
          <div className="col-span-1 md:col-span-2 lg:col-span-3 mt-4">
            <Reveal width="100%" delay={options.length * 0.05} direction="up">
              <div className="flex flex-col md:flex-row items-center justify-between p-6 bg-slate-50 border border-dashed border-slate-300 rounded-2xl gap-4">
                <div className="flex flex-col">
                  <span className="text-slate-900 font-bold text-lg">
                    {otherLabel}
                  </span>
                  <span className="text-slate-500 text-sm">
                    Gibt es weitere Anforderungen, die oben nicht aufgeführt
                    sind?
                  </span>
                </div>

                <div className="flex items-center gap-4 bg-white p-2 rounded-xl border border-slate-200 shadow-sm">
                  <button
                    onClick={() =>
                      onOtherCountChange(Math.max(0, otherCount - 1))
                    }
                    className="w-10 h-10 flex items-center justify-center rounded-lg border border-slate-100 hover:bg-slate-50 transition-colors text-slate-400 hover:text-slate-900 font-bold text-xl"
                  >
                    -
                  </button>
                  <div className="min-w-[40px] text-center font-mono font-bold text-2xl text-slate-900">
                    {otherCount}
                  </div>
                  <button
                    onClick={() => onOtherCountChange(otherCount + 1)}
                    className="w-10 h-10 flex items-center justify-center rounded-lg border border-slate-100 hover:bg-slate-50 transition-colors text-slate-400 hover:text-slate-900 font-bold text-xl"
                  >
                    +
                  </button>
                </div>
              </div>
            </Reveal>
          </div>
        )}
      </div>
    </div>
  );
};
