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

// Types
interface FormSectionProps {
  title: string;
  description?: string;
  children: ReactNode;
  className?: string;
}

interface FormFieldProps {
  label: string;
  children: ReactNode;
  required?: boolean;
  error?: string;
  fullWidth?: boolean;
  className?: string;
}

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: string;
}

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  error?: string;
  children: ReactNode;
}

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  error?: string;
}

interface FormModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
  onSubmit?: () => void;
  loading?: boolean;
  submitLabel?: string;
  cancelLabel?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

// Components
export const FormSection: React.FC<FormSectionProps> = ({
  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-md 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="space-y-4">{children}</div>
  </div>
);

export const FormField: React.FC<FormFieldProps> = ({ 
  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-bold text-gray-900 dark:text-gray-300">
      {label} {required && <span className="text-green-500">*</span>}
    </label>
    {children}
    {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
  </div>
);

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ 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 placeholder-[#6A6A6A]",
        error 
          ? "border-black focus:border-black focus:ring-black" 
          : "border-[#F2F2F2] dark:border-gray-800 focus:border-[#338660] focus:ring-[#338660]",
        className
      )}
      {...props}
    />
  )
);
Input.displayName = "Input";

export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
  ({ 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-[#007E45] focus:ring-red-100/50",
        className
      )}
      {...props}
    >
      {children}
    </select>
  )
);
Select.displayName = "Select";

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ 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-[#007E45] focus:ring-red-100/50",
        className
      )}
      {...props}
    />
  )
);
Textarea.displayName = "Textarea";



export const RepresentantInput = () => {
  return (
    <FormField label="Représentant">
      <div
        className={cn(
          "w-full px-2 py-2 opacity-80 cursor-not-allowed bg-gray-50 dark:bg-gray-900 border rounded-xl text-sm shadow-sm flex flex-row items-center gap-2 transition-all focus:outline-none focus:ring-2",
          "border-gray-200 dark:border-gray-800 focus:border-[#941403] focus:ring-red-100/50"
        )}
      >
        <div className="w-6 h-6 rounded-full bg-[#007E45] text-white flex items-center justify-center text-[10px] font-semibold" style={{background: "#007E45", width:"3vh", height:"3vh"}}>
          JD
        </div>
        <div>
          <span>Jean Dupont</span>
        </div>
      </div>
    </FormField>
  )
}



interface FormModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
  onSubmit?: () => void;
  loading?: boolean;
  submitLabel?: string;
  cancelLabel?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  disabled?: boolean;
  showBackButton?: boolean;
  onBack?: () => void;
  backLabel?: string;
  hideFooter?: boolean;
  submitVariant?: 'primary' | 'danger';
}

const FormModal: React.FC<FormModalProps> = ({ 
  isOpen, 
  onClose, 
  title, 
  children, 
  onSubmit, 
  loading = false, 
  submitLabel = "Enregistrer", 
  cancelLabel = "Annuler", 
  size = "md",
  disabled = false,
  showBackButton = false,
  onBack,
  backLabel = "Retour",
  hideFooter = false,
  submitVariant = 'primary'
}) => {
  if (!isOpen) return null;

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

  const submitButtonClasses = {
    primary: "bg-[#007E45] hover:bg-[#006837] focus:ring-[#007E45] shadow-green-900/20",
    danger: "bg-[#941403] hover:bg-[#7a1003] focus:ring-[#941403] shadow-red-900/20"
  };

  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
          )}
        >
          {/* Header */}
          <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">
            <div className="flex items-center gap-3">
              {showBackButton && onBack && (
                <button
                  type="button"
                  onClick={onBack}
                  className="p-2 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full transition-colors text-gray-500"
                >
                  <ArrowLeft className="w-5 h-5" />
                </button>
              )}
              <h3 className="text-lg font-bold text-gray-900 dark:text-white">{title}</h3>
            </div>
            <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>
          
          {/* Content */}
          <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
            {children}
          </div>

          {/* Footer */}
          {!hideFooter && (
            <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-between items-center">
              {/* Left side - Back button or empty */}
              <div>
                {showBackButton && onBack && (
                  <button
                    type="button"
                    onClick={onBack}
                    className="inline-flex items-center gap-2 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"
                  >
                    <ArrowLeft className="w-4 h-4" />
                    {backLabel}
                  </button>
                )}
              </div>

              {/* Right side - Cancel and Submit */}
              <div className="flex items-center 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 || disabled}
                    className={cn(
                      "inline-flex items-center justify-center gap-2 px-6 py-2.5 text-white rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg",
                      submitButtonClasses[submitVariant]
                    )}
                  >
                    {loading && (
                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    )}
                    {submitLabel}
                  </button>
                )}
              </div>
            </div>
          )}
        </motion.div>
      </div>
    </AnimatePresence>
  );
};

export default FormModal;