'use client';

import React, { useState, useEffect } from 'react'
import { useAuth } from '@/components/providers/MockAuthProvider'
import { useLanguage } from '@/components/providers/LanguageProvider'
import { useRouter } from 'next/navigation'
import { 
  Heart, 
  MessageCircle, 
  Phone, 
  Calendar,
  LogOut,
  Languages,
  ArrowLeft,
  AlertTriangle,
  CheckCircle,
  Clock,
  Users
} from 'lucide-react'
import Link from 'next/link'

export default function WellbeingPage() {
  const { user, userProfile, logout } = useAuth()
  const { t, language, setLanguage } = useLanguage()
  const router = useRouter()
  const [messages, setMessages] = useState<Array<{id: string; text: string; sender: 'user' | 'bot'; timestamp: Date}>>([])
  const [inputText, setInputText] = useState('')
  const [isTyping, setIsTyping] = useState(false)
  const [showEmergencyModal, setShowEmergencyModal] = useState(false)

  useEffect(() => {
    if (!user) {
      router.push('/')
    }
  }, [user, router])

  useEffect(() => {
    // Start with a welcome message
    setMessages([
      {
        id: '1',
        text: 'Hello! I\'m here to support your mental health and wellbeing. How are you feeling today?',
        sender: 'bot',
        timestamp: new Date()
      }
    ])
  }, [])

  const handleSendMessage = async () => {
    if (!inputText.trim()) return

    const userMessage = inputText.trim()
    setInputText('')
    
    const newMessage = {
      id: Date.now().toString(),
      text: userMessage,
      sender: 'user' as const,
      timestamp: new Date()
    }
    
    setMessages(prev => [...prev, newMessage])
    setIsTyping(true)

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: userMessage,
          mode: 'mental_health',
          history: messages,
        }),
      })

      const data = await response.json()
      
      setIsTyping(false)
      
      const botMessage = {
        id: (Date.now() + 1).toString(),
        text: data.response,
        sender: 'bot' as const,
        timestamp: new Date()
      }
      
      setMessages(prev => [...prev, botMessage])

      // Check for escalation
      if (data.shouldEscalate) {
        setShowEmergencyModal(true)
      }
    } catch (error) {
      setIsTyping(false)
      console.error('Chat error:', error)
    }
  }

  const handleLogout = async () => {
    await logout()
  }

  const toggleLanguage = () => {
    setLanguage(language === 'en' ? 'ar' : 'en')
  }

  if (!user || !userProfile) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-pink-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading wellbeing support...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Link href="/dashboard" className="flex items-center space-x-2 text-pink-600 hover:text-pink-800">
                <ArrowLeft size={20} />
                <span>Back to Dashboard</span>
              </Link>
              <div className="text-gray-300">|</div>
              <div className="flex items-center space-x-2">
                <Heart className="text-pink-600" size={24} />
                <h1 className="text-xl font-bold text-gray-900">
                  {t('wellbeing')} Support
                </h1>
              </div>
            </div>

            <div className="flex items-center space-x-4">
              <button
                onClick={toggleLanguage}
                className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"
              >
                <Languages size={16} />
                <span className="text-sm font-medium">{language.toUpperCase()}</span>
              </button>
              
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 bg-pink-600 rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-medium">
                    {userProfile.name.charAt(0)}
                  </span>
                </div>
                <div className="hidden md:block">
                  <p className="text-sm font-medium text-gray-900">{userProfile.name}</p>
                  <p className="text-xs text-gray-500">{userProfile.role}</p>
                </div>
              </div>
              
              <button
                onClick={handleLogout}
                className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-red-100 hover:bg-red-200 transition-colors text-red-700"
              >
                <LogOut size={16} />
                <span className="text-sm font-medium">{t('logout')}</span>
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Welcome Section */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              Welcome to Mental Health Support
            </h2>
            <p className="text-gray-600 mb-6">
              Your wellbeing is important to us. This is a safe space where you can talk about how you&apos;re feeling. 
              Our AI assistant is trained to provide empathetic support and can connect you with professional help when needed.
            </p>
            
            {/* Emergency Resources */}
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
              <div className="flex items-start space-x-3">
                <AlertTriangle className="text-red-600 mt-0.5" size={20} />
                <div>
                  <h3 className="font-medium text-red-900 mb-2">
                    Emergency Resources
                  </h3>
                  <p className="text-sm text-red-800 mb-3">
                    If you&apos;re experiencing a mental health emergency, please contact:
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div className="flex items-center space-x-2">
                      <Phone className="text-red-600" size={16} />
                      <span className="text-sm text-red-800">Crisis Line: 988</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Phone className="text-red-600" size={16} />
                      <span className="text-sm text-red-800">Campus Security: (555) 123-4567</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Chat Interface */}
            <div className="lg:col-span-2">
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 h-[600px] flex flex-col">
                <div className="p-4 border-b bg-pink-50">
                  <h3 className="font-semibold text-gray-900 flex items-center space-x-2">
                    <MessageCircle className="text-pink-600" size={20} />
                    <span>Wellbeing Chat</span>
                  </h3>
                </div>
                
                {/* Messages */}
                <div className="flex-1 overflow-y-auto p-4 space-y-4">
                  {messages.map((message) => (
                    <div
                      key={message.id}
                      className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
                    >
                      <div
                        className={`max-w-xs px-4 py-2 rounded-lg ${
                          message.sender === 'user'
                            ? 'bg-pink-600 text-white'
                            : 'bg-pink-100 text-pink-900'
                        }`}
                      >
                        <p className="text-sm">{message.text}</p>
                        <p className="text-xs opacity-75 mt-1">
                          {message.timestamp.toLocaleTimeString()}
                        </p>
                      </div>
                    </div>
                  ))}
                  
                  {isTyping && (
                    <div className="flex justify-start">
                      <div className="bg-pink-100 px-4 py-2 rounded-lg text-pink-900">
                        <div className="flex items-center space-x-2">
                          <div className="flex space-x-1">
                            <div className="w-2 h-2 bg-pink-600 rounded-full animate-bounce"></div>
                            <div className="w-2 h-2 bg-pink-600 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                            <div className="w-2 h-2 bg-pink-600 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                          </div>
                          <span className="text-xs">Typing...</span>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
                
                {/* Input */}
                <div className="p-4 border-t">
                  <div className="flex space-x-2">
                    <input
                      type="text"
                      value={inputText}
                      onChange={(e) => setInputText(e.target.value)}
                      onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                      placeholder={t('type_message')}
                      className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"
                    />
                    <button
                      onClick={handleSendMessage}
                      disabled={!inputText.trim()}
                      className="bg-pink-600 text-white px-4 py-2 rounded-lg hover:bg-pink-700 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {t('send')}
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Quick Actions */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Quick Actions</h3>
                <div className="space-y-3">
                  <button
                    onClick={() => setShowEmergencyModal(true)}
                    className="w-full flex items-center space-x-3 p-3 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors"
                  >
                    <Phone className="text-red-600" size={20} />
                    <span className="text-red-900 font-medium">Emergency Help</span>
                  </button>
                  
                  <a
                    href="https://calendly.com/university-counseling"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-full flex items-center space-x-3 p-3 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors"
                  >
                    <Calendar className="text-blue-600" size={20} />
                    <span className="text-blue-900 font-medium">{t('book_counselor')}</span>
                  </a>
                  
                  <Link
                    href="/wellbeing/resources"
                    className="w-full flex items-center space-x-3 p-3 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors"
                  >
                    <Heart className="text-green-600" size={20} />
                    <span className="text-green-900 font-medium">Self-Care Resources</span>
                  </Link>
                </div>
              </div>

              {/* Counseling Services */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Counseling Services</h3>
                <div className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <CheckCircle className="text-green-600" size={16} />
                    <span className="text-sm text-gray-700">Individual counseling</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <CheckCircle className="text-green-600" size={16} />
                    <span className="text-sm text-gray-700">Group therapy sessions</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <CheckCircle className="text-green-600" size={16} />
                    <span className="text-sm text-gray-700">Crisis intervention</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <CheckCircle className="text-green-600" size={16} />
                    <span className="text-sm text-gray-700">Stress management workshops</span>
                  </div>
                </div>
              </div>

              {/* Office Hours */}
              <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Office Hours</h3>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-700">Monday - Friday</span>
                    <span className="text-sm font-medium text-gray-900">8:00 AM - 6:00 PM</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-700">Saturday</span>
                    <span className="text-sm font-medium text-gray-900">10:00 AM - 4:00 PM</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-700">Sunday</span>
                    <span className="text-sm font-medium text-gray-900">Closed</span>
                  </div>
                  <div className="border-t pt-3">
                    <div className="flex items-center space-x-2">
                      <Clock className="text-blue-600" size={16} />
                      <span className="text-sm text-blue-900">24/7 Crisis Line Available</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* Emergency Modal */}
      {showEmergencyModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-8 w-full max-w-md">
            <div className="flex items-center space-x-3 mb-6">
              <AlertTriangle className="text-red-600" size={24} />
              <h3 className="text-xl font-bold text-gray-900">Emergency Support</h3>
            </div>
            
            <p className="text-gray-600 mb-6">
              If you&apos;re experiencing a mental health emergency, please contact one of these resources immediately:
            </p>
            
            <div className="space-y-4 mb-6">
              <div className="flex items-center space-x-3 p-3 bg-red-50 border border-red-200 rounded-lg">
                <Phone className="text-red-600" size={20} />
                <div>
                  <p className="font-medium text-red-900">Crisis Lifeline</p>
                  <p className="text-sm text-red-800">988</p>
                </div>
              </div>
              
              <div className="flex items-center space-x-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                <Users className="text-blue-600" size={20} />
                <div>
                  <p className="font-medium text-blue-900">Campus Counseling</p>
                  <p className="text-sm text-blue-800">(555) 123-4567</p>
                </div>
              </div>
              
              <div className="flex items-center space-x-3 p-3 bg-green-50 border border-green-200 rounded-lg">
                <Calendar className="text-green-600" size={20} />
                <div>
                  <p className="font-medium text-green-900">Schedule Appointment</p>
                  <a 
                    href="https://calendly.com/university-counseling" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="text-sm text-green-800 hover:underline"
                  >
                    Book with Counselor
                  </a>
                </div>
              </div>
            </div>
            
            <div className="flex space-x-4">
              <button
                onClick={() => setShowEmergencyModal(false)}
                className="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg hover:bg-gray-400 transition-colors"
              >
                Close
              </button>
              <a
                href="tel:988"
                className="flex-1 bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition-colors text-center"
              >
                Call 988
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}