'use client';

import * as React from 'react';
import { FormState } from '../types';
import { Globe, Info, ListPlus } from 'lucide-react';
import { motion } from 'framer-motion';
import { RepeatableList } from '../components/RepeatableList';
import { Reveal } from '../../Reveal';

interface LanguageStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
}

export function LanguageStep({ state, updateState }: LanguageStepProps) {
  const basePriceExplanation = "Jede zusätzliche Sprache erhöht den Gesamtaufwand für Design, Entwicklung und Qualitätssicherung um ca. 20%. Dies deckt die technische Implementierung der Übersetzungsschicht sowie die Anpassung von Layouts für unterschiedliche Textlängen ab.";

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

  const languagesCount = state.languagesList.length || 1;

  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">
                <Globe size={24} />
              </div>
              <h4 className="text-2xl font-bold text-slate-900">Sprachen</h4>
            </div>
            <motion.button 
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              type="button"
              onClick={() => toggleDontKnow('languages')}
              className={`px-6 py-3 rounded-full text-sm font-bold transition-all shadow-sm ${
                state.dontKnows?.includes('languages') ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
              }`}
            >
              Ich weiß es nicht
            </motion.button>
          </div>

          <div className="space-y-6">
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-900 shadow-sm">
                <ListPlus size={20} />
              </div>
              <p className="text-lg font-bold text-slate-900">Welche Sprachen planen Sie?</p>
            </div>
            <div className="p-2">
              <RepeatableList
                items={state.languagesList}
                onAdd={(v) => updateState({ languagesList: [...state.languagesList, v] })}
                onRemove={(i) => updateState({ languagesList: state.languagesList.filter((_, idx) => idx !== i) })}
                placeholder="z.B. Englisch, Französisch, Spanisch..."
              />
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.3}>
        <div className="p-10 bg-slate-900 text-white rounded-[3rem] space-y-8 shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-32 -mt-32 blur-3xl" />
          <div className="flex items-center gap-4 text-slate-400 relative z-10">
            <Info size={24} />
            <span className="text-sm font-bold uppercase tracking-widest">Warum dieser Faktor?</span>
          </div>
          <p className="text-lg leading-relaxed text-slate-300 relative z-10 max-w-3xl">
            {basePriceExplanation}
          </p>
          {languagesCount > 1 && (
            <div className="pt-8 border-t border-white/10 relative z-10">
              <div className="flex justify-between items-center">
                <span className="text-lg font-medium text-slate-400">Aktueller Aufschlagsfaktor:</span>
                <motion.span 
                  initial={{ scale: 0.8 }}
                  animate={{ scale: 1 }}
                  className="text-4xl font-bold text-white"
                >
                  +{((languagesCount - 1) * 20)}%
                </motion.span>
              </div>
            </div>
          )}
        </div>
      </Reveal>
    </div>
  );
}
