"use client";

import * as React from "react";
import { FormState } from "../types";
import { Globe, Info, Plus, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { Reveal } from "../../Reveal";

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

const COMMON_LANGUAGES = [
  { id: "de", label: "Deutsch" },
  { id: "en", label: "Englisch" },
  { id: "fr", label: "Französisch" },
  { id: "es", label: "Spanisch" },
  { id: "it", label: "Italienisch" },
];

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 toggleLanguage = (lang: string) => {
    const current = state.languagesList || [];
    if (current.includes(lang)) {
      updateState({ languagesList: current.filter((l) => l !== lang) });
    } else {
      updateState({ languagesList: [...current, lang] });
    }
  };

  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-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">
                <Globe size={16} />
              </div>
              <h4 className="text-lg font-bold text-slate-900">Sprachen</h4>
              <span className="px-2 py-1 bg-slate-50 text-slate-400 text-[10px] font-bold uppercase tracking-wider rounded">
                Optional
              </span>
            </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 whitespace-nowrap shrink-0 ${
                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">
            <p className="text-lg text-slate-500 leading-relaxed ml-2">
              Welche Sprachen soll Ihre Website unterstützen?
            </p>

            <div className="flex flex-wrap gap-4">
              {COMMON_LANGUAGES.map((lang) => (
                <motion.button
                  key={lang.id}
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  type="button"
                  onClick={() => toggleLanguage(lang.label)}
                  className={`px-8 py-4 rounded-2xl font-bold transition-all border-2 ${
                    state.languagesList.includes(lang.label)
                      ? "bg-slate-900 border-slate-900 text-white"
                      : "bg-white border-slate-100 text-slate-600 hover:border-slate-300"
                  }`}
                >
                  {lang.label}
                </motion.button>
              ))}
            </div>

            <div className="pt-4">
              <div className="flex gap-3">
                <input
                  type="text"
                  placeholder="Weitere Sprache hinzufügen..."
                  className="flex-1 p-6 bg-white border border-slate-100 rounded-2xl focus:outline-none focus:border-slate-900 transition-colors text-lg"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      const val = e.currentTarget.value.trim();
                      if (val && !state.languagesList.includes(val)) {
                        updateState({
                          languagesList: [...state.languagesList, val],
                        });
                        e.currentTarget.value = "";
                      }
                    }
                  }}
                />
              </div>
            </div>

            <div className="flex flex-wrap gap-3">
              <AnimatePresence>
                {state.languagesList
                  .filter((l) => !COMMON_LANGUAGES.find((cl) => cl.label === l))
                  .map((lang, i) => (
                    <motion.div
                      key={lang}
                      initial={{ opacity: 0, scale: 0.8 }}
                      animate={{ opacity: 1, scale: 1 }}
                      exit={{ opacity: 0, scale: 0.8 }}
                      className="flex items-center gap-3 px-6 py-3 bg-slate-100 rounded-full text-base font-bold text-slate-700"
                    >
                      <span>{lang}</span>
                      <button
                        type="button"
                        onClick={() =>
                          updateState({
                            languagesList: state.languagesList.filter(
                              (l) => l !== lang,
                            ),
                          })
                        }
                        className="text-slate-400 hover:text-slate-900 transition-colors"
                      >
                        <X size={18} />
                      </button>
                    </motion.div>
                  ))}
              </AnimatePresence>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.3}>
        <div className="p-10 bg-slate-900 text-white rounded-2xl space-y-6 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={16} />
            <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>
  );
}
