"use client";

import React, { useState, useCallback } from "react";
import { DesktopChatModal } from "./desktop-chat-modal";
import { I18nProvider } from "./i18n-context";
import { ModalStateProvider, useModalState } from "./modal-state-context";

interface AccessibilityTestProps {
  onTestResult?: (testName: string, passed: boolean, details?: string) => void;
}

// Accessibility testing utility component
function AccessibilityTester({ onTestResult }: AccessibilityTestProps) {
  const { modalState, openModal, closeModal } = useModalState();
  const [testResults, setTestResults] = useState<
    Array<{
      name: string;
      passed: boolean;
      details?: string;
    }>
  >([]);

  const runTest = useCallback(
    (testName: string, testFn: () => boolean, details?: string) => {
      try {
        const passed = testFn();
        const result = { name: testName, passed, details };
        setTestResults((prev) => [
          ...prev.filter((r) => r.name !== testName),
          result,
        ]);
        onTestResult?.(testName, passed, details);
        return passed;
      } catch (error) {
        const result = {
          name: testName,
          passed: false,
          details: `Test failed with error: ${
            error instanceof Error ? error.message : "Unknown error"
          }`,
        };
        setTestResults((prev) => [
          ...prev.filter((r) => r.name !== testName),
          result,
        ]);
        onTestResult?.(testName, false, result.details);
        return false;
      }
    },
    [onTestResult]
  );

  // Test keyboard navigation
  const testKeyboardNavigation = useCallback(() => {
    return runTest(
      "Keyboard Navigation",
      () => {
        // Check if modal can be opened
        if (!modalState.isOpen) {
          openModal();
        }

        // Check for focusable elements
        const modal = document.querySelector('[role="dialog"]');
        if (!modal) return false;

        const focusableElements = modal.querySelectorAll(
          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])'
        );

        return focusableElements.length > 0;
      },
      "Modal contains focusable elements for keyboard navigation"
    );
  }, [modalState.isOpen, openModal, runTest]);

  // Test ARIA attributes
  const testAriaAttributes = useCallback(() => {
    return runTest(
      "ARIA Attributes",
      () => {
        const modal = document.querySelector('[role="dialog"]');
        if (!modal) return false;

        const hasAriaModal = modal.getAttribute("aria-modal") === "true";
        const hasAriaLabelledby = modal.hasAttribute("aria-labelledby");
        const hasAriaDescribedby = modal.hasAttribute("aria-describedby");

        return hasAriaModal && hasAriaLabelledby && hasAriaDescribedby;
      },
      "Modal has proper ARIA attributes (aria-modal, aria-labelledby, aria-describedby)"
    );
  }, [runTest]);

  // Test focus management
  const testFocusManagement = useCallback(() => {
    return runTest(
      "Focus Management",
      () => {
        if (!modalState.isOpen) {
          openModal();
          // Wait for modal to open and focus to be set
          setTimeout(() => {
            const activeElement = document.activeElement;
            const modal = document.querySelector('[role="dialog"]');
            return modal?.contains(activeElement || null) || false;
          }, 200);
        }
        return true; // Initial check passes if modal is already open
      },
      "Focus is properly managed when modal opens"
    );
  }, [modalState.isOpen, openModal, runTest]);

  // Test screen reader announcements
  const testScreenReaderSupport = useCallback(() => {
    return runTest(
      "Screen Reader Support",
      () => {
        // Check for aria-live regions
        const ariaLiveElements = document.querySelectorAll("[aria-live]");
        const hasTypingIndicator = document.querySelector('[role="status"]');
        const hasMessageLog = document.querySelector('[role="log"]');

        return (
          ariaLiveElements.length > 0 &&
          hasTypingIndicator !== null &&
          hasMessageLog !== null
        );
      },
      "Screen reader support with aria-live regions, status indicators, and message log"
    );
  }, [runTest]);

  // Test responsive design
  const testResponsiveDesign = useCallback(() => {
    return runTest(
      "Responsive Design",
      () => {
        const modal = document.querySelector('[role="dialog"]') as HTMLElement;
        if (!modal) return false;

        const computedStyle = window.getComputedStyle(modal);
        const hasMaxWidth = computedStyle.maxWidth !== "none";
        const hasMaxHeight = computedStyle.maxHeight !== "none";

        // Check if modal adapts to viewport size
        const viewportWidth = window.innerWidth;
        const modalWidth = modal.offsetWidth;
        const isResponsive = modalWidth <= viewportWidth * 0.95; // Should not exceed 95% of viewport

        return hasMaxWidth && hasMaxHeight && isResponsive;
      },
      "Modal is responsive and adapts to different screen sizes"
    );
  }, [runTest]);

  // Test escape key functionality
  const testEscapeKey = useCallback(() => {
    return runTest(
      "Escape Key",
      () => {
        if (!modalState.isOpen) {
          openModal();
        }

        // Simulate escape key press
        const escapeEvent = new KeyboardEvent("keydown", {
          key: "Escape",
          code: "Escape",
          keyCode: 27,
          bubbles: true,
          cancelable: true,
        });

        document.dispatchEvent(escapeEvent);

        // Check if modal closed (with a small delay for state update)
        setTimeout(() => {
          return !modalState.isOpen;
        }, 100);

        return true; // Initial test passes, actual result checked in timeout
      },
      "Modal can be closed with Escape key"
    );
  }, [modalState.isOpen, openModal, runTest]);

  // Run all tests
  const runAllTests = useCallback(() => {
    console.log("🧪 Running Accessibility Tests...");

    const tests = [
      testKeyboardNavigation,
      testAriaAttributes,
      testFocusManagement,
      testScreenReaderSupport,
      testResponsiveDesign,
      testEscapeKey,
    ];

    let allPassed = true;
    tests.forEach((test, index) => {
      setTimeout(() => {
        const result = test();
        if (!result) allPassed = false;

        // Log final result after all tests
        if (index === tests.length - 1) {
          setTimeout(() => {
            console.log(
              `✅ Accessibility Tests Completed: ${
                allPassed ? "ALL PASSED" : "SOME FAILED"
              }`
            );
          }, 500);
        }
      }, index * 100); // Stagger tests slightly
    });
  }, [
    testKeyboardNavigation,
    testAriaAttributes,
    testFocusManagement,
    testScreenReaderSupport,
    testResponsiveDesign,
    testEscapeKey,
  ]);

  return (
    <div className="p-6 bg-gray-50 rounded-lg border border-gray-200">
      <h3 className="text-lg font-semibold mb-4">🔍 Accessibility Testing</h3>

      <div className="space-y-3 mb-4">
        <button
          onClick={runAllTests}
          className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
        >
          Run All Accessibility Tests
        </button>

        <div className="flex flex-wrap gap-2">
          <button
            onClick={testKeyboardNavigation}
            className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300"
          >
            Keyboard Navigation
          </button>
          <button
            onClick={testAriaAttributes}
            className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300"
          >
            ARIA Attributes
          </button>
          <button
            onClick={testFocusManagement}
            className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300"
          >
            Focus Management
          </button>
          <button
            onClick={testScreenReaderSupport}
            className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300"
          >
            Screen Reader
          </button>
          <button
            onClick={testResponsiveDesign}
            className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300"
          >
            Responsive Design
          </button>
          <button
            onClick={testEscapeKey}
            className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300"
          >
            Escape Key
          </button>
        </div>
      </div>

      {/* Test Results */}
      {testResults.length > 0 && (
        <div className="space-y-2">
          <h4 className="font-medium text-gray-700">Test Results:</h4>
          {testResults.map((result) => (
            <div
              key={result.name}
              className={`p-3 rounded border-l-4 ${
                result.passed
                  ? "bg-green-50 border-green-400 text-green-800"
                  : "bg-red-50 border-red-400 text-red-800"
              }`}
            >
              <div className="flex items-center">
                <span className="mr-2">{result.passed ? "✅" : "❌"}</span>
                <span className="font-medium">{result.name}</span>
              </div>
              {result.details && (
                <p className="mt-1 text-sm opacity-75">{result.details}</p>
              )}
            </div>
          ))}
        </div>
      )}

      {/* Accessibility Guidelines */}
      <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
        <h4 className="font-medium text-blue-800 mb-2">
          📋 Accessibility Guidelines
        </h4>
        <ul className="text-sm text-blue-700 space-y-1">
          <li>• Modal is keyboard navigable with Tab/Shift+Tab</li>
          <li>• Focus is trapped within the modal when open</li>
          <li>• Escape key closes the modal</li>
          <li>• ARIA roles and labels are properly set</li>
          <li>• Screen readers can announce new messages</li>
          <li>• Modal is responsive across device sizes</li>
          <li>• Color contrast meets WCAG standards</li>
          <li>• Interactive elements have sufficient touch targets (44px+)</li>
        </ul>
      </div>
    </div>
  );
}

