"use client";

import * as React from "react";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, X, Link2, Globe } from "lucide-react";
import { cn } from "../../../utils/cn";

interface ReferenceInputProps {
  references: string[];
  setReferences: (refs: string[]) => void;
}

export const ReferenceInput = ({
  references,
  setReferences,
}: ReferenceInputProps) => {
  const [inputValue, setInputValue] = useState("");

  const addReference = () => {
    if (inputValue.trim() && !references.includes(inputValue.trim())) {
      setReferences([...references, inputValue.trim()]);
      setInputValue("");
    }
  };

  const removeReference = (ref: string) => {
    setReferences(references.filter((r) => r !== ref));
  };

  return (
    <div className="w-full max-w-2xl mx-auto">
      <div className="flex items-center gap-4 mb-8">
        <div className="h-px bg-slate-200 flex-1" />
        <h3 className="text-xl font-bold text-slate-900 uppercase tracking-widest text-center min-w-max px-4">
          REFERENZEN & INSPIRATION
        </h3>
        <div className="h-px bg-slate-200 flex-1" />
      </div>

      <div className="space-y-6">
        <div className="flex gap-2">
          <div className="relative flex-1 group">
            <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-slate-900 transition-colors">
              <Globe size={18} />
            </div>
            <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && addReference()}
              placeholder="Website URL oder Name (z.B. apple.com)"
              className="w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-xl focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all text-slate-900 placeholder:text-slate-300"
            />
          </div>
          <button
            onClick={addReference}
            disabled={!inputValue.trim()}
            className="px-6 py-4 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
          >
            <Plus size={20} />{" "}
            <span className="hidden md:inline">Hinzufügen</span>
          </button>
        </div>

        <div className="grid grid-cols-1 gap-3">
          <AnimatePresence mode="popLayout">
            {references.map((ref) => (
              <motion.div
                key={ref}
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 10 }}
                className="flex items-center justify-between p-4 bg-slate-50 border border-slate-100 rounded-xl group hover:border-slate-200 transition-all"
              >
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-lg bg-white border border-slate-200 flex items-center justify-center text-slate-400 group-hover:text-slate-900 transition-colors shadow-sm">
                    <Link2 size={14} />
                  </div>
                  <span className="font-medium text-slate-700">{ref}</span>
                </div>
                <button
                  onClick={() => removeReference(ref)}
                  className="p-2 text-slate-300 hover:text-red-500 transition-colors"
                >
                  <X size={18} />
                </button>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>

        {references.length === 0 && (
          <div className="py-12 text-center border-2 border-dashed border-slate-100 rounded-2xl">
            <p className="text-slate-400 font-medium">
              Noch keine Referenzen hinzugefügt.
            </p>
            <p className="text-slate-300 text-sm mt-1">
              Geben Sie eine URL ein, die Ihnen gefällt.
            </p>
          </div>
        )}
      </div>
    </div>
  );
};
