// File: src/components/UIX/BackupCodeDisplay/BackupCodeDisplay.jsx
// Backup Code Display Component for 2FA
// Shows backup code with copy functionality and security warnings

import React, { useState } from "react";
import {
  DocumentDuplicateIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
} from "@heroicons/react/24/outline";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";
import useMobileOptimizations from "../hooks/useMobileOptimizations.jsx";

/**
 * BackupCodeDisplay Component
 *
 * Specialized component for displaying 2FA backup codes with copy functionality
 * and security warnings. Optimized for mobile devices.
 *
 * Features:
 * - Large, readable backup code display
 * - One-click copy to clipboard
 * - Visual feedback on copy success
 * - Security warnings and best practices
 * - Mobile-optimized layout
 * - Theme-aware styling
 *
 * @param {string} code - The backup code to display (required)
 * @param {string} label - Label text (default: "Backup Code:")
 * @param {boolean} showWarnings - Whether to show security warnings (default: true)
 * @param {function} onCopy - Optional callback when code is copied
 * @param {string} className - Additional CSS classes
 *
 * @example
 * <BackupCodeDisplay
 *   code="ABC123XYZ789"
 *   label="Your 2FA Backup Code"
 *   showWarnings={true}
 *   onCopy={() => console.log('Code copied')}
 * />
 */
function BackupCodeDisplay({
  code,
  label = "Backup Code:",
  showWarnings = true,
  onCopy,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();
  const { isMobile } = useMobileOptimizations();
  const [copied, setCopied] = useState(false);

  // Handle copy to clipboard
  const handleCopyCode = async () => {
    if (!code) return;

    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);

      // Call optional callback
      if (onCopy) {
        onCopy();
      }

      // Reset copied state after 3 seconds
      setTimeout(() => {
        setCopied(false);
      }, 3000);
    } catch (error) {
      console.error("Failed to copy backup code to clipboard", error);
    }
  };

  if (!code) {
    return null;
  }

  return (
    <div className={`space-y-4 ${className}`}>
      {/* Header with Copy Button */}
      <div className="flex items-center justify-between">
        <label
          className={`text-lg font-semibold ${getThemeClasses("text-primary")}`}
        >
          {label}
        </label>
        <button
          onClick={handleCopyCode}
          className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
            copied
              ? "bg-green-100 text-green-700 border border-green-300"
              : `bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200 ${getThemeClasses("hover-transform")}`
          } ${isMobile ? "min-h-[44px]" : ""}`}
          type="button"
        >
          {copied ? (
            <>
              <CheckCircleIcon className="h-4 w-4" />
              <span className="text-sm font-medium">Copied!</span>
            </>
          ) : (
            <>
              <DocumentDuplicateIcon className="h-4 w-4" />
              <span className="text-sm font-medium">Copy</span>
            </>
          )}
        </button>
      </div>

      {/* Backup Code Display */}
      <div className="relative">
        <textarea
          readOnly
          value={code}
          className={`
            w-full h-24 sm:h-32 p-4 sm:p-6
            border-2 border-green-300 rounded-xl
            bg-green-50 font-mono text-base sm:text-lg font-bold
            text-center resize-none
            focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500
            ${isMobile ? "text-xl" : ""}
          `}
          style={{
            textAlign: "center",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: isMobile ? "16px" : undefined, // Prevent iOS zoom
            WebkitAppearance: "none",
          }}
        />
        <div className={`text-xs sm:text-sm ${getThemeClasses("text-secondary")} mt-3 text-center`}>
          Save this code in a secure location. You'll need it if you lose access
          to your 2FA device.
        </div>
      </div>

      {/* Security Warnings */}
      {showWarnings && (
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 sm:p-6">
          <div className="flex items-start space-x-3">
            <ExclamationTriangleIcon className="h-6 w-6 text-amber-600 mt-0.5 flex-shrink-0" />
            <div>
              <h3 className="font-semibold text-amber-900 mb-3">
                Important Security Notes
              </h3>
              <ul className="space-y-2 text-sm text-amber-800">
                <li className="flex items-start space-x-2">
                  <span className="w-1.5 h-1.5 bg-amber-600 rounded-full mt-2 flex-shrink-0"></span>
                  <span>This backup code can only be used once</span>
                </li>
                <li className="flex items-start space-x-2">
                  <span className="w-1.5 h-1.5 bg-amber-600 rounded-full mt-2 flex-shrink-0"></span>
                  <span>
                    Store it in a secure password manager or safe location
                  </span>
                </li>
                <li className="flex items-start space-x-2">
                  <span className="w-1.5 h-1.5 bg-amber-600 rounded-full mt-2 flex-shrink-0"></span>
                  <span>
                    Never share this code with anyone, including support staff
                  </span>
                </li>
                <li className="flex items-start space-x-2">
                  <span className="w-1.5 h-1.5 bg-amber-600 rounded-full mt-2 flex-shrink-0"></span>
                  <span>
                    After using it, you'll need to set up 2FA again to get a new
                    backup code
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      )}

      {/* Success Indicator */}
      {copied && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-3">
          <div className="flex items-center space-x-2 text-green-700">
            <CheckCircleIcon className="h-5 w-5 flex-shrink-0" />
            <span className="text-sm font-medium">
              Backup code copied to clipboard! Make sure to save it securely.
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

export default BackupCodeDisplay;
