"use client"

import React, { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog'
import { Button } from '../ui/button'
import { Input } from '../ui/input'
import { Textarea } from '../ui/textarea'
import { Label } from '../ui/label'
import { MoonUIBadgePro as Badge } from '../ui/badge'
import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, AvatarGroup as MoonUIAvatarGroupPro } from '../ui/avatar'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
import { Calendar as CalendarComponent } from '../ui/calendar'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
import { ScrollArea } from '../ui/scroll-area'
import { Progress } from '../ui/progress'
import { Separator } from '../ui/separator'
import { Checkbox } from '../ui/checkbox'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../ui/dropdown-menu'
import { 
  X, 
  Calendar, 
  User, 
  Tag, 
  Paperclip, 
  MessageCircle,
  Clock,
  Flag,
  CheckSquare,
  Plus,
  MoreHorizontal,
  Edit2,
  Trash2,
  Download,
  Eye,
  Link2,
  Archive,
  Copy,
  Activity,
  AlertCircle,
  Check,
  ChevronDown,
  Upload,
  FileText,
  Image,
  FileIcon,
  Send,
  Star,
  StarOff
} from 'lucide-react'
import { format } from 'date-fns'
import { cn } from '../../lib/utils'
import type { KanbanCard, KanbanAssignee, KanbanLabel, KanbanActivity, KanbanChecklist } from './types'

interface CardDetailModalProps {
  card: KanbanCard
  isOpen: boolean
  onClose: () => void
  onUpdate: (card: KanbanCard) => void
  onDelete: (card: KanbanCard) => void
  availableAssignees?: KanbanAssignee[]
  availableLabels?: KanbanLabel[]
  currentColumn?: string
  availableColumns?: { id: string; title: string }[]
}

const PRIORITY_OPTIONS = [
  { value: 'low', label: 'Low', icon: Flag, color: 'text-green-600' },
  { value: 'medium', label: 'Medium', icon: Flag, color: 'text-yellow-600' },
  { value: 'high', label: 'High', icon: Flag, color: 'text-orange-600' },
  { value: 'urgent', label: 'Urgent', icon: AlertCircle, color: 'text-red-600' }
]

const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const getInitials = (name: string) => {
  return name.split(' ').map(n => n[0]).join('').toUpperCase()
}

