// File: src/components/UIX/OTPInput/OTPInput.jsx
// OTP Input Component for 6-digit verification codes
// Mobile-optimized with iOS/Android specific handling

import React, { forwardRef } from "react";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";
import useMobileOptimizations from "../hooks/useMobileOptimizations.jsx";

/**
 * OTPInput Component
 *
 * Specialized input field for One-Time Password (OTP) codes.
 * Optimized for 6-digit verification codes with mobile-specific enhancements.
 *
 * Features:
 * - Numeric-only input with proper keyboard on mobile
 * - Auto-complete support for SMS codes
 * - Success state when 6 digits are entered
 * - Error state with theme-aware styling
 * - Mobile-optimized with iOS/Android fixes
 * - Monospace font for better code readability
 * - Center-aligned large text
 *
 * @param {string} label - Label text for the input
 * @param {string} value - Current OTP value
 * @param {function} onChange - Change handler (receives the value directly)
 * @param {function} onKeyDown - Optional keyDown handler
 * @param {string} error - Error message to display
 * @param {boolean} disabled - Whether the input is disabled
 * @param {boolean} required - Whether the input is required
 * @param {number} maxLength - Maximum length (default: 6)
 * @param {string} placeholder - Placeholder text (default: "000000")
 * @param {string} helperText - Helper text below input
 * @param {boolean} autoFocus - Whether to auto-focus on mount
 * @param {string} className - Additional CSS classes
 *
 * @example
 * <OTPInput
 *   label="Enter Verification Code"
 *   value={token}
 *   onChange={setToken}
 *   error={errors.token}
 *   helperText="Enter the 6-digit code from your authenticator app"
 * />
 */
const OTPInput = forwardRef(
  (
    {
      label,
      value = "",
      onChange,
      onKeyDown,
      error,
      disabled = false,
      required = false,
      maxLength = 6,
      placeholder = "000000",
      helperText,
      autoFocus = false,
      className = "",
      ...props
    },
    ref
  ) => {
    const { getThemeClasses } = useUIXTheme();
    const { isMobile, isIOS } = useMobileOptimizations();

    // Determine input state
    const hasError = Boolean(error);
    const isComplete = value.length === maxLength;
    const isSuccess = isComplete && !hasError;

    // Generate unique ID for the input
    const inputId =
      props.id ||
      props.name ||
      `otp-input-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

    // Handle change with validation
    const handleChange = (e) => {
      const newValue = e.target.value;

      // Only allow numeric values
      if (!/^\d*$/.test(newValue)) {
        return;
      }

      // Respect maxLength
      if (newValue.length > maxLength) {
        return;
      }

      // Call onChange with the value directly (not the event)
      if (onChange) {
        onChange(newValue);
      }
    };

    // Determine border color based on state
    const getBorderColor = () => {
      if (hasError) {
        return "border-red-500 focus:border-red-600 focus:ring-red-200";
      }
      if (isSuccess) {
        return "border-green-500 focus:border-green-600 focus:ring-green-200";
      }
      return `${getThemeClasses("border-color")} ${getThemeClasses("focus-ring")}`;
    };

    // Background color based on state
    const getBackgroundColor = () => {
      if (disabled) {
        return "bg-gray-50";
      }
      if (hasError) {
        return "bg-red-50";
      }
      if (isSuccess) {
        return "bg-green-50";
      }
      return "bg-white";
    };

    return (
      <div className={className}>
        {/* Label */}
        {label && (
          <label
            htmlFor={inputId}
            className={`block text-base sm:text-lg font-semibold ${getThemeClasses("text-primary")} mb-3`}
          >
            {label}
            {required && (
              <span className={`ml-1 ${getThemeClasses("text-danger")}`}>
                *
              </span>
            )}
          </label>
        )}

        {/* Input Field */}
        <div className="relative">
          <input
            ref={ref}
            id={inputId}
            type="tel"
            inputMode="numeric"
            pattern="[0-9]*"
            value={value}
            onChange={handleChange}
            onKeyDown={onKeyDown}
            disabled={disabled}
            maxLength={maxLength}
            placeholder={placeholder}
            autoFocus={autoFocus}
            autoComplete="one-time-code"
            autoCorrect="off"
            autoCapitalize="off"
            spellCheck="false"
            className={`
              w-full text-center text-2xl font-mono tracking-wider
              px-4 py-4 border-2 rounded-xl
              transition-all duration-200
              focus:outline-none focus:ring-2
              ${getBorderColor()}
              ${getBackgroundColor()}
              ${disabled ? "cursor-not-allowed opacity-60" : ""}
              ${isMobile ? "text-3xl" : ""}
              ${isIOS ? "ios-input-fix ios-focus-fix" : ""}
            `}
            style={{
              fontSize: isMobile ? "18px" : undefined, // Prevent iOS zoom
              WebkitAppearance: "none",
              WebkitTapHighlightColor: "transparent",
            }}
            {...props}
          />

          {/* Character Counter */}
          {maxLength && (
            <div className="absolute right-3 bottom-3">
              <span
                className={`text-xs font-medium ${
                  isComplete
                    ? "text-green-600"
                    : hasError
                      ? "text-red-600"
                      : "text-gray-400"
                }`}
              >
                {value.length}/{maxLength}
              </span>
            </div>
          )}
        </div>

        {/* Helper Text */}
        {helperText && !error && (
          <p className={`mt-2 text-sm ${getThemeClasses("text-secondary")}`}>
            {helperText}
          </p>
        )}

        {/* Error Message */}
        {error && (
          <p className="mt-2 text-sm text-red-600 flex items-start">
            <svg
              className="w-4 h-4 mr-1 mt-0.5 flex-shrink-0"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                clipRule="evenodd"
              />
            </svg>
            {error}
          </p>
        )}

        {/* Success Indicator */}
        {isSuccess && (
          <p className="mt-2 text-sm text-green-600 flex items-center">
            <svg
              className="w-4 h-4 mr-1 flex-shrink-0"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
              />
            </svg>
            Code complete
          </p>
        )}
      </div>
    );
  }
);

OTPInput.displayName = "OTPInput";

export default OTPInput;
