436 lines
18 KiB
TypeScript
436 lines
18 KiB
TypeScript
'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'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'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'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>
|
|
)
|
|
}
|