import Typography from "../../components/Typography/Typography";
import { motion, AnimatePresence } from "framer-motion";
import {
  ExclamationTriangleIcon,
  DocumentTextIcon,
  CheckCircleIcon,
} from "@heroicons/react/24/outline";

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.08, delayChildren: 0.05 },
  },
  exit: {
    opacity: 0,
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -8 },
};

export const MainInfractions = ({
  data,
  handleUpdate: _handleUpdate,
}: {
  data: any;
  handleUpdate: () => void;
}) => {
  const infractions = data?.infractions || [];

  if (infractions.length === 0) {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.96 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.3 }}
        className="flex flex-col items-center justify-center py-12 px-6 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700"
      >
        <CheckCircleIcon className="w-14 h-14 text-emerald-500 dark:text-emerald-400 mb-4" />
        <Typography
          variant="body1"
          className="text-gray-500 dark:text-gray-400 text-center"
        >
          تخلفی ثبت نشده است
        </Typography>
      </motion.div>
    );
  }

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
      className="flex flex-col gap-3"
    >
      <AnimatePresence mode="popLayout">
        {infractions.map(
          (
            infraction: { _id: string; title: string; description?: string },
            index: number,
          ) => (
            <motion.div
              key={infraction._id || index}
              variants={itemVariants}
              layout
              className="group flex gap-4 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/80 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-red-200 dark:hover:border-red-900/50 shadow-sm hover:shadow-md transition-all duration-200"
            >
              <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                <ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
              </div>
              <div className="flex-1 min-w-0">
                <Typography
                  variant="subtitle2"
                  className="font-semibold mb-1 text-gray-900 dark:text-gray-100"
                >
                  {index + 1}. {infraction.title}
                </Typography>
                {infraction.description && (
                  <div className="flex items-start gap-2 mt-2">
                    <DocumentTextIcon className="w-4 h-4 text-gray-400 dark:text-gray-500 flex-shrink-0 mt-0.5" />
                    <Typography
                      variant="body2"
                      className="text-gray-600 dark:text-gray-400 leading-relaxed"
                    >
                      {infraction.description}
                    </Typography>
                  </div>
                )}
              </div>
            </motion.div>
          ),
        )}
      </AnimatePresence>
    </motion.div>
  );
};
