'use client'

import { useState, useRef, useEffect } from 'react'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { 
  CheckSquare, 
  X, 
  Bell, 
  Image, 
  UserPlus, 
  Palette, 
  Archive, 
  MoreVertical,
  Undo2,
  Redo2
} from 'lucide-react'
import { createNote } from '@/app/actions/notes'
import { CheckItem, NOTE_COLORS, NoteColor } from '@/lib/types'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'
import { useUndoRedo } from '@/hooks/useUndoRedo'

interface NoteState {
  title: string
  content: string
  checkItems: CheckItem[]
  images: string[]
}

export function NoteInput() {
  const [isExpanded, setIsExpanded] = useState(false)
  const [type, setType] = useState<'text' | 'checklist'>('text')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [color, setColor] = useState<NoteColor>('default')
  const [isArchived, setIsArchived] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  
  // Undo/Redo state management
  const {
    state: noteState,
    setState: setNoteState,
    undo,
    redo,
    canUndo,
    canRedo,
    clear: clearHistory
  } = useUndoRedo<NoteState>({
    title: '',
    content: '',
    checkItems: [],
    images: []
  })

  const { title, content, checkItems, images } = noteState

  // Debounced state updates for performance
  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)

  const updateTitle = (newTitle: string) => {
    // Clear previous timer
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current)
    }

    // Update immediately for UI
    setNoteState(prev => ({ ...prev, title: newTitle }))

    // Debounce history update
    debounceTimerRef.current = setTimeout(() => {
      setNoteState(prev => ({ ...prev, title: newTitle }))
    }, 500)
  }

  const updateContent = (newContent: string) => {
    // Clear previous timer
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current)
    }

    // Update immediately for UI
    setNoteState(prev => ({ ...prev, content: newContent }))

    // Debounce history update
    debounceTimerRef.current = setTimeout(() => {
      setNoteState(prev => ({ ...prev, content: newContent }))
    }, 500)
  }

  const updateCheckItems = (newCheckItems: CheckItem[]) => {
    setNoteState(prev => ({ ...prev, checkItems: newCheckItems }))
  }

  const updateImages = (newImages: string[]) => {
    setNoteState(prev => ({ ...prev, images: newImages }))
  }

  // Cleanup debounce timer
  useEffect(() => {
    return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current)
      }
    }
  }, [])

  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (!isExpanded) return

      if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
        e.preventDefault()
        undo()
      }
      if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
        e.preventDefault()
        redo()
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [isExpanded, undo, redo])

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files) return

    // Validate file types
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
    const maxSize = 5 * 1024 * 1024 // 5MB

    Array.from(files).forEach(file => {
      // Validation
      if (!validTypes.includes(file.type)) {
        alert(`Invalid file type: ${file.name}. Only JPEG, PNG, GIF, and WebP are allowed.`)
        return
      }
      
      if (file.size > maxSize) {
        alert(`File too large: ${file.name}. Maximum size is 5MB.`)
        return
      }

      const reader = new FileReader()
      reader.onloadend = () => {
        updateImages([...images, reader.result as string])
      }
      reader.onerror = () => {
        alert(`Failed to read file: ${file.name}`)
      }
      reader.readAsDataURL(file)
    })

    // Reset input
    e.target.value = ''
  }

  const handleReminder = () => {
    const reminderDate = prompt('Enter reminder date and time (e.g., 2026-01-10 14:30):')
    if (!reminderDate) return

    try {
      const date = new Date(reminderDate)
      if (isNaN(date.getTime())) {
        alert('Invalid date format. Please use format: YYYY-MM-DD HH:MM')
        return
      }

      if (date < new Date()) {
        alert('Reminder date must be in the future')
        return
      }

      // TODO: Store reminder in database and implement notification system
      alert(`Reminder set for: ${date.toLocaleString()}\n\nNote: Reminder system will be fully implemented in the next update.`)
    } catch (error) {
      alert('Failed to set reminder. Please try again.')
    }
  }

  const handleSubmit = async () => {
    // Validation
    if (type === 'text' && !content.trim()) {
      alert('Please enter some content for your note')
      return
    }
    if (type === 'checklist' && checkItems.length === 0) {
      alert('Please add at least one item to your checklist')
      return
    }
    if (type === 'checklist' && checkItems.every(item => !item.text.trim())) {
      alert('Checklist items cannot be empty')
      return
    }

    setIsSubmitting(true)
    try {
      await createNote({
        title: title.trim() || undefined,
        content: type === 'text' ? content : '',
        type,
        checkItems: type === 'checklist' ? checkItems : undefined,
        color,
        isArchived,
        images: images.length > 0 ? images : undefined,
      })

      // Reset form and history
      setNoteState({
        title: '',
        content: '',
        checkItems: [],
        images: []
      })
      clearHistory()
      setIsExpanded(false)
      setType('text')
      setColor('default')
      setIsArchived(false)
    } catch (error) {
      console.error('Failed to create note:', error)
      alert('Failed to create note. Please try again.')
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleAddCheckItem = () => {
    updateCheckItems([
      ...checkItems,
      { id: Date.now().toString(), text: '', checked: false },
    ])
  }

  const handleUpdateCheckItem = (id: string, text: string) => {
    updateCheckItems(
      checkItems.map(item => (item.id === id ? { ...item, text } : item))
    )
  }

  const handleRemoveCheckItem = (id: string) => {
    updateCheckItems(checkItems.filter(item => item.id !== id))
  }

  const handleClose = () => {
    setIsExpanded(false)
    setNoteState({
      title: '',
      content: '',
      checkItems: [],
      images: []
    })
    clearHistory()
    setType('text')
    setColor('default')
    setIsArchived(false)
  }

  if (!isExpanded) {
    return (
      <Card className="p-4 max-w-2xl mx-auto mb-8 cursor-text shadow-md hover:shadow-lg transition-shadow">
        <div className="flex items-center gap-4">
          <Input
            placeholder="Take a note..."
            onClick={() => setIsExpanded(true)}
            readOnly
            value=""
            className="border-0 focus-visible:ring-0 cursor-text"
          />
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setType('checklist')
              setIsExpanded(true)
            }}
            title="New checklist"
          >
            <CheckSquare className="h-5 w-5" />
          </Button>
        </div>
      </Card>
    )
  }

  const colorClasses = NOTE_COLORS[color] || NOTE_COLORS.default

  return (
    <Card className={cn(
      "p-4 max-w-2xl mx-auto mb-8 shadow-lg border",
      colorClasses.card
    )}>
      <div className="space-y-3">
        <Input
          placeholder="Title"
          value={title}
          onChange={(e) => updateTitle(e.target.value)}
          className="border-0 focus-visible:ring-0 text-base font-semibold"
        />

        {/* Image Preview */}
        {images.length > 0 && (
          <div className="flex flex-col gap-2">
            {images.map((img, idx) => (
              <div key={idx} className="relative group">
                <img 
                  src={img} 
                  alt={`Upload ${idx + 1}`} 
                  className="max-w-full h-auto max-h-96 object-contain rounded-lg" 
                />
                <Button
                  variant="ghost"
                  size="sm"
                  className="absolute top-2 right-2 h-7 w-7 p-0 bg-white/90 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={() => updateImages(images.filter((_, i) => i !== idx))}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        )}

        {type === 'text' ? (
          <Textarea
            placeholder="Take a note..."
            value={content}
            onChange={(e) => updateContent(e.target.value)}
            className="border-0 focus-visible:ring-0 min-h-[100px] resize-none"
            autoFocus
          />
        ) : (
          <div className="space-y-2">
            {checkItems.map((item) => (
              <div key={item.id} className="flex items-start gap-2 group">
                <Checkbox className="mt-2" />
                <Input
                  value={item.text}
                  onChange={(e) => handleUpdateCheckItem(item.id, e.target.value)}
                  placeholder="List item"
                  className="flex-1 border-0 focus-visible:ring-0"
                  autoFocus={checkItems[checkItems.length - 1].id === item.id}
                />
                <Button
                  variant="ghost"
                  size="sm"
                  className="opacity-0 group-hover:opacity-100 h-8 w-8 p-0"
                  onClick={() => handleRemoveCheckItem(item.id)}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
            <Button
              variant="ghost"
              size="sm"
              onClick={handleAddCheckItem}
              className="text-gray-600 dark:text-gray-400 w-full justify-start"
            >
              + List item
            </Button>
          </div>
        )}

        <div className="flex items-center justify-between pt-2">
          <TooltipProvider>
            <div className="flex items-center gap-1">
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="h-8 w-8" 
                    title="Remind me"
                    onClick={handleReminder}
                  >
                    <Bell className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Remind me</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="h-8 w-8" 
                    title="Add image"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Image className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Add image</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="ghost" size="icon" className="h-8 w-8" title="Collaborator">
                    <UserPlus className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Collaborator</TooltipContent>
              </Tooltip>

              <DropdownMenu>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-8 w-8" title="Background options">
                        <Palette className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                  </TooltipTrigger>
                  <TooltipContent>Background options</TooltipContent>
                </Tooltip>
                <DropdownMenuContent align="start" className="w-40">
                  <div className="grid grid-cols-5 gap-2 p-2">
                    {Object.entries(NOTE_COLORS).map(([colorName, colorClass]) => (
                      <button
                        key={colorName}
                        onClick={() => setColor(colorName as NoteColor)}
                        className={cn(
                          'w-7 h-7 rounded-full border-2 hover:scale-110 transition-transform',
                          colorClass.bg,
                          color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-transparent'
                        )}
                        title={colorName}
                      />
                    ))}
                  </div>
                </DropdownMenuContent>
              </DropdownMenu>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className={cn(
                      "h-8 w-8",
                      isArchived && "text-yellow-600"
                    )}
                    onClick={() => setIsArchived(!isArchived)}
                    title="Archive"
                  >
                    <Archive className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>{isArchived ? 'Unarchive' : 'Archive'}</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="ghost" size="icon" className="h-8 w-8" title="More">
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>More</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="h-8 w-8" 
                    title="Undo"
                    onClick={undo}
                    disabled={!canUndo}
                  >
                    <Undo2 className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Undo (Ctrl+Z)</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="h-8 w-8" 
                    title="Redo"
                    onClick={redo}
                    disabled={!canRedo}
                  >
                    <Redo2 className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Redo (Ctrl+Y)</TooltipContent>
              </Tooltip>

              {type === 'text' && (
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => {
                        setType('checklist')
                        setContent('')
                        handleAddCheckItem()
                      }}
                      title="Show checkboxes"
                    >
                      <CheckSquare className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Show checkboxes</TooltipContent>
                </Tooltip>
              )}
            </div>
          </TooltipProvider>

          <div className="flex gap-2">
            <Button variant="ghost" onClick={handleClose}>
              Close
            </Button>
            <Button onClick={handleSubmit} disabled={isSubmitting}>
              {isSubmitting ? 'Adding...' : 'Add'}
            </Button>
          </div>
        </div>
      </div>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        multiple
        className="hidden"
        onChange={handleImageUpload}
      />
    </Card>
  )
}