// Main testing component with providers
export function DesktopChatModalAccessibilityTest() {
  const [testResults, setTestResults] = useState<
    Array<{
      testName: string;
      passed: boolean;
      details?: string;
    }>
  >([]);

  const handleTestResult = useCallback(
    (testName: string, passed: boolean, details?: string) => {
      setTestResults((prev) => [
        ...prev.filter((r) => r.testName !== testName),
        { testName, passed, details },
      ]);
    },
    []
  );

  return (
    <I18nProvider defaultLanguage="ko">
      <ModalStateProvider>
        <div className="min-h-screen bg-gray-100 p-8">
          <div className="max-w-4xl mx-auto space-y-8">
            <h1 className="text-3xl font-bold text-gray-900">
              데스크톱 챗봇 접근성 테스트
            </h1>

            <AccessibilityTester onTestResult={handleTestResult} />

            <div className="bg-white p-6 rounded-lg border border-gray-200">
              <h3 className="text-lg font-semibold mb-4">💬 Test Chat Modal</h3>
              <p className="text-gray-600 mb-4">
                아래 버튼을 클릭하여 채팅 모달을 열고 접근성 기능을
                테스트해보세요.
              </p>

              {/* This will render the actual modal for testing */}
              <DesktopChatModalTestWrapper />
            </div>

            {/* Summary */}
            {testResults.length > 0 && (
              <div className="bg-white p-6 rounded-lg border border-gray-200">
                <h3 className="text-lg font-semibold mb-4">📊 Test Summary</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center p-4 bg-green-50 rounded">
                    <div className="text-2xl font-bold text-green-600">
                      {testResults.filter((r) => r.passed).length}
                    </div>
                    <div className="text-green-700">Passed</div>
                  </div>
                  <div className="text-center p-4 bg-red-50 rounded">
                    <div className="text-2xl font-bold text-red-600">
                      {testResults.filter((r) => !r.passed).length}
                    </div>
                    <div className="text-red-700">Failed</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </ModalStateProvider>
    </I18nProvider>
  );
}

// Wrapper for the actual modal to test
function DesktopChatModalTestWrapper() {
  const { openModal } = useModalState();
  const [isTyping, setIsTyping] = useState(false);

  const handleSendMessage = useCallback(async (message: string) => {
    setIsTyping(true);

    // Simulate API delay
    await new Promise((resolve) => setTimeout(resolve, 1000));

    setIsTyping(false);
  }, []);

  return (
    <>
      <button
        onClick={openModal}
        className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        Open Chat Modal
      </button>

      <DesktopChatModal
        onSendMessage={handleSendMessage}
        isTyping={isTyping}
        title="접근성 테스트 챗봇"
        placeholder="테스트 메시지를 입력하세요..."
        showSuggestedQuestions={true}
        announceMessages={true}
      />
    </>
  );
}

export default DesktopChatModalAccessibilityTest;