'use client';

import DashboardLayout from '@/layouts/DashboardLayout';
import { CalendarIcon, ClockIcon, UserIcon, MapPinIcon, VideoCameraIcon, DocumentTextIcon, XMarkIcon, UsersIcon } from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';
import { useState } from 'react';

const scheduleData = [
  {
    id: 1,
    title: 'HACCP - Sesi Live Training',
    instructor: 'Dr. Ahmad Wijaya',
    date: '2024-01-25',
    time: '09:00 - 11:00',
    type: 'Live Session',
    location: 'Virtual Meeting',
    participants: 25,
    status: 'upcoming',
    color: 'blue'
  },
  {
    id: 2,
    title: 'SLHS - Workshop Praktik',
    instructor: 'Prof. Siti Nurhaliza',
    date: '2024-01-26',
    time: '13:00 - 16:00',
    type: 'Workshop',
    location: 'Lab Sanitasi',
    participants: 15,
    status: 'upcoming',
    color: 'green'
  },
  {
    id: 3,
    title: 'Ujian Tengah Semester - HACCP',
    instructor: 'Dr. Ahmad Wijaya',
    date: '2024-01-28',
    time: '10:00 - 12:00',
    type: 'Exam',
    location: 'Online Platform',
    participants: 30,
    status: 'upcoming',
    color: 'red'
  },
  {
    id: 4,
    title: 'Sertifikasi Halal - Presentasi',
    instructor: 'Ustadz Muhammad Ali',
    date: '2024-01-23',
    time: '14:00 - 15:30',
    type: 'Presentation',
    location: 'Ruang Seminar',
    participants: 20,
    status: 'completed',
    color: 'gray'
  },
  {
    id: 5,
    title: 'Keamanan Pangan - Orientasi',
    instructor: 'Dr. Fatimah Sari',
    date: '2024-01-24',
    time: '08:00 - 09:00',
    type: 'Orientation',
    location: 'Virtual Meeting',
    participants: 35,
    status: 'completed',
    color: 'gray'
  }
];

const typeColors = {
  'Live Session': 'bg-blue-100 text-blue-800',
  'Workshop': 'bg-green-100 text-green-800',
  'Exam': 'bg-red-100 text-red-800',
  'Presentation': 'bg-purple-100 text-purple-800',
  'Orientation': 'bg-yellow-100 text-yellow-800'
};

const statusColors = {
  'upcoming': 'border-l-blue-500',
  'completed': 'border-l-gray-400',
  'ongoing': 'border-l-green-500'
};