export function CardDetailModal({
  card: initialCard,
  isOpen,
  onClose,
  onUpdate,
  onDelete,
  availableAssignees = [],
  availableLabels = [],
  currentColumn,
  availableColumns = []
}: CardDetailModalProps) {
  const [card, setCard] = useState(initialCard)
  const [isEditingTitle, setIsEditingTitle] = useState(false)
  const [isEditingDescription, setIsEditingDescription] = useState(false)
  const [newComment, setNewComment] = useState('')
  const [newChecklistItem, setNewChecklistItem] = useState('')
  const [selectedTab, setSelectedTab] = useState('overview')

  useEffect(() => {
    setCard(initialCard)
  }, [initialCard])

  const updateCard = (updates: Partial<KanbanCard>) => {
    const updatedCard = { ...card, ...updates }
    setCard(updatedCard)
    onUpdate(updatedCard)
  }

  const addComment = () => {
    if (!newComment.trim()) return

    const newActivity: KanbanActivity = {
      id: Date.now().toString(),
      user: {
        id: 'current-user',
        name: 'Current User',
        email: 'user@example.com'
      },
      action: 'commented',
      timestamp: new Date(),
      details: newComment
    }

    updateCard({
      activities: [newActivity, ...(card.activities || [])],
      comments: (card.comments || 0) + 1
    })
    setNewComment('')
  }

  const addChecklistItem = () => {
    if (!newChecklistItem.trim()) return

    const checklist = card.checklist || {
      id: Date.now().toString(),
      title: 'Checklist',
      items: []
    }

    checklist.items.push({
      id: Date.now().toString(),
      text: newChecklistItem,
      completed: false
    })

    updateCard({ checklist })
    setNewChecklistItem('')
  }

  const toggleChecklistItem = (itemId: string) => {
    if (!card.checklist) return

    const updatedChecklist = {
      ...card.checklist,
      items: card.checklist.items.map(item =>
        item.id === itemId ? { ...item, completed: !item.completed } : item
      )
    }

    updateCard({ checklist: updatedChecklist })
  }

  const deleteChecklistItem = (itemId: string) => {
    if (!card.checklist) return

    const updatedChecklist = {
      ...card.checklist,
      items: card.checklist.items.filter(item => item.id !== itemId)
    }

    updateCard({ checklist: updatedChecklist })
  }

  const completedChecklistItems = card.checklist?.items.filter(item => item.completed).length || 0
  const totalChecklistItems = card.checklist?.items.length || 0
  const checklistProgress = totalChecklistItems > 0 ? (completedChecklistItems / totalChecklistItems) * 100 : 0

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

    const newAttachments = Array.from(files).map(file => ({
      id: Date.now().toString() + Math.random(),
      name: file.name,
      type: file.type,
      url: URL.createObjectURL(file),
      size: file.size
    }))

    updateCard({
      attachments: [...(card.attachments || []), ...newAttachments]
    })
  }

  const removeAttachment = (attachmentId: string) => {
    updateCard({
      attachments: card.attachments?.filter(a => a.id !== attachmentId)
    })
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
        {/* Header */}
        <div className="p-6 pb-0">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              {isEditingTitle ? (
                <Input
                  value={card.title}
                  onChange={(e) => updateCard({ title: e.target.value })}
                  onBlur={() => setIsEditingTitle(false)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') setIsEditingTitle(false)
                    if (e.key === 'Escape') {
                      setCard(initialCard)
                      setIsEditingTitle(false)
                    }
                  }}
                  className="text-xl font-semibold"
                  autoFocus
                />
              ) : (
                <h2 
                  className="text-xl font-semibold cursor-pointer hover:bg-muted rounded px-2 -mx-2 py-1"
                  onClick={() => setIsEditingTitle(true)}
                >
                  {card.title}
                </h2>
              )}
              {currentColumn && (
                <p className="text-sm text-muted-foreground mt-1">
                  in {currentColumn}
                </p>
              )}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex-1">
          <div className="px-6 pt-4">
            <TabsList>
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="activity">
                Activity
                {card.activities && card.activities.length > 0 && (
                  <Badge variant="secondary" className="ml-2">
                    {card.activities.length}
                  </Badge>
                )}
              </TabsTrigger>
              <TabsTrigger value="comments">
                Comments
                {card.comments && card.comments > 0 && (
                  <Badge variant="secondary" className="ml-2">
                    {card.comments}
                  </Badge>
                )}
              </TabsTrigger>
            </TabsList>
          </div>

          <ScrollArea className="flex-1 max-h-[calc(90vh-200px)]">
            <div className="p-6">
              <TabsContent value="overview" className="mt-0">
                <div className="space-y-6">
                  {/* Description */}
                  <div>
                    <Label className="text-base font-semibold mb-2 block">Description</Label>
                    {isEditingDescription ? (
                      <div className="space-y-2">
                        <Textarea
                          value={card.description || ''}
                          onChange={(e) => updateCard({ description: e.target.value })}
                          placeholder="Add a description..."
                          className="min-h-[100px]"
                          autoFocus
                        />
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            onClick={() => setIsEditingDescription(false)}
                          >
                            Save
                          </Button>
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => {
                              setCard(initialCard)
                              setIsEditingDescription(false)
                            }}
                          >
                            Cancel
                          </Button>
                        </div>
                      </div>
                    ) : (
                      <div
                        className="min-h-[50px] p-3 rounded-md border cursor-pointer hover:bg-muted/50"
                        onClick={() => setIsEditingDescription(true)}
                      >
                        {card.description || (
                          <span className="text-muted-foreground">Add a description...</span>
                        )}
                      </div>
                    )}
                  </div>

                  {/* Details Grid */}
                  <div className="grid grid-cols-2 gap-4">
                    {/* Assignees */}
                    <div>
                      <Label className="text-sm font-medium mb-2 block">Assignees</Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button variant="outline" className="w-full justify-start">
                            {card.assignees && card.assignees.length > 0 ? (
                              <div className="flex items-center gap-2">
                                <MoonUIAvatarGroupPro max={3} size="xs">
                                  {card.assignees.map((assignee) => (
                                    <MoonUIAvatarPro key={assignee.id} className="h-5 w-5">
                                      <MoonUIAvatarImagePro src={assignee.avatar} />
                                      <MoonUIAvatarFallbackPro className="text-xs">
                                        {getInitials(assignee.name)}
                                      </MoonUIAvatarFallbackPro>
                                    </MoonUIAvatarPro>
                                  ))}
                                </MoonUIAvatarGroupPro>
                                <span className="text-sm">
                                  {card.assignees.map(a => a.name).join(', ')}
                                </span>
                              </div>
                            ) : (
                              <span className="text-muted-foreground">Add assignee</span>
                            )}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="p-0" align="start">
                          <Command>
                            <CommandInput placeholder="Search assignees..." />
                            <CommandEmpty>No assignees found.</CommandEmpty>
                            <CommandGroup>
                              {availableAssignees.map((assignee) => {
                                const isSelected = card.assignees?.some(a => a.id === assignee.id)
                                return (
                                  <CommandItem
                                    key={assignee.id}
                                    onSelect={() => {
                                      if (isSelected) {
                                        updateCard({
                                          assignees: card.assignees?.filter(a => a.id !== assignee.id)
                                        })
                                      } else {
                                        updateCard({
                                          assignees: [...(card.assignees || []), assignee]
                                        })
                                      }
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        isSelected ? "opacity-100" : "opacity-0"
                                      )}
                                    />
                                    <MoonUIAvatarPro className="h-6 w-6 mr-2">
                                      <MoonUIAvatarImagePro src={assignee.avatar} />
                                      <MoonUIAvatarFallbackPro className="text-xs">
                                        {getInitials(assignee.name)}
                                      </MoonUIAvatarFallbackPro>
                                    </MoonUIAvatarPro>
                                    <span>{assignee.name}</span>
                                  </CommandItem>
                                )
                              })}
                            </CommandGroup>
                          </Command>
                        </PopoverContent>
                      </Popover>
                    </div>

                    {/* Priority */}
                    <div>
                      <Label className="text-sm font-medium mb-2 block">Priority</Label>
                      <Select value={card.priority || 'medium'} onValueChange={(value: any) => updateCard({ priority: value })}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {PRIORITY_OPTIONS.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              <div className="flex items-center gap-2">
                                <option.icon className={cn("h-4 w-4", option.color)} />
                                <span>{option.label}</span>
                              </div>
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* Due Date */}
                    <div>
                      <Label className="text-sm font-medium mb-2 block">Due Date</Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button variant="outline" className="w-full justify-start">
                            {card.dueDate ? (
                              <>
                                <Calendar className="mr-2 h-4 w-4" />
                                {format(card.dueDate, 'PPP')}
                              </>
                            ) : (
                              <span className="text-muted-foreground">Set due date</span>
                            )}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                          <CalendarComponent
                            mode="single"
                            selected={card.dueDate}
                            onSelect={(date) => {
                              if (date instanceof Date) {
                                updateCard({ dueDate: date })
                              } else {
                                updateCard({ dueDate: undefined })
                              }
                            }}
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                    </div>

                    {/* Labels */}
                    <div>
                      <Label className="text-sm font-medium mb-2 block">Labels</Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button variant="outline" className="w-full justify-start">
                            {card.labels && card.labels.length > 0 ? (
                              <div className="flex flex-wrap gap-1">
                                {card.labels.map((label) => (
                                  <div
                                    key={label.id}
                                    className="px-2 py-0.5 rounded text-xs text-white"
                                    style={{ backgroundColor: label.color }}
                                  >
                                    {label.name}
                                  </div>
                                ))}
                              </div>
                            ) : (
                              <span className="text-muted-foreground">Add labels</span>
                            )}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="p-3" align="start">
                          <div className="space-y-2">
                            {availableLabels.map((label) => {
                              const isSelected = card.labels?.some(l => l.id === label.id)
                              return (
                                <div
                                  key={label.id}
                                  className={cn(
                                    "flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-muted",
                                    isSelected && "bg-muted"
                                  )}
                                  onClick={() => {
                                    if (isSelected) {
                                      updateCard({
                                        labels: card.labels?.filter(l => l.id !== label.id)
                                      })
                                    } else {
                                      updateCard({
                                        labels: [...(card.labels || []), label]
                                      })
                                    }
                                  }}
                                >
                                  <div
                                    className="w-6 h-6 rounded"
                                    style={{ backgroundColor: label.color }}
                                  />
                                  <span className="text-sm">{label.name}</span>
                                  {isSelected && <Check className="h-4 w-4 ml-auto" />}
                                </div>
                              )
                            })}
                          </div>
                        </PopoverContent>
                      </Popover>
                    </div>
                  </div>

                  {/* Checklist */}
                  <div>
                    <div className="flex items-center justify-between mb-3">
                      <Label className="text-base font-semibold">Checklist</Label>
                      {totalChecklistItems > 0 && (
                        <div className="flex items-center gap-2">
                          <span className="text-sm text-muted-foreground">
                            {completedChecklistItems}/{totalChecklistItems}
                          </span>
                          <Progress value={checklistProgress} className="w-20 h-2" />
                        </div>
                      )}
                    </div>
                    <div className="space-y-2">
                      {card.checklist?.items.map((item) => (
                        <div key={item.id} className="flex items-center gap-2 group">
                          <Checkbox
                            checked={item.completed}
                            onCheckedChange={() => toggleChecklistItem(item.id)}
                          />
                          <span className={cn(
                            "flex-1",
                            item.completed && "line-through text-muted-foreground"
                          )}>
                            {item.text}
                          </span>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6 opacity-0 group-hover:opacity-100"
                            onClick={() => deleteChecklistItem(item.id)}
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      ))}
                      <div className="flex items-center gap-2">
                        <Checkbox disabled className="invisible" />
                        <Input
                          placeholder="Add an item..."
                          value={newChecklistItem}
                          onChange={(e) => setNewChecklistItem(e.target.value)}
                          onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                              e.preventDefault()
                              addChecklistItem()
                            }
                          }}
                        />
                        <Button
                          size="sm"
                          onClick={addChecklistItem}
                          disabled={!newChecklistItem.trim()}
                        >
                          Add
                        </Button>
                      </div>
                    </div>
                  </div>

                  {/* Attachments */}
                  <div>
                    <Label className="text-base font-semibold mb-3 block">Attachments</Label>
                    <div className="space-y-2">
                      {card.attachments?.map((attachment) => (
                        <div key={attachment.id} className="flex items-center gap-3 p-3 border rounded-lg group">
                          <div className="flex-shrink-0">
                            {attachment.type.startsWith('image/') ? (
                              <Image className="h-8 w-8 text-muted-foreground" />
                            ) : (
                              <FileText className="h-8 w-8 text-muted-foreground" />
                            )}
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium truncate">{attachment.name}</p>
                            <p className="text-xs text-muted-foreground">{formatFileSize(attachment.size)}</p>
                          </div>
                          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8"
                              onClick={() => window.open(attachment.url, '_blank')}
                            >
                              <Download className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8"
                              onClick={() => removeAttachment(attachment.id)}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                      <div>
                        <input
                          type="file"
                          id="file-upload"
                          className="hidden"
                          multiple
                          onChange={handleFileUpload}
                        />
                        <Button
                          variant="outline"
                          className="w-full"
                          onClick={() => document.getElementById('file-upload')?.click()}
                        >
                          <Upload className="mr-2 h-4 w-4" />
                          Add attachment
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="activity" className="mt-0">
                <div className="space-y-4">
                  {card.activities?.map((activity) => (
                    <div key={activity.id} className="flex gap-3">
                      <MoonUIAvatarPro className="h-8 w-8">
                        <MoonUIAvatarImagePro src={activity.user.avatar} />
                        <MoonUIAvatarFallbackPro className="text-xs">
                          {getInitials(activity.user.name)}
                        </MoonUIAvatarFallbackPro>
                      </MoonUIAvatarPro>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{activity.user.name}</span>
                          <span className="text-sm text-muted-foreground">{activity.action}</span>
                          <span className="text-xs text-muted-foreground">
                            {format(activity.timestamp, 'PPp')}
                          </span>
                        </div>
                        {activity.details && (
                          <p className="text-sm text-muted-foreground">{activity.details}</p>
                        )}
                      </div>
                    </div>
                  ))}
                  {(!card.activities || card.activities.length === 0) && (
                    <div className="text-center py-8 text-muted-foreground">
                      <Activity className="h-8 w-8 mx-auto mb-2 opacity-50" />
                      <p>No activity yet</p>
                    </div>
                  )}
                </div>
              </TabsContent>

              <TabsContent value="comments" className="mt-0">
                <div className="space-y-4">
                  {/* Comment Input */}
                  <div className="flex gap-3">
                    <MoonUIAvatarPro className="h-8 w-8">
                      <MoonUIAvatarFallbackPro>U</MoonUIAvatarFallbackPro>
                    </MoonUIAvatarPro>
                    <div className="flex-1 space-y-2">
                      <Textarea
                        placeholder="Add a comment..."
                        value={newComment}
                        onChange={(e) => setNewComment(e.target.value)}
                        className="min-h-[80px]"
                      />
                      <div className="flex justify-end">
                        <Button
                          size="sm"
                          onClick={addComment}
                          disabled={!newComment.trim()}
                        >
                          <Send className="mr-2 h-4 w-4" />
                          Comment
                        </Button>
                      </div>
                    </div>
                  </div>

                  <Separator />

                  {/* Comments List */}
                  {card.activities?.filter(a => a.action === 'commented').map((comment) => (
                    <div key={comment.id} className="flex gap-3">
                      <MoonUIAvatarPro className="h-8 w-8">
                        <MoonUIAvatarImagePro src={comment.user.avatar} />
                        <MoonUIAvatarFallbackPro className="text-xs">
                          {getInitials(comment.user.name)}
                        </MoonUIAvatarFallbackPro>
                      </MoonUIAvatarPro>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{comment.user.name}</span>
                          <span className="text-xs text-muted-foreground">
                            {format(comment.timestamp, 'PPp')}
                          </span>
                        </div>
                        <p className="text-sm">{comment.details}</p>
                      </div>
                    </div>
                  ))}
                  {!card.activities?.some(a => a.action === 'commented') && (
                    <div className="text-center py-8 text-muted-foreground">
                      <MessageCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
                      <p>No comments yet</p>
                      <p className="text-sm">Be the first to comment</p>
                    </div>
                  )}
                </div>
              </TabsContent>
            </div>
          </ScrollArea>
        </Tabs>

        {/* Footer Actions */}
        <div className="border-t p-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm">
                  <MoreHorizontal className="h-4 w-4 mr-2" />
                  Actions
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                <DropdownMenuItem>
                  <Copy className="mr-2 h-4 w-4" />
                  Duplicate card
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Archive className="mr-2 h-4 w-4" />
                  Archive card
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Link2 className="mr-2 h-4 w-4" />
                  Copy link
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  onClick={() => {
                    onDelete(card)
                    onClose()
                  }}
                  className="text-destructive"
                >
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete card
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
          <Button onClick={onClose}>Close</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}