'use client';

import * as React from 'react';
import { FormState } from '../types';
import { Checkbox } from '../components/Checkbox';
import { RepeatableList } from '../components/RepeatableList';
import { Minus, Plus, Cpu, ListPlus } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Reveal } from '../../Reveal';

interface FunctionsStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
  toggleItem: (list: string[], id: string) => string[];
}

export function FunctionsStep({ state, updateState, toggleItem }: FunctionsStepProps) {
  const isWebApp = state.projectType === 'web-app';

  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-12">
      <Reveal width="100%" delay={0.1}>
        <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">
                <Cpu size={24} />
              </div>
              <h4 className="text-2xl font-bold text-slate-900">
                {isWebApp ? 'Funktionale Anforderungen' : 'Erweiterte Funktionen'}
              </h4>
            </div>
            <motion.button 
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              type="button"
              onClick={() => toggleDontKnow('functions')}
              className={`px-6 py-3 rounded-full text-sm font-bold transition-all shadow-sm ${
                state.dontKnows?.includes('functions') ? '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">
            {isWebApp ? (
              <>
                <Checkbox 
                  label="Dashboard & Analytics" desc="Visualisierung von Daten und Kennzahlen." 
                  checked={state.functions.includes('dashboard')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'dashboard') })} 
                />
                <Checkbox 
                  label="Dateiverwaltung" desc="Upload, Download und Organisation von Dokumenten." 
                  checked={state.functions.includes('files')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'files') })} 
                />
                <Checkbox 
                  label="Benachrichtigungen" desc="E-Mail, Push oder In-App Alerts." 
                  checked={state.functions.includes('notifications')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'notifications') })} 
                />
                <Checkbox 
                  label="Export-Funktionen" desc="CSV, Excel oder PDF Generierung." 
                  checked={state.functions.includes('export')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'export') })} 
                />
              </>
            ) : (
              <>
                <Checkbox 
                  label="Suche" desc="Volltextsuche über alle Inhalte." 
                  checked={state.functions.includes('search')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'search') })} 
                />
                <Checkbox 
                  label="Filter-Systeme" desc="Kategorisierung und Sortierung." 
                  checked={state.functions.includes('filter')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'filter') })} 
                />
                <Checkbox 
                  label="PDF-Export" desc="Automatisierte PDF-Erstellung." 
                  checked={state.functions.includes('pdf')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'pdf') })} 
                />
                <Checkbox 
                  label="Erweiterte Formulare" desc="Komplexe Abfragen & Logik." 
                  checked={state.functions.includes('forms')} 
                  onChange={() => updateState({ functions: toggleItem(state.functions, 'forms') })} 
                />
              </>
            )}
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.2}>
        <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 spezifische Wünsche?</h4>
            </div>
            <RepeatableList
              items={state.otherFunctions}
              onAdd={(v) => updateState({ otherFunctions: [...state.otherFunctions, v] })}
              onRemove={(i) => updateState({ otherFunctions: state.otherFunctions.filter((_, idx) => idx !== i) })}
              placeholder={isWebApp ? "z.B. Echtzeit-Chat, KI-Anbindung, Offline-Modus..." : "z.B. Mitgliederbereich, Event-Kalender, geschützte Downloads..."}
            />
          </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 Funktionen</h4>
                <p className="text-base text-slate-500 mt-1">Falls Sie weitere Logik-Bausteine 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({ otherFunctionsCount: Math.max(0, state.otherFunctionsCount - 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.otherFunctionsCount}
                    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.otherFunctionsCount}
                  </motion.span>
                </AnimatePresence>
                <motion.button 
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.9 }}
                  type="button" 
                  onClick={() => updateState({ otherFunctionsCount: state.otherFunctionsCount + 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>
      </Reveal>
    </div>
  );
}
