'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 } 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-16">
      <div className="space-y-8">
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900 shadow-sm">
              <LayoutGrid size={24} />
            </div>
            <h4 className="text-2xl font-bold text-slate-900">System-Module</h4>
          </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 shadow-sm ${
              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-8">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900 shadow-sm">
              <ListPlus size={24} />
            </div>
            <h4 className="text-2xl 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>

        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="p-10 bg-white border border-slate-100 rounded-[3rem] space-y-6 shadow-sm hover:shadow-xl transition-all duration-500"
        >
          <div className="flex flex-col md:flex-row justify-between items-center gap-8">
            <div>
              <h4 className="text-xl font-bold text-slate-900">Anzahl weiterer Module</h4>
              <p className="text-base text-slate-500 mt-1">Falls Sie weitere Systeme planen, diese aber noch nicht benennen können.</p>
            </div>
            <div className="flex items-center gap-8">
              <motion.button 
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                type="button" 
                onClick={() => updateState({ otherFeaturesCount: Math.max(0, state.otherFeaturesCount - 1) })} 
                className="w-14 h-14 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"
              >
                <Minus size={24} />
              </motion.button>
              <AnimatePresence mode="wait">
                <motion.span 
                  key={state.otherFeaturesCount}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="text-5xl font-bold w-12 text-center"
                >
                  {state.otherFeaturesCount}
                </motion.span>
              </AnimatePresence>
              <motion.button 
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                type="button" 
                onClick={() => updateState({ otherFeaturesCount: state.otherFeaturesCount + 1 })} 
                className="w-14 h-14 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"
              >
                <Plus size={24} />
              </motion.button>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  );
}
