'use client'

import { useState, useRef, useEffect } from 'react'

interface Message {
  role: 'user' | 'assistant'
  content: string
  actions?: Array<{
    type: string
    description: string
    command?: string
  }>
}

interface CopilotProps {
  onClose: () => void
}

export default function Copilot({ onClose }: CopilotProps) {
  const [messages, setMessages] = useState<Message[]>([
    {
      role: 'assistant',
      content: 'Olá! Sou o OPHION Copilot. Posso ajudar com análise de métricas, troubleshooting, ou qualquer dúvida sobre sua infraestrutura. Como posso ajudar?',
    },
  ])
  const [input, setInput] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

    const userMessage = input.trim()
    setInput('')
    setMessages((prev) => [...prev, { role: 'user', content: userMessage }])
    setIsLoading(true)

    // Simulate AI response - replace with real API call
    setTimeout(() => {
      const response = generateMockResponse(userMessage)
      setMessages((prev) => [...prev, response])
      setIsLoading(false)
    }, 1500)
  }

  const generateMockResponse = (query: string): Message => {
    const lowerQuery = query.toLowerCase()

    if (lowerQuery.includes('cpu') || lowerQuery.includes('lento')) {
      return {
        role: 'assistant',
        content: `Analisei as métricas do servidor cache-01 que está com CPU alta (92%). 

**Causa provável:** O processo Redis está consumindo mais CPU que o normal, provavelmente devido a um aumento de requisições ou operações de BGSAVE.

**Métricas relacionadas:**
- Conexões ativas: 1,247 (média: 800)
- Operações/s: 45,000 (média: 30,000)
- Memory: 94% (próximo do limite)

**Recomendações:**`,
        actions: [
          {
            type: 'command',
            description: 'Reiniciar Redis gracefully',
            command: 'redis-cli SHUTDOWN NOSAVE && systemctl start redis',
          },
          {
            type: 'scale',
            description: 'Adicionar réplica Redis',
            command: 'kubectl scale deployment redis --replicas=2',
          },
        ],
      }
    }

    if (lowerQuery.includes('disco') || lowerQuery.includes('storage')) {
      return {
        role: 'assistant',
        content: `Analisei o uso de disco dos seus servidores:

**Previsões de capacidade:**
- **db-01:** 68% usado, vai atingir 90% em ~12 dias
- **web-01:** 34% usado, estável
- **api-01:** 52% usado, crescendo 2%/dia

**Maiores consumidores em db-01:**
- /var/lib/postgresql: 45GB
- /var/log: 12GB
- /tmp: 3GB

**Sugestão:** Rotacionar logs antigos e configurar retenção.`,
        actions: [
          {
            type: 'command',
            description: 'Limpar logs antigos',
            command: 'find /var/log -type f -mtime +7 -delete',
          },
        ],
      }
    }

    return {
      role: 'assistant',
      content: `Entendi sua pergunta sobre "${query}". 

Posso ajudar com:
- 📊 Análise de métricas (CPU, memória, disco, rede)
- 🔍 Investigação de problemas
- 📝 Análise de logs
- 🚨 Explicação de alertas
- 💡 Sugestões de otimização

O que você gostaria de saber especificamente?`,
    }
  }

  const quickActions = [
    'Por que o cache-01 está lento?',
    'Analise os alertas ativos',
    'Previsão de disco',
    'Resumo das últimas 24h',
  ]

  return (
    <div className="w-96 bg-slate-900 border-l border-slate-800 flex flex-col h-full">
      {/* Header */}
      <div className="p-4 border-b border-slate-800 flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <span className="text-2xl">🤖</span>
          <div>
            <h3 className="font-semibold">OPHION Copilot</h3>
            <p className="text-xs text-green-400 flex items-center">
              <span className="w-2 h-2 bg-green-400 rounded-full mr-1 animate-pulse"></span>
              Online
            </p>
          </div>
        </div>
        <button
          onClick={onClose}
          className="p-2 hover:bg-slate-800 rounded-lg transition"
        >
          ✕
        </button>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((message, index) => (
          <div
            key={index}
            className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div
              className={`max-w-[85%] rounded-lg p-3 ${
                message.role === 'user'
                  ? 'bg-green-600 text-white'
                  : 'bg-slate-800 text-slate-200'
              }`}
            >
              <p className="text-sm whitespace-pre-wrap">{message.content}</p>
              
              {message.actions && message.actions.length > 0 && (
                <div className="mt-3 space-y-2">
                  {message.actions.map((action, actionIndex) => (
                    <div
                      key={actionIndex}
                      className="bg-slate-900/50 rounded p-2 border border-slate-700"
                    >
                      <p className="text-xs text-slate-400">{action.description}</p>
                      {action.command && (
                        <code className="text-xs text-green-400 bg-slate-950 px-2 py-1 rounded mt-1 block">
                          {action.command}
                        </code>
                      )}
                      <button className="text-xs text-purple-400 mt-2 hover:text-purple-300">
                        Executar →
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
        
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-slate-800 rounded-lg p-3">
              <div className="flex space-x-2">
                <div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"></div>
                <div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                <div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
              </div>
            </div>
          </div>
        )}
        
        <div ref={messagesEndRef} />
      </div>

      {/* Quick Actions */}
      {messages.length === 1 && (
        <div className="px-4 pb-2">
          <p className="text-xs text-slate-500 mb-2">Perguntas frequentes:</p>
          <div className="flex flex-wrap gap-2">
            {quickActions.map((action, index) => (
              <button
                key={index}
                onClick={() => setInput(action)}
                className="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1.5 rounded-full transition"
              >
                {action}
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Input */}
      <form onSubmit={handleSubmit} className="p-4 border-t border-slate-800">
        <div className="flex space-x-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Pergunte qualquer coisa..."
            className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-purple-500"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={isLoading || !input.trim()}
            className="px-4 py-2 bg-purple-600 hover:bg-purple-500 disabled:bg-slate-700 disabled:cursor-not-allowed rounded-lg transition"
          >
            ➤
          </button>
        </div>
      </form>
    </div>
  )
}
