'use client';
import React from 'react';
import { formattedDate, toWeekDay } from '@/utils/helpers';
import {
  FaUser,
  FaPhone,
  FaUsers,
  FaCalendarDay,
  FaClock,
  FaInfoCircle,
  FaCheckCircle,
  FaTimesCircle
} from 'react-icons/fa';
import { motion, AnimatePresence } from 'framer-motion';

interface ReservationDetailsProps {
  person_name: string;
  phone: string;
  persons: string;
  alert: string;
  from_date: string;
  from_time: string;
  description: string;
  isSuccess?: boolean;
  onNewReservation?: () => void;
}

const DetailRow: React.FC<{
  icon: JSX.Element;
  label: string;
  value: string | JSX.Element;
  delay: number;
}> = ({ icon, label, value, delay }) => (
  <motion.p 
    className="flex items-center mb-4 text-lg"
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.5, delay: delay }}
  >
    {icon}
    <strong className="mr-1">{label}:</strong> {value}
  </motion.p>
);

const ReservationDetails: React.FC<ReservationDetailsProps> = ({
  person_name,
  phone,
  persons,
  alert,
  from_date,
  from_time,
  description,
  isSuccess = false,
  onNewReservation
}) => {
  return (
    <motion.div 
      className={`reservation-details text-gray-800 rounded-lg`}
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      {isSuccess ? (
        <AnimatePresence>
          <motion.div 
            className="flex flex-col items-center justify-center mb-6 text-center"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: [0, 1.2, 1] }}
              transition={{ duration: 0.7, times: [0, 0.6, 1] }}
            >
              <FaCheckCircle className="text-green-500 text-5xl mb-3" />
            </motion.div>
            <motion.h2 
              className="text-2xl font-bold text-green-700 mb-2"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.3, duration: 0.5 }}
            >
              Резервацията е успешна!
            </motion.h2>
            <motion.p 
              className="text-gray-600"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4, duration: 0.5 }}
            >
              {alert}
            </motion.p>
          </motion.div>
        </AnimatePresence>
      ) : (
        <motion.div 
          className="flex flex-col items-center justify-center mb-6 text-center"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: [0, 1.2, 1] }}
            transition={{ duration: 0.7, times: [0, 0.6, 1] }}
          >
            <FaTimesCircle className="text-red-500 text-5xl mb-3" />
          </motion.div>
          <motion.h2 
            className="text-2xl font-bold text-red-700 mb-2"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.3, duration: 0.5 }}
          >
            Неуспешна резервация
          </motion.h2>
          <motion.p 
            className="text-gray-600"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.4, duration: 0.5 }}
          >
            {alert}
          </motion.p>
        </motion.div>
      )}

      <DetailRow 
        icon={<FaUser className="mr-2 text-orange-500" />} 
        label="Име" 
        value={person_name} 
        delay={0.1}
      />
      <DetailRow 
        icon={<FaPhone className="mr-2 text-orange-500" />} 
        label="Телефон" 
        value={`+359 ${phone}`} 
        delay={0.2}
      />
      <DetailRow 
        icon={<FaUsers className="mr-2 text-orange-500" />} 
        label="Брой гости" 
        value={persons} 
        delay={0.3}
      />
      <DetailRow
        icon={<FaCalendarDay className="mr-2 text-orange-500" />}
        label="Дата"
        value={
          <>
            {toWeekDay(new Date(from_date))}, {formattedDate(new Date(from_date))}
          </>
        }
        delay={0.4}
      />
      <DetailRow
        icon={<FaClock className="mr-2 text-orange-500" />}
        label="Час"
        value={from_time}
        delay={0.5}
      />
      {description && (
        <DetailRow
          icon={<FaInfoCircle className="mr-2 text-orange-500" />}
          label="Инфо"
          value={description}
          delay={0.6}
        />
      )}
      
      {isSuccess && (
        <motion.div 
          className="mt-6 text-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.7, duration: 0.5 }}
        >
          <motion.div 
            className="inline-block"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <button 
              className="px-6 py-2 bg-orange-500 text-white rounded-lg font-semibold hover:bg-orange-600 transition-colors duration-300"
              onClick={onNewReservation}
            >
              Направи нова резервация
            </button>
          </motion.div>
        </motion.div>
      )}
    </motion.div>
  );
};

export default ReservationDetails;