bzzz/install/config-ui/app/setup/components/LicenseValidation.tsx

'use client'

import { useState } from 'react'
import { 
  KeyIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  UserIcon,
  DocumentTextIcon
} from '@heroicons/react/24/outline'

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

interface LicenseData {
  email: string
  licenseKey: string
  organizationName?: string
  acceptedAt?: string
}

export default function LicenseValidation({ 
  systemInfo, 
  configData, 
  onComplete, 
  onBack, 
  isCompleted 
}: LicenseValidationProps) {
  const [licenseData, setLicenseData] = useState<LicenseData>({
    email: configData?.license?.email || '',
    licenseKey: configData?.license?.licenseKey || '',
    organizationName: configData?.license?.organizationName || ''
  })
  
  const [validating, setValidating] = useState(false)
  const [validationResult, setValidationResult] = useState<{
    valid: boolean
    message: string
    details?: any
  } | null>(null)
  const [error, setError] = useState('')
  
  // Email validation function
  const isValidEmail = (email: string): boolean => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }
  
  // Check if form is ready for validation
  const canValidate = licenseData.email && 
                     isValidEmail(licenseData.email) && 
                     licenseData.licenseKey

  const validateLicense = async () => {
    if (!licenseData.email || !licenseData.licenseKey) {
      setError('Both email and license key are required')
      return
    }
    
    if (!isValidEmail(licenseData.email)) {
      setError('Please enter a valid email address')
      return
    }

    setValidating(true)
    setError('')
    setValidationResult(null)

    try {
      const response = await fetch('/api/setup/license/validate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: licenseData.email,
          licenseKey: licenseData.licenseKey,
          organizationName: licenseData.organizationName
        }),
      })

      const result = await response.json()

      if (response.ok && result.valid) {
        setValidationResult({
          valid: true,
          message: result.message || 'License validated successfully',
          details: result.details
        })
      } else {
        setValidationResult({
          valid: false,
          message: result.message || 'License validation failed',
          details: result.details
        })
      }
    } catch (error) {
      console.error('License validation error:', error)
      setValidationResult({
        valid: false,
        message: 'Failed to validate license. Please check your connection and try again.'
      })
    } finally {
      setValidating(false)
    }
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!licenseData.email || !licenseData.licenseKey) {
      setError('Both email and license key are required')
      return
    }

    if (!validationResult?.valid) {
      setError('Please validate your license before continuing')
      return
    }

    setError('')
    onComplete({ 
      license: { 
        ...licenseData,
        validatedAt: new Date().toISOString(),
        validationDetails: validationResult.details
      } 
    })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-8">

      {/* License Information */}
      <div className="card">
        <div className="flex items-center mb-4">
          <KeyIcon className="h-6 w-6 text-bzzz-primary mr-2" />
          <h3 className="text-lg font-medium text-gray-900">License Information</h3>
          {validationResult?.valid && <CheckCircleIcon className="h-5 w-5 text-eucalyptus-600 ml-2" />}
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Email Address
            </label>
            <div className="relative">
              <UserIcon className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
              <input
                type="email"
                value={licenseData.email}
                onChange={(e) => setLicenseData(prev => ({ ...prev, email: e.target.value }))}
                placeholder="your-email@company.com"
                className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-bzzz-primary focus:border-bzzz-primary ${
                  licenseData.email && !isValidEmail(licenseData.email) 
                    ? 'border-red-300 bg-red-50' 
                    : 'border-gray-300'
                }`}
                required
              />
            </div>
            {licenseData.email && !isValidEmail(licenseData.email) ? (
              <p className="text-sm text-red-600 mt-1">Please enter a valid email address</p>
            ) : (
              <p className="text-sm text-gray-500 mt-1">
                The email address associated with your CHORUS:agents license
              </p>
            )}
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              License Key
            </label>
            <div className="relative">
              <KeyIcon className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
              <input
                type="text"
                value={licenseData.licenseKey}
                onChange={(e) => setLicenseData(prev => ({ ...prev, licenseKey: e.target.value }))}
                placeholder="BZZZ-XXXX-XXXX-XXXX-XXXX"
                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-bzzz-primary focus:border-bzzz-primary font-mono"
                required
              />
            </div>
            <p className="text-sm text-gray-500 mt-1">
              Your unique CHORUS:agents license key (found in your purchase confirmation email)
            </p>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Organization Name (Optional)
            </label>
            <input
              type="text"
              value={licenseData.organizationName}
              onChange={(e) => setLicenseData(prev => ({ ...prev, organizationName: e.target.value }))}
              placeholder="Your Company Name"
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-bzzz-primary focus:border-bzzz-primary"
            />
            <p className="text-sm text-gray-500 mt-1">
              Optional: Organization name for license tracking
            </p>
          </div>

          <button
            type="button"
            onClick={validateLicense}
            disabled={validating || !canValidate}
            className={`w-full py-3 px-4 rounded-lg font-medium transition-colors ${
              validating || !canValidate
                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                : 'bg-bzzz-primary text-white hover:bg-bzzz-primary-dark'
            }`}
          >
            {validating ? 'Validating License...' : 'Validate License'}
          </button>
        </div>
      </div>

      {/* Validation Result */}
      {validationResult && (
        <div className={`panel ${validationResult.valid ? 'panel-success' : 'panel-error'}`}>
          <div className="flex items-start">
            <div className="flex-shrink-0">
              {validationResult.valid ? (
                <CheckCircleIcon className="h-6 w-6 text-eucalyptus-600 dark:text-eucalyptus-50" />
              ) : (
                <ExclamationTriangleIcon className="h-6 w-6 text-coral-950 dark:text-coral-50" />
              )}
            </div>
            <div className="ml-3">
              <h4 className={`text-sm font-medium panel-title`}>
                {validationResult.valid ? 'License Valid' : 'License Invalid'}
              </h4>
              <p className={`text-sm mt-1 panel-body`}>
                {validationResult.message}
              </p>
              
              {validationResult.valid && validationResult.details && (
                <div className="mt-3 text-sm panel-body">
                  <p><strong>License Type:</strong> {validationResult.details.licenseType || 'Standard'}</p>
                  <p><strong>Max Nodes:</strong> {validationResult.details.maxNodes || 'Unlimited'}</p>
                  <p><strong>Expires:</strong> {validationResult.details.expiresAt || 'Never'}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {error && (
        <div className="flex items-center text-red-600 text-sm">
          <ExclamationTriangleIcon className="h-4 w-4 mr-1" />
          {error}
        </div>
      )}

      {/* Need a License Panel */}
      <div className="rounded-lg p-4 border bg-chorus-warm border-chorus-border-subtle dark:bg-mulberry-900 dark:border-chorus-border-defined">
        <div className="flex items-start">
          <DocumentTextIcon className="h-5 w-5 text-chorus-text-primary mt-0.5 mr-2 opacity-80" />
          <div className="text-sm">
            <h4 className="font-medium text-chorus-text-primary mb-1">Need a License?</h4>
            <p className="text-chorus-text-secondary">
              If you don't have a CHORUS:agents license yet, you can:
            </p>
            <ul className="text-chorus-text-secondary mt-1 space-y-1 ml-4">
              <li>• Visit <a href="https://chorus.services/bzzz" target="_blank" className="underline hover:no-underline text-chorus-text-primary">chorus.services/bzzz</a> to purchase a license</li>
              <li>• Contact our sales team at <a href="mailto:sales@chorus.services" className="underline hover:no-underline text-chorus-text-primary">sales@chorus.services</a></li>
              <li>• Request a trial license for evaluation purposes</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="flex justify-between pt-6 border-t border-gray-200">
        <div>
          {onBack && (
            <button type="button" onClick={onBack} className="btn-outline">
              Back
            </button>
          )}
        </div>
        <button 
          type="submit" 
          disabled={!validationResult?.valid}
          className={`${validationResult?.valid ? 'btn-primary' : 'btn-disabled'}`}
        >
          {isCompleted ? 'Continue' : 'Next: System Detection'}
        </button>
      </div>
    </form>
  )
}