bzzz/install/config-ui/app/setup/page.tsx

'use client'

import { useState, useEffect } from 'react'
import { ChevronRightIcon, CheckCircleIcon } from '@heroicons/react/24/outline'
import TermsAndConditions from './components/TermsAndConditions'
import LicenseValidation from './components/LicenseValidation'
import SystemDetection from './components/SystemDetection'
import RepositoryConfiguration from './components/RepositoryConfiguration'
import NetworkConfiguration from './components/NetworkConfiguration'
import SecuritySetup from './components/SecuritySetup'
import AIConfiguration from './components/AIConfiguration'
import ServiceDeployment from './components/ServiceDeployment'
import ClusterFormation from './components/ClusterFormation'
import TestingValidation from './components/TestingValidation'

const SETUP_STEPS = [
  {
    id: 'terms',
    title: 'Terms & Conditions',
    description: 'Review and accept the software license agreement',
    component: TermsAndConditions,
  },
  {
    id: 'license',
    title: 'License Validation',
    description: 'Validate your BZZZ license key and email',
    component: LicenseValidation,
  },
  {
    id: 'detection',
    title: 'System Detection',
    description: 'Detect hardware and validate installation',
    component: SystemDetection,
  },
  {
    id: 'repository',
    title: 'Repository Setup',
    description: 'Configure Git repository for task management',
    component: RepositoryConfiguration,
  },
  {
    id: 'network',
    title: 'Network Configuration',
    description: 'Configure network and firewall settings',
    component: NetworkConfiguration,
  },
  {
    id: 'security',
    title: 'Security Setup',
    description: 'Configure authentication and SSH access',
    component: SecuritySetup,
  },
  {
    id: 'ai',
    title: 'AI Integration',
    description: 'Configure OpenAI and Ollama/Parallama',
    component: AIConfiguration,
  },
  {
    id: 'deployment',
    title: 'Service Deployment',
    description: 'Deploy and configure CHORUS:agents services',
    component: ServiceDeployment,
  },
  {
    id: 'cluster',
    title: 'Cluster Formation',
    description: 'Join or create CHORUS:agents cluster',
    component: ClusterFormation,
  },
  {
    id: 'testing',
    title: 'Testing & Validation',
    description: 'Validate configuration and test connectivity',
    component: TestingValidation,
  },
]

interface ConfigData {
  [key: string]: any
}

