import React, { useState } from 'react'
import { AnimatePresence } from 'framer-motion'
import dayjs from 'dayjs'
import 'dayjs/locale/tr'
import relativeTime from 'dayjs/plugin/relativeTime'
import isBetween from 'dayjs/plugin/isBetween'

// Widgets
import TodayBirthdays from './widgets/TodayBirthdays'
import UpcomingEvents from './widgets/UpcomingEvents'
import RecentDocuments from './widgets/RecentDocuments'
import ImportantAnnouncements from './widgets/ImportantAnnouncements'
import PriorityTasks from './widgets/PriorityTasks'
import MealWeeklyMenu from './widgets/MealWeeklyMenu'
import ShuttleSchedule from './widgets/ShuttleSchedule'
import LeaveManagement from './widgets/LeaveManagement'
import OvertimeManagement from './widgets/OvertimeManagement'
import ExpenseManagement from './widgets/ExpenseManagement'
import UpcomingTrainings from './widgets/UpcomingTrainings'
import ActiveReservations from './widgets/ActiveReservations'
import ActiveSurveys from './widgets/ActiveSurveys'
import Visitors from './widgets/Visitors'

// Modals
import SurveyModal from './modals/SurveyModal'
import LeaveRequestModal from './modals/LeaveRequestModal'
import OvertimeRequestModal from './modals/OvertimeRequestModal'
import ExpenseRequestModal from './modals/ExpenseRequestModal'
import ReservationRequestModal from './modals/ReservationRequestModal'
import AnnouncementDetailModal from './modals/AnnouncementDetailModal'

// Social Wall
import SocialWall from './SocialWall'
import { Announcement, Survey } from '@/types/intranet'
import { Container } from '@/components/shared'

dayjs.locale('tr')
dayjs.extend(relativeTime)
dayjs.extend(isBetween)

const IntranetDashboard: React.FC = () => {
  const [selectedAnnouncement, setSelectedAnnouncement] = useState<Announcement | null>(null)
  const [selectedSurvey, setSelectedSurvey] = useState<Survey | null>(null)
  const [showSurveyModal, setShowSurveyModal] = useState(false)
  const [showLeaveModal, setShowLeaveModal] = useState(false)
  const [showOvertimeModal, setShowOvertimeModal] = useState(false)
  const [showExpenseModal, setShowExpenseModal] = useState(false)
  const [showReservationModal, setShowReservationModal] = useState(false)

  const handleTakeSurvey = (survey: Survey) => {
    setSelectedSurvey(survey)
    setShowSurveyModal(true)
  }

  const handleSubmitSurvey = () => {
    setShowSurveyModal(false)
    setSelectedSurvey(null)
  }

  const handleSubmitLeave = () => {
    setShowLeaveModal(false)
  }

  const handleSubmitOvertime = () => {
    setShowOvertimeModal(false)
  }

  const handleSubmitExpense = () => {
    setShowExpenseModal(false)
  }

  const handleSubmitReservation = () => {
    setShowReservationModal(false)
  }

  return (
    <Container>
      <div className="mx-auto space-y-4">
        <div className="flex items-center justify-end">
          <div>
            <p className="text-gray-600 dark:text-gray-400 mt-1">
              <span className="font-medium">Hoş geldiniz,</span>{' '}
              {dayjs().format('DD MMMM YYYY dddd')}
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-11 gap-4">
          <div className="lg:col-span-3 space-y-6">
            <UpcomingEvents />
            <TodayBirthdays />
            <RecentDocuments />
            <UpcomingTrainings />
            <ActiveReservations onNewReservation={() => setShowReservationModal(true)} />
            <ActiveSurveys onTakeSurvey={handleTakeSurvey} />
            <Visitors />
          </div>

          <div className="lg:col-span-5 space-y-6">
            <SocialWall />
          </div>

          <div className="lg:col-span-3 space-y-6">
            <ImportantAnnouncements onAnnouncementClick={setSelectedAnnouncement} />
            <PriorityTasks />
            <MealWeeklyMenu />
            <ShuttleSchedule />
            <LeaveManagement onNewLeave={() => setShowLeaveModal(true)} />
            <OvertimeManagement onNewOvertime={() => setShowOvertimeModal(true)} />
            <ExpenseManagement onNewExpense={() => setShowExpenseModal(true)} />
          </div>
        </div>
      </div>

      <AnimatePresence>
        {showSurveyModal && selectedSurvey && (
          <SurveyModal
            survey={selectedSurvey}
            onClose={() => setShowSurveyModal(false)}
            onSubmit={handleSubmitSurvey}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showLeaveModal && (
          <LeaveRequestModal
            onClose={() => setShowLeaveModal(false)}
            onSubmit={handleSubmitLeave}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showOvertimeModal && (
          <OvertimeRequestModal
            onClose={() => setShowOvertimeModal(false)}
            onSubmit={handleSubmitOvertime}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showExpenseModal && (
          <ExpenseRequestModal
            onClose={() => setShowExpenseModal(false)}
            onSubmit={handleSubmitExpense}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showReservationModal && (
          <ReservationRequestModal
            onClose={() => setShowReservationModal(false)}
            onSubmit={handleSubmitReservation}
          />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {selectedAnnouncement && (
          <AnnouncementDetailModal
            announcement={selectedAnnouncement}
            onClose={() => setSelectedAnnouncement(null)}
          />
        )}
      </AnimatePresence>
    </Container>
  )
}

export default IntranetDashboard