function formatDate(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleDateString('id-ID', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
}

export default function SchedulePage() {
  const [selectedEvent, setSelectedEvent] = useState<any>(null);
  const [showModal, setShowModal] = useState(false);
  const [modalType, setModalType] = useState<'detail' | 'join'>('detail');

  const handleJoinEvent = (event: any) => {
    setSelectedEvent(event);
    setModalType('join');
    setShowModal(true);
  };

  const handleViewDetail = (event: any) => {
    setSelectedEvent(event);
    setModalType('detail');
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setSelectedEvent(null);
  };

  const upcomingEvents = scheduleData.filter(event => event.status === 'upcoming');
  const completedEvents = scheduleData.filter(event => event.status === 'completed');

  return (
    <DashboardLayout>
      <div className="p-6">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Jadwal</h1>
          <p className="text-gray-600">Kelola jadwal pembelajaran dan kegiatan Anda</p>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Jadwal Hari Ini</p>
                <p className="text-2xl font-bold text-gray-900">2</p>
              </div>
              <div className="p-3 bg-blue-100 rounded-lg">
                <CalendarIcon className="h-6 w-6 text-blue-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Minggu Ini</p>
                <p className="text-2xl font-bold text-gray-900">5</p>
              </div>
              <div className="p-3 bg-green-100 rounded-lg">
                <ClockIcon className="h-6 w-6 text-green-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total Peserta</p>
                <p className="text-2xl font-bold text-gray-900">125</p>
              </div>
              <div className="p-3 bg-purple-100 rounded-lg">
                <UsersIcon className="h-6 w-6 text-purple-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Selesai</p>
                <p className="text-2xl font-bold text-gray-900">2</p>
              </div>
              <div className="p-3 bg-gray-100 rounded-lg">
                <CalendarIcon className="h-6 w-6 text-gray-600" />
              </div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Upcoming Events */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100">
            <div className="p-6 border-b border-gray-100">
              <h2 className="text-xl font-semibold text-gray-900">Jadwal Mendatang</h2>
            </div>
            <div className="p-6">
              <div className="space-y-4">
                {upcomingEvents.map((event) => (
                  <div key={event.id} className={cn(
                    "border-l-4 pl-4 py-3 bg-gray-50 rounded-r-lg",
                    statusColors[event.status as keyof typeof statusColors]
                  )}>
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <h3 className="font-semibold text-gray-900 mb-1">{event.title}</h3>
                        <p className="text-sm text-gray-600 mb-2">{event.instructor}</p>
                        
                        <div className="flex items-center text-sm text-gray-500 mb-2">
                          <CalendarIcon className="h-4 w-4 mr-1" />
                          <span className="mr-4">{formatDate(event.date)}</span>
                          <ClockIcon className="h-4 w-4 mr-1" />
                          <span>{event.time}</span>
                        </div>
                        
                        <div className="flex items-center text-sm text-gray-500 mb-2">
                          <MapPinIcon className="h-4 w-4 mr-1" />
                          <span className="mr-4">{event.location}</span>
                          <UserIcon className="h-4 w-4 mr-1" />
                          <span>{event.participants} peserta</span>
                        </div>
                      </div>
                      
                      <span className={cn(
                        "px-2 py-1 rounded-full text-xs font-medium",
                        typeColors[event.type as keyof typeof typeColors]
                      )}>
                        {event.type}
                      </span>
                    </div>
                    
                    <div className="mt-3 flex space-x-2">
                      <button 
                        onClick={() => handleJoinEvent(event)}
                        className="px-3 py-1 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
                      >
                        Join
                      </button>
                      <button 
                        onClick={() => handleViewDetail(event)}
                        className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200 transition-colors"
                      >
                        Detail
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Completed Events */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100">
            <div className="p-6 border-b border-gray-100">
              <h2 className="text-xl font-semibold text-gray-900">Riwayat Kegiatan</h2>
            </div>
            <div className="p-6">
              <div className="space-y-4">
                {completedEvents.map((event) => (
                  <div key={event.id} className={cn(
                    "border-l-4 pl-4 py-3 bg-gray-50 rounded-r-lg opacity-75",
                    statusColors[event.status as keyof typeof statusColors]
                  )}>
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <h3 className="font-semibold text-gray-900 mb-1">{event.title}</h3>
                        <p className="text-sm text-gray-600 mb-2">{event.instructor}</p>
                        
                        <div className="flex items-center text-sm text-gray-500 mb-2">
                          <CalendarIcon className="h-4 w-4 mr-1" />
                          <span className="mr-4">{formatDate(event.date)}</span>
                          <ClockIcon className="h-4 w-4 mr-1" />
                          <span>{event.time}</span>
                        </div>
                        
                        <div className="flex items-center text-sm text-gray-500 mb-2">
                          <MapPinIcon className="h-4 w-4 mr-1" />
                          <span className="mr-4">{event.location}</span>
                          <UserIcon className="h-4 w-4 mr-1" />
                          <span>{event.participants} peserta</span>
                        </div>
                    </div>
                    
                    <div className="mt-3 flex space-x-2">
                      <button 
                        onClick={() => handleViewDetail(event)}
                        className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200 transition-colors"
                      >
                        Detail
                      </button>
                      </div>
                      
                      <span className={cn(
                        "px-2 py-1 rounded-full text-xs font-medium",
                        typeColors[event.type as keyof typeof typeColors]
                      )}>
                        {event.type}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Modal */}
        {showModal && selectedEvent && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-xl p-6 max-w-md w-full mx-4">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">
                  {modalType === 'join' ? 'Join Event' : 'Event Detail'}
                </h3>
                <button 
                  onClick={closeModal}
                  className="text-gray-400 hover:text-gray-600"
                >
                  <XMarkIcon className="h-6 w-6" />
                </button>
              </div>
              
              <div className="space-y-4">
                <div>
                  <h4 className="font-semibold text-gray-900">{selectedEvent.title}</h4>
                  <p className="text-sm text-gray-600">{selectedEvent.instructor}</p>
                </div>
                
                <div className="space-y-2">
                  <div className="flex items-center text-sm text-gray-500">
                    <CalendarIcon className="h-4 w-4 mr-2" />
                    <span>{formatDate(selectedEvent.date)}</span>
                  </div>
                  <div className="flex items-center text-sm text-gray-500">
                    <ClockIcon className="h-4 w-4 mr-2" />
                    <span>{selectedEvent.time}</span>
                  </div>
                  <div className="flex items-center text-sm text-gray-500">
                    <MapPinIcon className="h-4 w-4 mr-2" />
                    <span>{selectedEvent.location}</span>
                  </div>
                  <div className="flex items-center text-sm text-gray-500">
                    <UserIcon className="h-4 w-4 mr-2" />
                    <span>{selectedEvent.participants} peserta</span>
                  </div>
                </div>
                
                <div className="flex items-center space-x-2">
                  <span className={cn(
                    "px-2 py-1 rounded-full text-xs font-medium",
                    typeColors[selectedEvent.type as keyof typeof typeColors]
                  )}>
                    {selectedEvent.type}
                  </span>
                </div>
                
                {modalType === 'join' && (
                  <div className="bg-blue-50 p-4 rounded-lg">
                    <div className="flex items-center mb-2">
                      <VideoCameraIcon className="h-5 w-5 text-blue-600 mr-2" />
                      <span className="text-sm font-medium text-blue-900">Ready to join?</span>
                    </div>
                    <p className="text-sm text-blue-700 mb-3">
                      You will be redirected to the meeting platform.
                    </p>
                    <button className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
                      Join Now
                    </button>
                  </div>
                )}
                
                {modalType === 'detail' && (
                  <div className="bg-gray-50 p-4 rounded-lg">
                    <div className="flex items-center mb-2">
                      <DocumentTextIcon className="h-5 w-5 text-gray-600 mr-2" />
                      <span className="text-sm font-medium text-gray-900">Event Information</span>
                    </div>
                    <p className="text-sm text-gray-700">
                      This is a {selectedEvent.type.toLowerCase()} session. Please make sure you have all required materials ready.
                    </p>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </DashboardLayout>
  );
}