"use client";

import * as React from "react";
import { FormState } from "../types";
import { Checkbox } from "../components/Checkbox";
import { RepeatableList } from "../components/RepeatableList";
import { motion, AnimatePresence } from "framer-motion";
import { Minus, Plus, Cpu, ListPlus } from "lucide-react";
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-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">
                <Cpu size={16} />
              </div>
              <h4 className="text-lg 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 whitespace-nowrap shrink-0 ${
                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"),
                    })
                  }
                />
                <Checkbox
                  label="Mitgliederbereich"
                  desc="Login-Bereich für exklusive Inhalte."
                  checked={state.functions.includes("members")}
                  onChange={() =>
                    updateState({
                      functions: toggleItem(state.functions, "members"),
                    })
                  }
                />
                <Checkbox
                  label="Event-Kalender"
                  desc="Verwaltung und Anzeige von Terminen."
                  checked={state.functions.includes("calendar")}
                  onChange={() =>
                    updateState({
                      functions: toggleItem(state.functions, "calendar"),
                    })
                  }
                />
                <Checkbox
                  label="Echtzeit-Chat"
                  desc="Direkte Kommunikation mit Besuchern."
                  checked={state.functions.includes("chat")}
                  onChange={() =>
                    updateState({
                      functions: toggleItem(state.functions, "chat"),
                    })
                  }
                />
              </>
            )}
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.2}>
        <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 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>
        </div>
      </Reveal>
    </div>
  );
}
