
import React from 'react';
import { X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';

export const FormSection = ({ title, description, children, className }) => (
  <div className={cn("mb-6 pb-6 border-b border-gray-100 dark:border-gray-800 last:border-0 last:mb-0 last:pb-0", className)}>
    <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">{title}</h4>
    {description && <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">{description}</p>}
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {children}
    </div>
  </div>
);


export const FormField = ({ label, children, required, error, fullWidth, className }) => (
  <div className={cn("space-y-1.5", fullWidth ? "col-span-1 md:col-span-2" : "col-span-1", className)}>
    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
      {label} {required && <span className="text-red-500">*</span>}
    </label>
    {children}
    {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
  </div>
);

export const Input = React.forwardRef(({ className, error, ...props }, ref) => (
  <input
    ref={ref}
    className={cn(
      "w-full px-3 py-2 bg-white dark:bg-gray-950 border rounded-xl text-sm shadow-sm transition-all focus:outline-none focus:ring-2",
      error 
        ? "border-red-300 focus:border-red-500 focus:ring-red-200" 
        : "border-gray-200 dark:border-gray-800 focus:border-[#941403] focus:ring-red-100/50",
      className
    )}
    {...props}
  />
));
Input.displayName = "Input";

export const Select = React.forwardRef(({ className, error, children, ...props }, ref) => (
  <select
    ref={ref}
    className={cn(
      "w-full px-3 py-2 bg-white dark:bg-gray-950 border rounded-xl text-sm shadow-sm transition-all focus:outline-none focus:ring-2",
      error 
        ? "border-red-300 focus:border-red-500 focus:ring-red-200" 
        : "border-gray-200 dark:border-gray-800 focus:border-[#941403] focus:ring-red-100/50",
      className
    )}
    {...props}
  >
    {children}
  </select>
));
Select.displayName = "Select";

export const Textarea = React.forwardRef(({ className, error, ...props }, ref) => (
  <textarea
    ref={ref}
    className={cn(
      "w-full px-3 py-2 bg-white dark:bg-gray-950 border rounded-xl text-sm shadow-sm transition-all focus:outline-none focus:ring-2 resize-none",
      error 
        ? "border-red-300 focus:border-red-500 focus:ring-red-200" 
        : "border-gray-200 dark:border-gray-800 focus:border-[#941403] focus:ring-red-100/50",
      className
    )}
    {...props}
  />
));
Textarea.displayName = "Textarea";


const FormModal = ({ isOpen, onClose, title, children, onSubmit, loading, submitLabel = "Enregistrer", cancelLabel = "Annuler", size = "md" }) => {
  if (!isOpen) return null;

  const sizeClasses = {
    sm: "max-w-md",
    md: "max-w-2xl",
    lg: "max-w-4xl",
    xl: "max-w-6xl",
    full: "max-w-[95vw]"
  };

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
        <motion.div 
          initial={{ opacity: 0 }} 
          animate={{ opacity: 1 }} 
          exit={{ opacity: 0 }}
          onClick={onClose}
          className="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
        />
        <motion.div 
          initial={{ opacity: 0, x: 100 }} 
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: 100 }}
          className={cn(
            "relative bg-white dark:bg-gray-950 w-full rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]",
            sizeClasses[size] || sizeClasses.md
          )}
        >
          <div className="flex-shrink-0 px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center bg-gray-50/50 dark:bg-gray-900/50">
            <h3 className="text-lg font-bold text-gray-900 dark:text-white">{title}</h3>
            <button 
              onClick={onClose} 
              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full transition-colors"
            >
              <X className="w-5 h-5 text-gray-500" />
            </button>
          </div>
          
          <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
            {children}
          </div>

          <div className="flex-shrink-0 px-6 py-4 border-t border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
            >
              {cancelLabel}
            </button>
            {onSubmit && (
              <button
                type="button"
                onClick={onSubmit}
                disabled={loading}
                className="inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-[#941403] text-white rounded-xl text-sm font-medium hover:bg-[#7a1002] focus:outline-none focus:ring-2 focus:ring-[#941403] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-red-900/20"
              >
                {loading && <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />}
                {submitLabel}
              </button>
            )}
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
};

export default FormModal;
