'use client'

import { useState } from 'react'

interface TestingValidationProps {
  systemInfo: any
  configData: any
  onComplete: (data: any) => void
  onBack?: () => void
  isCompleted: boolean
}

export default function TestingValidation({ 
  systemInfo, 
  configData, 
  onComplete, 
  onBack, 
  isCompleted 
}: TestingValidationProps) {
  const [testing, setTesting] = useState(false)

  const handleRunTests = async () => {
    setTesting(true)
    // Simulate testing process
    await new Promise(resolve => setTimeout(resolve, 3000))
    setTesting(false)
    onComplete({ 
      testing: { 
        passed: true, 
        completedAt: new Date().toISOString() 
      } 
    })
  }

  const getClusterDashboardUrl = () => {
    // Get the WebUI port from config, default to 9090
    const webuiPort = configData?.network?.ports?.webui || 9090
    return `http://localhost:${webuiPort}/dashboard`
  }

  const handleGoToDashboard = () => {
    const dashboardUrl = getClusterDashboardUrl()
    
    // Clear setup state since we're done
    localStorage.removeItem('bzzz-setup-state')
    
    // Open cluster dashboard in new tab
    window.open(dashboardUrl, '_blank')
    
    // Show completion message and suggest closing this tab
    const shouldClose = window.confirm(
      'Setup complete! The cluster dashboard has opened in a new tab.\n\n' +
      'You can now close this setup tab. Click OK to close automatically, or Cancel to keep it open.'
    )
    
    if (shouldClose) {
      window.close()
    }
  }

  return (
    <div className="space-y-6">
      <div className="text-center py-12">
        <h3 className="text-lg font-medium text-gray-900 mb-2">
          Testing & Validation
        </h3>
        <p className="text-gray-600">
          Validate your BZZZ cluster configuration and test all connections.
        </p>
        <div className="mt-8">
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-yellow-800">
            This component is under development. Testing and validation will be implemented here.
          </div>
        </div>
        
        {!isCompleted && (
          <div className="mt-8">
            <button
              onClick={handleRunTests}
              disabled={testing}
              className="btn-primary"
            >
              {testing ? 'Running Tests...' : 'Run Validation Tests'}
            </button>
          </div>
        )}
        
        {isCompleted && (
          <div className="mt-8 bg-eucalyptus-50 border border-eucalyptus-950 rounded-lg p-6">
            <h4 className="text-lg font-medium text-eucalyptus-600 mb-2">
              🎉 Setup Complete!
            </h4>
            <p className="text-eucalyptus-600 mb-4">
              Your CHORUS:agents cluster has been successfully configured and deployed.
            </p>
            <div className="space-y-2 text-sm text-eucalyptus-600 mb-4">
              <div>✓ System configuration validated</div>
              <div>✓ Network connectivity tested</div>
              <div>✓ Services deployed to all nodes</div>
              <div>✓ Cluster formation completed</div>
            </div>
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <p className="text-sm text-blue-800">
                <strong>Cluster Dashboard:</strong> <code>{getClusterDashboardUrl()}</code>
              </p>
              <p className="text-xs text-blue-600 mt-1">
                The setup process will be terminated and you'll be redirected to your operational cluster.
              </p>
            </div>
          </div>
        )}
      </div>

      <div className="flex justify-between pt-6 border-t border-gray-200">
        <div>
          {onBack && (
            <button onClick={onBack} className="btn-outline">
              Back
            </button>
          )}
        </div>
        
        {isCompleted && (
          <button onClick={handleGoToDashboard} className="btn-primary">
            Go to Cluster Dashboard
          </button>
        )}
      </div>
    </div>
  )
}