import {
  TldrawUiButton,
  TldrawUiButtonLabel,
  TldrawUiDialogBody,
  TldrawUiDialogCloseButton,
  TldrawUiDialogFooter,
  TldrawUiDialogHeader,
  TldrawUiDialogTitle,
  Editor
} from '@tldraw/tldraw'
import { FaCheck, FaExternalLinkAlt } from 'react-icons/fa'
import { TeacherTimetableEvent } from '../../../../services/graph/timetableNeoDBService'
import { LoadingState } from '../../../../services/tldraw/snapshotService'

// View Menu Dialog Component
interface ViewMenuDialogProps {
  onSelect: (view: string) => void
  onClose: () => void
}

export const ViewMenuDialog = ({ onSelect, onClose }: ViewMenuDialogProps) => {
  const views = [
    { name: 'Day', view: 'timeGridDay' },
    { name: 'Week', view: 'timeGridWeek' },
    { name: 'Month', view: 'dayGridMonth' },
    { name: 'Year', view: 'dayGridYear' },
    { name: 'List Day', view: 'listDay' },
    { name: 'List Week', view: 'listWeek' },
    { name: 'List Month', view: 'listMonth' },
    { name: 'List Year', view: 'listYear' },
  ]

  return (
    <>
      <TldrawUiDialogHeader>
        <TldrawUiDialogTitle>Select Calendar View</TldrawUiDialogTitle>
        <TldrawUiDialogCloseButton />
      </TldrawUiDialogHeader>
      <TldrawUiDialogBody style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {views.map(({name, view}) => (
          <TldrawUiButton key={view} type="normal" onClick={() => onSelect(view)}>
            <TldrawUiButtonLabel>{name}</TldrawUiButtonLabel>
          </TldrawUiButton>
        ))}
      </TldrawUiDialogBody>
      <TldrawUiDialogFooter>
        <TldrawUiButton type="normal" onClick={onClose}>
          <TldrawUiButtonLabel>Close</TldrawUiButtonLabel>
        </TldrawUiButton>
      </TldrawUiDialogFooter>
    </>
  )
}

// Class Filter Dialog
interface ClassFilterDialogProps {
  onClose: () => void
  subjectClasses: string[]
  selectedClasses: string[]
  onClassToggle: (subjectClass: string) => void
  events: TeacherTimetableEvent[]
}

export const ClassFilterDialog = ({
  onClose,
  subjectClasses,
  selectedClasses,
  onClassToggle,
  events
}: ClassFilterDialogProps) => {
  const renderClassFilterButton = (subjectClass: string) => {
    const isSelected = selectedClasses.includes(subjectClass)
    const color = events.find(e => e.extendedProps?.subjectClass === subjectClass)?.extendedProps?.color || '#000000'
    
    return (
      <TldrawUiButton
        key={subjectClass}
        type="normal"
        onClick={() => onClassToggle(subjectClass)}
        style={{
          backgroundColor: isSelected ? color : '#ffffff',
          color: isSelected ? '#ffffff' : '#000000',
          border: `2px solid ${color}`,
        }}
      >
        <TldrawUiButtonLabel>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ marginRight: '8px' }}>
              {isSelected && <FaCheck />}
            </div>
            <span>{subjectClass}</span>
          </div>
        </TldrawUiButtonLabel>
      </TldrawUiButton>
    )
  }

  return (
    <>
      <TldrawUiDialogHeader>
        <TldrawUiDialogTitle>Filter Classes</TldrawUiDialogTitle>
        <TldrawUiDialogCloseButton />
      </TldrawUiDialogHeader>
      <TldrawUiDialogBody style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {subjectClasses.map(renderClassFilterButton)}
      </TldrawUiDialogBody>
      <TldrawUiDialogFooter>
        <TldrawUiButton type="normal" onClick={onClose}>
          <TldrawUiButtonLabel>Close</TldrawUiButtonLabel>
        </TldrawUiButton>
      </TldrawUiDialogFooter>
    </>
  )
}

// Event Details Dialog
interface EventDetailsDialogProps {
  onClose: () => void
  selectedEvent: TeacherTimetableEvent | null
  fileLoadingState: LoadingState
  editor: Editor
  workerDbName: string | undefined
  onOpenFile: (path: string, dbName: string, editor: Editor, setFileLoadingState: (state: LoadingState) => void) => void
  setFileLoadingState: (state: LoadingState) => void
}

export const EventDetailsDialog = ({
  onClose,
  selectedEvent,
  fileLoadingState,
  editor,
  workerDbName,
  onOpenFile,
  setFileLoadingState
}: EventDetailsDialogProps) => {
  const handleOpenFile = () => {
    if (!selectedEvent?.extendedProps?.node_storage_path || !workerDbName) {
      console.error('❌ Failed to open tldraw file - missing snapshot or db name')
      return
    }

    onOpenFile(
      selectedEvent.extendedProps.node_storage_path,
      workerDbName,
      editor,
      setFileLoadingState
    )
  }

  if (!selectedEvent) return null

  return (
    <>
      <TldrawUiDialogHeader>
        <TldrawUiDialogTitle>{selectedEvent.title}</TldrawUiDialogTitle>
        <TldrawUiDialogCloseButton />
      </TldrawUiDialogHeader>
      <TldrawUiDialogBody>
        <p><strong>Start Time:</strong> {new Date(selectedEvent.start).toLocaleString()}</p>
        <p><strong>End Time:</strong> {new Date(selectedEvent.end).toLocaleString()}</p>
        <p><strong>Class:</strong> {selectedEvent.extendedProps?.subjectClass}</p>
        <p><strong>Period:</strong> {selectedEvent.extendedProps?.periodCode}</p>
        
        {fileLoadingState.status === 'loading' && <p>Loading file...</p>}
        {fileLoadingState.status === 'error' && (
          <p style={{color: 'red'}}>Error: {fileLoadingState.error}</p>
        )}
        
        {selectedEvent.extendedProps?.node_storage_path && fileLoadingState.status !== 'loading' && (
          <TldrawUiButton type="normal" onClick={handleOpenFile}>
            <TldrawUiButtonLabel>
              Open Tldraw File <FaExternalLinkAlt style={{ marginLeft: '8px' }} />
            </TldrawUiButtonLabel>
          </TldrawUiButton>
        )}
      </TldrawUiDialogBody>
      <TldrawUiDialogFooter>
        <TldrawUiButton type="normal" onClick={onClose}>
          <TldrawUiButtonLabel>Close</TldrawUiButtonLabel>
        </TldrawUiButton>
      </TldrawUiDialogFooter>
    </>
  )
} 