// components/EducationTraining.tsx
'use client';
import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { ChevronRight, Clock, Users, Award, Calendar } from 'lucide-react';
import { educationService, Course } from '../../services/educationService';
import { upcomingEventsService, UpcomingEvent } from '../../services/upcomingEventsService';

const EducationTraining: React.FC = () => {
    const [mounted, setMounted] = useState(false);
    const [courses, setCourses] = useState<Course[]>([]);
    const [upcomingEvents, setUpcomingEvents] = useState<UpcomingEvent[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [selectedCategory, setSelectedCategory] = useState<string>('All');
    const [searchQuery, setSearchQuery] = useState<string>('');

    const categories = ['All', 'Certification', 'Training', 'Workshop', 'Fellowship'];

    useEffect(() => {
        setMounted(true);
        loadData();
    }, []);

    const loadData = async () => {
        try {
            setLoading(true);
            setError(null);
            
            // Load both courses and upcoming events concurrently
            const [fetchedCourses, fetchedEvents] = await Promise.all([
                educationService.getActiveCourses(),
                upcomingEventsService.getActiveUpcomingEvents()
            ]);
            
            setCourses(fetchedCourses);
            setUpcomingEvents(fetchedEvents);
        } catch (err) {
            setError('Failed to load courses and events. Please try again later.');
            console.error('Error loading data:', err);
        } finally {
            setLoading(false);
        }
    };

    if (!mounted) {
        return null;
    }

    // Filter courses based on category and search
    const filteredCourses = courses.filter(course => {
        const matchesCategory = selectedCategory === 'All' || course.category === selectedCategory;
        const matchesSearch = !searchQuery.trim() || 
            course.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
            course.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
            course.instructor.toLowerCase().includes(searchQuery.toLowerCase());
        
        return matchesCategory && matchesSearch;
    });

    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearchQuery(e.target.value);
    };

    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mx-auto mb-4"></div>
                    <p className="text-gray-600">Loading courses...</p>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen">
            {/* Header Section */}
            <section
                className="py-4 relative overflow-hidden"
                style={{ backgroundColor: '#f4f4f4' }}
            >
                <div className="max-w-7xl mx-auto px-4 relative z-10">
                    {/* Breadcrumb */}
                    <nav className="flex items-center space-x-2 text-sm mb-6">
                        <Link
                            href="/"
                            className="hover:opacity-70 transition-opacity duration-200"
                            style={{ color: '#012068' }}
                        >
                            Home
                        </Link>
                        <ChevronRight className="w-4 h-4" style={{ color: '#012068' }} />
                        <span className="font-medium" style={{ color: '#e64838' }}>
                            Education & Training
                        </span>
                    </nav>

                    {/* Page Header */}
                    <div className="mb-2">
                        <h1 className="text-4xl font-bold mb-4" style={{ color: '#012068' }}>
                            Education & Training
                        </h1>
                        <p className="text-lg max-w-3xl leading-relaxed" style={{ color: '#333' }}>
                            Advance your trauma care expertise with structured training programs for doctors, nurses, students, and community partners.
                        </p>
                    </div>
                </div>
            </section>

            {/* Error Message */}
            {error && (
                <div className="max-w-7xl mx-auto px-4 py-4">
                    <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                        <p className="text-red-800 text-sm">{error}</p>
                        <button 
                            onClick={loadData}
                            className="text-red-600 underline text-sm mt-2"
                        >
                            Try again
                        </button>
                    </div>
                </div>
            )}

            {/* Upcoming Training Section with Dynamic Cards */}
            <section className="py-8" style={{ backgroundColor: '#fff' }}>
                <div className="max-w-7xl mx-auto px-4">
                    <h2 className="text-3xl font-bold mb-8 text-center" style={{ color: '#012068' }}>
                        Upcoming Training Programs
                    </h2>
                    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                        {upcomingEvents.length > 0 ? (
                            upcomingEvents.map((event) => (
                                <div key={event.id} className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                                    <div className="flex items-center mb-4">
                                        <div>
                                            <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                                                {event.title}
                                            </h3>
                                            <div className="flex items-center text-sm">
                                                <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                                                <span style={{ color: '#666' }}>{event.schedule}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                                        {event.description}
                                    </p>
                                </div>
                            ))
                        ) : (
                            // Fallback to static cards if no events are loaded
                            <>
                                <div className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                                    <div className="flex items-center mb-4">
                                        <div>
                                            <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                                                Simulation-based Team Drills
                                            </h3>
                                            <div className="flex items-center text-sm">
                                                <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                                                <span>Q3 2025</span>
                                            </div>
                                        </div>
                                    </div>
                                    <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                                        Hands-on simulation training designed to improve team coordination and emergency response in high-pressure trauma situations.
                                    </p>
                                </div>

                                <div className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                                    <div className="flex items-center mb-4">
                                        <div>
                                            <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                                                Online Webinar Series
                                            </h3>
                                            <div className="flex items-center text-sm">
                                                <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                                                <span>Monthly Sessions</span>
                                            </div>
                                        </div>
                                    </div>
                                    <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                                        Monthly online sessions covering trauma ethics, young doctor support, and professional development in emergency medicine.
                                    </p>
                                </div>

                                <div className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                                    <div className="flex items-center mb-4">
                                        <div>
                                            <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                                                Community Education
                                            </h3>
                                            <div className="flex items-center text-sm">
                                                <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                                                <span>Ongoing</span>
                                            </div>
                                        </div>
                                    </div>
                                    <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                                        Road safety fairs and school education sessions to promote trauma prevention and basic first aid awareness in the community.
                                    </p>
                                </div>
                            </>
                        )}
                    </div>
                </div>
            </section>

            {/* Filter & Search */}
            <section className="py-8" style={{ backgroundColor: '#fff' }}>
                <div className="max-w-7xl mx-auto px-4">
                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
                        {/* Category Filter */}
                        <div className="flex flex-wrap gap-2">
                            {categories.map((category) => (
                                <button
                                    key={category}
                                    onClick={() => setSelectedCategory(category)}
                                    className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${selectedCategory === category
                                        ? 'text-white'
                                        : 'border-2'
                                        }`}
                                    style={{
                                        backgroundColor: selectedCategory === category ? '#012068' : 'transparent',
                                        borderColor: '#012068',
                                        color: selectedCategory === category ? 'white' : '#012068'
                                    }}
                                >
                                    {category}
                                </button>
                            ))}
                        </div>

                        {/* Search */}
                        <div className="relative">
                            <input
                                type="text"
                                placeholder="Search programs..."
                                value={searchQuery}
                                onChange={handleSearchChange}
                                className="border-2 rounded-lg px-4 py-2 pl-4 pr-10 text-sm focus:outline-none w-64"
                                style={{ borderColor: '#012068', color:'#333' }}
                            />
                            <button className="absolute inset-y-0 right-0 flex items-center px-3 rounded-lg"
                                style={{ backgroundColor: '#012068' }}>
                                <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    {/* Results Info */}
                    {(selectedCategory !== 'All' || searchQuery.trim()) && (
                        <div className="mb-4">
                            <p className="text-sm text-gray-600">
                                {filteredCourses.length === 0 
                                    ? 'No courses found matching your criteria.' 
                                    : `Showing ${filteredCourses.length} of ${courses.length} course${courses.length !== 1 ? 's' : ''}`
                                }
                            </p>
                        </div>
                    )}
                </div>
            </section>

            {/* Courses Grid */}
            <section className="pb-12" style={{ backgroundColor: '#fff' }}>
                <div className="max-w-7xl mx-auto px-4">
                    {filteredCourses.length === 0 && !error ? (
                        <div className="text-center py-12">
                            <p className="text-gray-500 text-lg mb-4">
                                {searchQuery.trim() || selectedCategory !== 'All' 
                                    ? 'No courses match your search criteria.' 
                                    : 'No courses available at the moment.'
                                }
                            </p>
                            {(searchQuery.trim() || selectedCategory !== 'All') && (
                                <button
                                    onClick={() => {
                                        setSearchQuery('');
                                        setSelectedCategory('All');
                                    }}
                                    className="px-4 py-2 text-sm border border-blue-900 text-blue-900 rounded hover:bg-blue-50"
                                >
                                    Clear Filters
                                </button>
                            )}
                        </div>
                    ) : (
                        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
                            {filteredCourses.map((course) => (
                                <Link
                                    key={course.id}
                                    href={`/education-training/course-detail?id=${course.id}`}
                                    className="group bg-white rounded-lg overflow-hidden border border-gray-300 hover:shadow-xl transition-all duration-300 flex flex-col h-full cursor-pointer"
                                >
                                    {/* Image */}
                                    <div className="relative h-48 overflow-hidden flex-shrink-0">
                                        <Image
                                            src={course.image}
                                            alt={course.title}
                                            fill
                                            className="object-cover transition-transform duration-300 group-hover:scale-105"
                                        />
                                    </div>

                                    {/* Content */}
                                    <div className="flex flex-col flex-grow">
                                        <div className="p-6 flex-grow flex flex-col">
                                            <h3
                                                className="text-lg font-semibold mb-3 group-hover:opacity-70 transition-opacity duration-300 h-14 overflow-hidden"
                                                style={{
                                                    color: '#012068',
                                                    display: '-webkit-box',
                                                    WebkitLineClamp: 2,
                                                    WebkitBoxOrient: 'vertical'
                                                }}
                                            >
                                                {course.title}
                                            </h3>
                                            <p
                                                className="text-sm leading-relaxed mb-4 flex-grow overflow-hidden"
                                                style={{
                                                    color: '#666',
                                                    display: '-webkit-box',
                                                    WebkitLineClamp: 4,
                                                    WebkitBoxOrient: 'vertical'
                                                }}
                                            >
                                                {course.description}
                                            </p>
                                            <div className="mt-auto">
                                                <span
                                                    className="inline-block px-3 py-1 text-xs font-medium rounded-full border-2"
                                                    style={{
                                                        color: '#e64838',
                                                        backgroundColor: 'transparent'
                                                    }}
                                                >
                                                    {course.category}
                                                </span>
                                            </div>
                                        </div>

                                        <div className="px-6 pb-6 pt-2 border-t border-gray-100 flex-shrink-0">
                                            <div className="flex items-end mb-3">
                                                <span className="text-sm font-medium truncate" style={{ color: '#012068' }}>
                                                    {course.instructor}
                                                </span>
                                            </div>
                                            <div className="flex justify-between items-center mb-3 text-sm" style={{ color: '#666' }}>
                                                <div className="flex items-center">
                                                    <Clock className="w-4 h-4 mr-1 flex-shrink-0" />
                                                    <span className="truncate">{course.duration}</span>
                                                </div>
                                                <div className="flex items-center ml-2">
                                                    <Users className="w-4 h-4 mr-1 flex-shrink-0" />
                                                    <span>{course.seats}</span>
                                                </div>
                                            </div>
                                            <div className="flex justify-between items-center">
                                                <div className="text-sm" style={{ color: '#666' }}>
                                                    {course.startDate ? `Starts: ${new Date(course.startDate).toLocaleDateString()}` : 'Contact for dates'}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    )}
                </div>
            </section>

            {/* CTA */}
            <section className="py-16" style={{ backgroundColor: '#f4f4f4' }}>
                <div className="max-w-4xl mx-auto px-4 text-center">
                    <Award className="w-12 h-12 mx-auto mb-6" style={{ color: '#e64838' }} />
                    <h2 className="text-3xl font-bold mb-4" style={{ color: '#012068' }}>
                        Ready to Advance Your Trauma Care Expertise?
                    </h2>
                    <p className="text-lg mb-8 max-w-2xl mx-auto" style={{ color: '#666' }}>
                        Join our structured training programs designed to empower healthcare professionals, nurses, and community responders with critical trauma care skills.
                    </p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <Link
                            href="/contact"
                            className="inline-block px-6 py-3 text-sm font-medium rounded hover:opacity-90 transition-opacity duration-300"
                            style={{
                                backgroundColor: '#012068',
                                color: 'white'
                            }}
                        >
                            Contact Admissions
                        </Link>
                        <Link
                            href="/brochure"
                            className="inline-block px-6 py-3 text-sm font-medium rounded border-2 hover:opacity-70 transition-opacity duration-300"
                            style={{
                                borderColor: '#012068',
                                color: '#012068'
                            }}
                        >
                            Download Brochure
                        </Link>
                    </div>
                </div>
            </section>
        </div>
    );
};

export default EducationTraining;