import React from "react";
import Typography from "../Typography/Typography";
import { motion } from "framer-motion";
import { ClipboardDocumentIcon, CheckIcon } from "@heroicons/react/24/outline";

interface CardField {
  label: string;
  value: string | undefined;
}

interface ShowCardsListProps {
  fields: CardField[];
}

export const ShowCardsStringList: React.FC<ShowCardsListProps> = ({
  fields,
}) => {
  const [copiedIndex, setCopiedIndex] = React.useState<number | null>(null);

  const handleCopy = (text: string | undefined, index: number) => {
    if (!text) return;

    navigator.clipboard.writeText(text);
    setCopiedIndex(index);

    setTimeout(() => {
      setCopiedIndex(null);
    }, 2000);
  };

  const cardVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.05,
        duration: 0.1,
        ease: "easeOut",
      },
    }),
    hover: {
      y: -2,
      scale: 1.01,
      transition: { duration: 0.1 },
    },
    tap: { scale: 0.98 },
  };

  return (
    <div className="flex justify-center w-full items-center">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-1 w-full max-w-7xl">
        {fields.map((field, index) => (
          <motion.div
            key={index}
            custom={index}
            initial="hidden"
            animate="visible"
            whileHover="hover"
            whileTap="tap"
            variants={cardVariants}
            onClick={() => handleCopy(field.value, index)}
            className={`bg-white dark:bg-gray-700 rounded-xl shadow-sm p-4 cursor-pointer 
              border border-gray-100 dark:border-gray-700 hover:shadow-md transition-all
              relative overflow-hidden group`}
          >
            <div className="absolute inset-0 bg-gradient-to-br from-transparent via-primary-50/50 dark:via-primary-900/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

            <Typography
              variant="subtitle2"
              className="flex items-center"
              color="text-gray-500 dark:text-gray-200 mb-1"
            >
              <motion.div
                animate={{
                  scale: copiedIndex === index ? [1.2, 1] : 1,
                  opacity: copiedIndex === index ? 1 : 0.7,
                }}
                transition={{ duration: 0.3 }}
                className="group-hover:text-primary-500 dark:group-hover:text-primary-400"
              >
                {copiedIndex === index ? (
                  <CheckIcon className="h-5 w-5 text-green-500" />
                ) : (
                  <ClipboardDocumentIcon className="h-5 w-5" />
                )}
              </motion.div>
              {field.label}
            </Typography>

            <div className="w-full min-w-0">
              <Typography
                variant="body2"
                color="font-medium text-gray-900 dark:text-white"
                title={field.value}
                className="pr-2 break-words"
                style={{
                  display: "block",
                  wordBreak: "break-word",
                  overflowWrap: "break-word",
                  whiteSpace: "normal",
                  width: "100%",
                }}
              >
                {field.value || "—"}
              </Typography>
            </div>

            <motion.div
              className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-500"
              initial={{ width: 0 }}
              whileHover={{ width: "100%" }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            />
          </motion.div>
        ))}
      </div>
    </div>
  );
};
