'use client'

import { useState, useRef } from 'react'
import { Note, CheckItem, NOTE_COLORS, NoteColor, LinkMetadata } from '@/lib/types'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { X, Plus, Palette, Image as ImageIcon, Bell, FileText, Eye, Link as LinkIcon, Sparkles, Maximize2, Copy } from 'lucide-react'
import { updateNote, createNote } from '@/app/actions/notes'
import { fetchLinkMetadata } from '@/app/actions/scrape'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'
import { MarkdownContent } from './markdown-content'
import { LabelManager } from './label-manager'
import { LabelBadge } from './label-badge'
import { ReminderDialog } from './reminder-dialog'
import { EditorImages } from './editor-images'
import { useAutoTagging } from '@/hooks/use-auto-tagging'
import { GhostTags } from './ghost-tags'
import { useLabels } from '@/context/LabelContext'
import { NoteSize } from '@/lib/types'
import { Badge } from '@/components/ui/badge'

interface NoteEditorProps {
  note: Note
  readOnly?: boolean
  onClose: () => void
}

export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps) {
  const { labels: globalLabels, addLabel, refreshLabels } = useLabels()
  const [title, setTitle] = useState(note.title || '')
  const [content, setContent] = useState(note.content)
  const [checkItems, setCheckItems] = useState<CheckItem[]>(note.checkItems || [])
  const [labels, setLabels] = useState<string[]>(note.labels || [])
  const [images, setImages] = useState<string[]>(note.images || [])
  const [links, setLinks] = useState<LinkMetadata[]>(note.links || [])
  const [newLabel, setNewLabel] = useState('')
  const [color, setColor] = useState(note.color)
  const [size, setSize] = useState<NoteSize>(note.size || 'small')
  const [isSaving, setIsSaving] = useState(false)
  const [isMarkdown, setIsMarkdown] = useState(note.isMarkdown || false)
  const [showMarkdownPreview, setShowMarkdownPreview] = useState(note.isMarkdown || false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  
  // Auto-tagging hook
  const { suggestions, isAnalyzing } = useAutoTagging({ 
    content: note.type === 'text' ? (content || '') : '',
    enabled: note.type === 'text' // Auto-tagging only for text notes
  })

  // Reminder state
  const [showReminderDialog, setShowReminderDialog] = useState(false)
  const [currentReminder, setCurrentReminder] = useState<Date | null>(note.reminder)

  // Link state
  const [showLinkDialog, setShowLinkDialog] = useState(false)
  const [linkUrl, setLinkUrl] = useState('')
  
  // Tags rejetés par l'utilisateur pour cette session
  const [dismissedTags, setDismissedTags] = useState<string[]>([])

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

  const handleSelectGhostTag = async (tag: string) => {
    // Vérification insensible à la casse
    const tagExists = labels.some(l => l.toLowerCase() === tag.toLowerCase())
    
    if (!tagExists) {
      setLabels(prev => [...prev, tag])
      
      // Créer le label globalement s'il n'existe pas
      const globalExists = globalLabels.some(l => l.name.toLowerCase() === tag.toLowerCase())
      if (!globalExists) {
        try {
          await addLabel(tag)
        } catch (err) {
          console.error('Erreur création label auto:', err)
        }
      }
      toast.success(`Tag "${tag}" ajouté`)
    }
  }

  const handleDismissGhostTag = (tag: string) => {
    setDismissedTags(prev => [...prev, tag])
  }

  // Filtrer les suggestions pour ne pas afficher celles rejetées par l'utilisateur
  // (On garde celles déjà ajoutées pour les afficher en mode "validé")
  const filteredSuggestions = suggestions.filter(s => {
    if (!s || !s.tag) return false
    return !dismissedTags.includes(s.tag)
  })

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

    for (const file of Array.from(files)) {
      const formData = new FormData()
      formData.append('file', file)

      try {
        const response = await fetch('/api/upload', {
          method: 'POST',
          body: formData,
        })

        if (!response.ok) throw new Error('Upload failed')

        const data = await response.json()
        setImages(prev => [...prev, data.url])
      } catch (error) {
        console.error('Upload error:', error)
        toast.error(`Failed to upload ${file.name}`)
      }
    }
  }

  const handleRemoveImage = (index: number) => {
    setImages(images.filter((_, i) => i !== index))
  }

  const handleAddLink = async () => {
    if (!linkUrl) return
    
    setShowLinkDialog(false)
    
    try {
      const metadata = await fetchLinkMetadata(linkUrl)
      if (metadata) {
        setLinks(prev => [...prev, metadata])
        toast.success('Link added')
      } else {
        toast.warning('Could not fetch link metadata')
        setLinks(prev => [...prev, { url: linkUrl, title: linkUrl }])
      }
    } catch (error) {
      console.error('Failed to add link:', error)
      toast.error('Failed to add link')
    } finally {
      setLinkUrl('')
    }
  }

  const handleRemoveLink = (index: number) => {
    setLinks(links.filter((_, i) => i !== index))
  }

  const handleReminderSave = (date: Date) => {
    if (date < new Date()) {
      toast.error('Reminder must be in the future')
      return
    }
    setCurrentReminder(date)
    toast.success(`Reminder set for ${date.toLocaleString()}`)
  }
  
  const handleRemoveReminder = () => {
    setCurrentReminder(null)
    toast.success('Reminder removed')
  }

  const handleSave = async () => {
    setIsSaving(true)
    try {
      await updateNote(note.id, {
        title: title.trim() || null,
        content: note.type === 'text' ? content : '',
        checkItems: note.type === 'checklist' ? checkItems : null,
        labels,
        images,
        links,
        color,
        reminder: currentReminder,
        isMarkdown,
        size,
      })
      
      // Rafraîchir les labels globaux pour refléter les suppressions éventuelles (orphans)
      await refreshLabels()
      
      onClose()
    } catch (error) {
      console.error('Failed to save note:', error)
    } finally {
      setIsSaving(false)
    }
  }

  const handleCheckItem = (id: string) => {
    setCheckItems(items =>
      items.map(item =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    )
  }

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

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

  const handleRemoveCheckItem = (id: string) => {
    setCheckItems(items => items.filter(item => item.id !== id))
  }

  const handleRemoveLabel = (label: string) => {
    setLabels(labels.filter(l => l !== label))
  }

  const handleMakeCopy = async () => {
    try {
      const newNote = await createNote({
        title: `${title || 'Untitled'} (Copy)`,
        content: content,
        color: color,
        type: note.type,
        checkItems: checkItems,
        labels: labels,
        images: images,
        links: links,
        isMarkdown: isMarkdown,
        size: size,
      })
      toast.success('Note copied successfully!')
      onClose()
      // Force refresh to show the new note
      window.location.reload()
    } catch (error) {
      console.error('Failed to copy note:', error)
      toast.error('Failed to copy note')
    }
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent
        className={cn(
          '!max-w-[min(95vw,1600px)] max-h-[90vh] overflow-y-auto',
          colorClasses.bg
        )}
        onInteractOutside={(event) => {
          // Prevent ALL outside interactions from closing dialog
          // This prevents closing when clicking outside (including on toasts)
          event.preventDefault()
        }}
        onPointerDownOutside={(event) => {
          // Prevent ALL pointer down outside from closing dialog
          event.preventDefault()
        }}
      >
        <DialogHeader>
          <DialogTitle className="sr-only">Edit Note</DialogTitle>
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-semibold">{readOnly ? 'View Note' : 'Edit Note'}</h2>
            {readOnly && (
              <Badge variant="secondary" className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                Read Only
              </Badge>
            )}
          </div>
        </DialogHeader>

        <div className="space-y-4">
          {/* Title */}
          <div className="relative">
            <Input
              placeholder="Title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              disabled={readOnly}
              className={cn(
                "text-lg font-semibold border-0 focus-visible:ring-0 px-0 bg-transparent pr-8",
                readOnly && "cursor-default"
              )}
            />
            {filteredSuggestions.length > 0 && (
              <div className="absolute right-0 top-1/2 -translate-y-1/2" title="Suggestions IA disponibles">
                <Sparkles className="w-4 h-4 text-purple-500 animate-pulse" />
              </div>
            )}
          </div>

          {/* Images */}
          <EditorImages images={images} onRemove={handleRemoveImage} />

          {/* Link Previews */}
          {links.length > 0 && (
            <div className="flex flex-col gap-2">
              {links.map((link, idx) => (
                <div key={idx} className="relative group border rounded-lg overflow-hidden bg-white/50 dark:bg-black/20 flex">
                  {link.imageUrl && (
                    <div className="w-24 h-24 flex-shrink-0 bg-cover bg-center" style={{ backgroundImage: `url(${link.imageUrl})` }} />
                  )}
                  <div className="p-2 flex-1 min-w-0 flex flex-col justify-center">
                    <h4 className="font-medium text-sm truncate">{link.title || link.url}</h4>
                    {link.description && <p className="text-xs text-gray-500 truncate">{link.description}</p>}
                    <a href={link.url} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 truncate hover:underline block mt-1">
                      {new URL(link.url).hostname}
                    </a>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="absolute top-1 right-1 h-6 w-6 p-0 bg-white/50 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity rounded-full"
                    onClick={() => handleRemoveLink(idx)}
                  >
                    <X className="h-3 w-3" />
                  </Button>
                </div>
              ))}
            </div>
          )}

          {/* Content or Checklist */}
          {note.type === 'text' ? (
            <div className="space-y-2">
              {/* Markdown controls */}
              <div className="flex items-center justify-between gap-2 pb-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    setIsMarkdown(!isMarkdown)
                    if (isMarkdown) setShowMarkdownPreview(false)
                  }}
                  className={cn("h-7 text-xs", isMarkdown && "text-blue-600")}
                >
                  <FileText className="h-3 w-3 mr-1" />
                  {isMarkdown ? 'Markdown ON' : 'Markdown OFF'}
                </Button>
                
                {isMarkdown && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowMarkdownPreview(!showMarkdownPreview)}
                    className="h-7 text-xs"
                  >
                    {showMarkdownPreview ? (
                      <>
                        <FileText className="h-3 w-3 mr-1" />
                        Edit
                      </>
                    ) : (
                      <>
                        <Eye className="h-3 w-3 mr-1" />
                        Preview
                      </>
                    )}
                  </Button>
                )}
              </div>

              {showMarkdownPreview && isMarkdown ? (
                <MarkdownContent
                  content={content || '*No content*'}
                  className="min-h-[200px] p-3 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50"
                />
              ) : (
                <Textarea
                  placeholder={isMarkdown ? "Take a note... (Markdown supported)" : "Take a note..."}
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  disabled={readOnly}
                  className={cn(
                    "min-h-[200px] border-0 focus-visible:ring-0 px-0 bg-transparent resize-none",
                    readOnly && "cursor-default"
                  )}
                />
              )}
              
              {/* AI Auto-tagging Suggestions */}
              <GhostTags 
                suggestions={filteredSuggestions} 
                addedTags={labels}
                isAnalyzing={isAnalyzing} 
                onSelectTag={handleSelectGhostTag} 
                onDismissTag={handleDismissGhostTag}
              />
            </div>
          ) : (
            <div className="space-y-2">
              {checkItems.map((item) => (
                <div key={item.id} className="flex items-start gap-2 group">
                  <Checkbox
                    checked={item.checked}
                    onCheckedChange={() => handleCheckItem(item.id)}
                    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 px-0 bg-transparent"
                  />
                  <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"
              >
                <Plus className="h-4 w-4 mr-1" />
                Add item
              </Button>
            </div>
          )}

          {/* Labels */}
          {labels.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {labels.map((label) => (
                <LabelBadge
                  key={label}
                  label={label}
                  onRemove={() => handleRemoveLabel(label)}
                />
              ))}
            </div>
          )}

          {/* Toolbar */}
          <div className="flex items-center justify-between pt-4 border-t">
            <div className="flex items-center gap-2">
              {!readOnly && (
                <>
                  {/* Reminder Button */}
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowReminderDialog(true)}
                    title="Set reminder"
                    className={currentReminder ? "text-blue-600" : ""}
                  >
                    <Bell className="h-4 w-4" />
                  </Button>

                  {/* Add Image Button */}
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => fileInputRef.current?.click()}
                    title="Add image"
                  >
                    <ImageIcon className="h-4 w-4" />
                  </Button>

                  {/* Add Link Button */}
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowLinkDialog(true)}
                    title="Add Link"
                  >
                    <LinkIcon className="h-4 w-4" />
                  </Button>

                  {/* Size Selector */}
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm" title="Change size">
                        <Maximize2 className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                      <div className="flex flex-col gap-1 p-1">
                        {['small', 'medium', 'large'].map((s) => (
                          <Button
                            key={s}
                            variant="ghost"
                            size="sm"
                            onClick={() => setSize(s as NoteSize)}
                            className={cn(
                              "justify-start capitalize",
                              size === s && "bg-accent"
                            )}
                          >
                            {s}
                          </Button>
                        ))}
                      </div>
                    </DropdownMenuContent>
                  </DropdownMenu>

                  {/* Color Picker */}
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm" title="Change color">
                        <Palette className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                      <div className="grid grid-cols-5 gap-2 p-2">
                        {Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
                          <button
                            key={colorName}
                            className={cn(
                              'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
                              classes.bg,
                              color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700'
                            )}
                            onClick={() => setColor(colorName)}
                            title={colorName}
                          />
                        ))}
                      </div>
                    </DropdownMenuContent>
                  </DropdownMenu>

                  {/* Label Manager */}
                  <LabelManager
                    existingLabels={labels}
                    onUpdate={setLabels}
                  />
                </>
              )}
              {readOnly && (
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <span className="text-xs">This note is shared with you in read-only mode</span>
                </div>
              )}
            </div>

            <div className="flex gap-2">
              {readOnly ? (
                <>
                  <Button
                    variant="default"
                    onClick={handleMakeCopy}
                    className="flex items-center gap-2"
                  >
                    <Copy className="h-4 w-4" />
                    Make a copy
                  </Button>
                  <Button variant="ghost" onClick={onClose}>
                    Close
                  </Button>
                </>
              ) : (
                <>
                  <Button variant="ghost" onClick={onClose}>
                    Cancel
                  </Button>
                  <Button onClick={handleSave} disabled={isSaving}>
                    {isSaving ? 'Saving...' : 'Save'}
                  </Button>
                </>
              )}
            </div>
          </div>
        </div>
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          multiple
          className="hidden"
          onChange={handleImageUpload}
        />
      </DialogContent>

      <ReminderDialog 
        open={showReminderDialog}
        onOpenChange={setShowReminderDialog}
        currentReminder={currentReminder}
        onSave={handleReminderSave}
        onRemove={handleRemoveReminder}
      />

      <Dialog open={showLinkDialog} onOpenChange={setShowLinkDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add Link</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <Input
              placeholder="https://example.com"
              value={linkUrl}
              onChange={(e) => setLinkUrl(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault()
                  handleAddLink()
                }
              }}
              autoFocus
            />
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setShowLinkDialog(false)}>
              Cancel
            </Button>
            <Button onClick={handleAddLink}>
              Add
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Dialog>
  )
}