export default function SetupPage() {
  const [currentStep, setCurrentStep] = useState(0)
  const [completedSteps, setCompletedSteps] = useState(new Set<number>())
  const [configData, setConfigData] = useState<ConfigData>({})
  const [systemInfo, setSystemInfo] = useState<any>(null)

  // Load persisted data and system information on mount
  useEffect(() => {
    loadPersistedData()
    fetchSystemInfo()
  }, [])

  // Save setup state to localStorage whenever it changes
  useEffect(() => {
    saveSetupState()
  }, [currentStep, completedSteps, configData])

  const loadPersistedData = () => {
    try {
      const savedState = localStorage.getItem('bzzz-setup-state')
      if (savedState) {
        const state = JSON.parse(savedState)
        setCurrentStep(state.currentStep || 0)
        setCompletedSteps(new Set(state.completedSteps || []))
        setConfigData(state.configData || {})
      }
    } catch (error) {
      console.error('Failed to load persisted setup data:', error)
    }
  }

  const saveSetupState = () => {
    try {
      const state = {
        currentStep,
        completedSteps: Array.from(completedSteps),
        configData,
        timestamp: new Date().toISOString()
      }
      localStorage.setItem('bzzz-setup-state', JSON.stringify(state))
    } catch (error) {
      console.error('Failed to save setup state:', error)
    }
  }

  const clearPersistedData = () => {
    try {
      localStorage.removeItem('bzzz-setup-state')
      // Reset state to initial values
      setCurrentStep(0)
      setCompletedSteps(new Set<number>())
      setConfigData({})
    } catch (error) {
      console.error('Failed to clear persisted data:', error)
    }
  }

  const fetchSystemInfo = async () => {
    try {
      const response = await fetch('/api/setup/system')
      if (response.ok) {
        const result = await response.json()
        setSystemInfo(result.system_info)
      }
    } catch (error) {
      console.error('Failed to fetch system info:', error)
    }
  }

  const handleStepComplete = (stepIndex: number, data: any) => {
    console.log('Setup Page: Step complete', { stepIndex, data, currentConfigData: configData })
    setCompletedSteps(prev => new Set([...prev, stepIndex]))
    setConfigData(prev => {
      const newConfigData = { ...prev, ...data }
      console.log('Setup Page: Updated configData', { prev, data, newConfigData })
      return newConfigData
    })
    
    // Auto-advance to next step
    if (stepIndex < SETUP_STEPS.length - 1) {
      setCurrentStep(stepIndex + 1)
    } else {
      // Setup is complete, clear persisted data after a delay
      setTimeout(() => {
        clearPersistedData()
      }, 2000)
    }
  }

  const handleStepBack = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

  const CurrentStepComponent = SETUP_STEPS[currentStep].component

  // Check if we're resuming from saved data
  const isResuming = currentStep > 0 || completedSteps.size > 0 || Object.keys(configData).length > 0

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          Welcome to CHORUS:agents Setup
        </h1>
        <p className="text-lg text-gray-600">
          Let's configure your distributed AI agent coordination cluster in {SETUP_STEPS.length} simple steps.
        </p>
      </div>

      {/* Resume Setup Notification */}
      {isResuming && (
        <div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
          <div className="flex items-start justify-between">
            <div className="flex items-start">
              <div className="flex-shrink-0">
                <svg className="h-5 w-5 text-blue-500 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div className="ml-3">
                <h3 className="text-sm font-medium text-blue-800">
                  Setup Progress Restored
                </h3>
                <p className="text-sm text-blue-700 mt-1">
                  Your previous setup progress has been restored. You're currently on step {currentStep + 1} of {SETUP_STEPS.length}.
                  {completedSteps.size > 0 && ` You've completed ${completedSteps.size} step${completedSteps.size !== 1 ? 's' : ''}.`}
                </p>
              </div>
            </div>
            <button
              onClick={clearPersistedData}
              className="text-blue-500 hover:text-blue-700 text-sm font-medium"
            >
              Start Over
            </button>
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Progress Sidebar */}
        <div className="lg:col-span-1">
          <div className="card sticky top-8">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">
              Setup Progress
            </h2>
            <nav className="space-y-2">
              {SETUP_STEPS.map((step, index) => {
                const isCompleted = completedSteps.has(index)
                const isCurrent = index === currentStep
                const isAccessible = index <= currentStep || completedSteps.has(index)

                return (
                  <button
                    key={step.id}
                    onClick={() => isAccessible && setCurrentStep(index)}
                    disabled={!isAccessible}
                    className={`w-full text-left p-3 rounded-lg border transition-all duration-200 ${
                      isCurrent
                        ? 'border-bzzz-primary bg-bzzz-primary bg-opacity-10 text-bzzz-primary'
                        : isCompleted
                        ? 'border-green-200 bg-green-50 text-green-700'
                        : isAccessible
                        ? 'border-gray-200 hover:border-gray-300 text-gray-700'
                        : 'border-gray-100 text-gray-400 cursor-not-allowed'
                    }`}
                  >
                    <div className="flex items-center">
                      <div className="flex-shrink-0 mr-3">
                        {isCompleted ? (
                          <CheckCircleIcon className="h-5 w-5 text-green-500" />
                        ) : (
                          <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-medium ${
                            isCurrent
                              ? 'border-bzzz-primary bg-bzzz-primary text-white'
                              : 'border-gray-300 text-gray-500'
                          }`}>
                            {index + 1}
                          </div>
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="text-sm font-medium truncate">
                          {step.title}
                        </div>
                        <div className="text-xs opacity-75 truncate">
                          {step.description}
                        </div>
                      </div>
                      {isAccessible && !isCompleted && (
                        <ChevronRightIcon className="h-4 w-4 opacity-50" />
                      )}
                    </div>
                  </button>
                )
              })}
            </nav>
            
            <div className="mt-6 pt-4 border-t border-gray-200">
              <div className="text-sm text-gray-600 mb-2">
                Progress: {completedSteps.size} of {SETUP_STEPS.length} steps
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div 
                  className="bg-bzzz-primary h-2 rounded-full transition-all duration-500"
                  style={{ width: `${(completedSteps.size / SETUP_STEPS.length) * 100}%` }}
                />
              </div>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="lg:col-span-3">
          <div className="card">
            <div className="mb-6">
              <div className="flex items-center justify-between mb-2">
                <h2 className="text-2xl font-bold text-gray-900">
                  {SETUP_STEPS[currentStep].title}
                </h2>
                <div className="text-sm text-gray-500">
                  Step {currentStep + 1} of {SETUP_STEPS.length}
                </div>
              </div>
              <p className="text-gray-600">
                {SETUP_STEPS[currentStep].description}
              </p>
            </div>

            <CurrentStepComponent
              systemInfo={systemInfo}
              configData={configData}
              onComplete={(data: any) => handleStepComplete(currentStep, data)}
              onBack={currentStep > 0 ? handleStepBack : undefined}
              isCompleted={completedSteps.has(currentStep)}
            />
          </div>
        </div>
      </div>
    </div>
  )
}