"use client";

import * as React from "react";
import { FormState } from "../types";
import { FEATURE_OPTIONS } from "../constants";
import { Checkbox } from "../components/Checkbox";
import { RepeatableList } from "../components/RepeatableList";
import { motion, AnimatePresence } from "framer-motion";
import { Minus, Plus, LayoutGrid, ListPlus, HelpCircle } from "lucide-react";

interface FeaturesStepProps {
  state: FormState;
  updateState: (_updates: Partial<FormState>) => void;
  toggleItem: (_list: string[], _id: string) => string[];
}

export function FeaturesStep({
  state,
  updateState,
  toggleItem,
}: FeaturesStepProps) {
  const toggleDontKnow = (id: string) => {
    const current = state.dontKnows || [];
    if (current.includes(id)) {
      updateState({ dontKnows: current.filter((i) => i !== id) });
    } else {
      updateState({ dontKnows: [...current, id] });
    }
  };

  return (
    <div className="space-y-6">
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-4">
            <div className="w-8 h-8 bg-slate-50 rounded-xl flex items-center justify-center text-black">
              <LayoutGrid size={16} />
            </div>
            <div>
              <div className="flex items-center gap-3">
                <h4 className="text-lg font-bold text-slate-900">
                  System-Module
                </h4>
                <span className="px-2 py-1 bg-slate-50 text-slate-400 text-[10px] font-bold uppercase tracking-wider rounded">
                  Optional
                </span>
              </div>
              <div className="flex items-center gap-2 text-slate-400 mt-1">
                <HelpCircle size={14} />
                <span className="text-sm">
                  Module sind funktionale Einheiten, die über einfache
                  Textseiten hinausgehen.
                </span>
              </div>
            </div>
          </div>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            type="button"
            onClick={() => toggleDontKnow("features")}
            className={`px-6 py-3 rounded-full text-sm font-bold transition-all whitespace-nowrap shrink-0 ${
              state.dontKnows?.includes("features")
                ? "bg-slate-900 text-white"
                : "bg-slate-100 text-slate-500 hover:bg-slate-200"
            }`}
          >
            Ich weiß es nicht
          </motion.button>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {FEATURE_OPTIONS.map((opt, index) => (
            <motion.div
              key={opt.id}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.05 }}
            >
              <Checkbox
                label={opt.label}
                desc={opt.desc}
                checked={state.features.includes(opt.id)}
                onChange={() =>
                  updateState({ features: toggleItem(state.features, opt.id) })
                }
              />
            </motion.div>
          ))}
        </div>
      </div>

      <div className="space-y-12">
        <div className="space-y-6">
          <div className="flex items-center gap-4">
            <div className="w-8 h-8 bg-slate-50 rounded-xl flex items-center justify-center text-black">
              <ListPlus size={16} />
            </div>
            <h4 className="text-lg font-bold text-slate-900">
              Weitere inhaltliche Module?
            </h4>
          </div>
          <RepeatableList
            items={state.otherFeatures}
            onAdd={(v) =>
              updateState({ otherFeatures: [...state.otherFeatures, v] })
            }
            onRemove={(i) =>
              updateState({
                otherFeatures: state.otherFeatures.filter(
                  (_, idx) => idx !== i,
                ),
              })
            }
            placeholder="z.B. Glossar, Download-Center, Partner-Bereich..."
          />
        </div>
      </div>
    </div>
  );
}
