"use client";

import * as React from "react";
import { FormState } from "../types";
import { Checkbox } from "../components/Checkbox";
import { RepeatableList } from "../components/RepeatableList";
import { Share2, ListPlus } from "lucide-react";
import { motion } from "framer-motion";
import { Reveal } from "../../Reveal";

interface ApiStepProps {
  state: FormState;
  updateState: (_updates: Partial<FormState>) => void;
  toggleItem: (_list: string[], _id: string) => string[];
}

export function ApiStep({ state, updateState, toggleItem }: ApiStepProps) {
  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">
                <Share2 size={16} />
              </div>
              <div className="flex items-center gap-3">
                <h4 className="text-lg font-bold text-slate-900">
                  {isWebApp
                    ? "Integrationen & Datenquellen"
                    : "Schnittstellen (API)"}
                </h4>
                <span className="px-2 py-1 bg-slate-50 text-slate-400 text-[10px] font-bold uppercase tracking-wider rounded">
                  Optional
                </span>
              </div>
            </div>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              type="button"
              onClick={() => toggleDontKnow("api")}
              className={`px-6 py-3 rounded-full text-sm font-bold transition-all whitespace-nowrap shrink-0 ${
                state.dontKnows?.includes("api")
                  ? "bg-slate-900 text-white"
                  : "bg-slate-100 text-slate-500 hover:bg-slate-200"
              }`}
            >
              Ich weiß es nicht
            </motion.button>
          </div>
          <p className="text-lg text-slate-500 leading-relaxed ml-2">
            {isWebApp
              ? "Mit welchen Systemen soll die Web App kommunizieren?"
              : "Datenaustausch mit Drittsystemen zur Automatisierung."}
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {[
              {
                id: "crm_erp",
                label: "CRM / ERP",
                desc: "HubSpot, Salesforce, SAP, Xentral etc.",
              },
              {
                id: "payment",
                label: "Payment",
                desc: "Stripe, PayPal, Klarna Integration.",
              },
              {
                id: "marketing",
                label: "Marketing",
                desc: "Newsletter (Mailchimp), Social Media Sync.",
              },
              {
                id: "ecommerce",
                label: "E-Commerce",
                desc: "Shopify, WooCommerce, Lagerbestand-Sync.",
              },
              {
                id: "maps",
                label: "Google Maps / Places",
                desc: "Standortsuche und Kartenintegration.",
              },
            ].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.apiSystems.includes(opt.id)}
                  onChange={() =>
                    updateState({
                      apiSystems: toggleItem(state.apiSystems, opt.id),
                    })
                  }
                />
              </motion.div>
            ))}
          </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 Systeme oder eigene APIs?
              </h4>
            </div>
            <RepeatableList
              items={state.otherTech}
              onAdd={(v) => updateState({ otherTech: [...state.otherTech, v] })}
              onRemove={(i) => updateTech(i)}
              placeholder="z.B. Microsoft Graph, Google Search Console, Custom REST API..."
            />
          </div>
        </div>
      </Reveal>
    </div>
  );

  function updateTech(index: number) {
    updateState({
      otherTech: state.otherTech.filter((_, idx) => idx !== index),
    });
  }
}
