'use client'

import { useState } from 'react'

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

export default function AIConfiguration({ 
  systemInfo, 
  configData, 
  onComplete, 
  onBack, 
  isCompleted 
}: AIConfigurationProps) {
  const [config, setConfig] = useState({
    openaiApiKey: '',
    defaultModel: 'gpt-5',
    dailyCostLimit: 100,
    monthlyCostLimit: 1000,
    ollamaEnabled: true
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onComplete({ ai: config })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="text-center py-12">
        <h3 className="text-lg font-medium text-gray-900 mb-2">
          AI Integration
        </h3>
        <p className="text-gray-600">
          Configure OpenAI API, Ollama/Parallama, and cost management settings.
        </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. AI configuration will be implemented here.
          </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" className="btn-primary">
          {isCompleted ? 'Continue' : 'Next: Resource Allocation'}
        </button>
      </div>
    </form>
  )
}