'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useAuthUser } from '@/hooks/useAuthUser'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { LegacyAvatar } from '@/components/ui/avatar'
import {
  X,
  Copy,
  Download,
  Calendar,
  Check,
  Tag,
  User
} from 'lucide-react'
import { formatDistanceToNow } from 'date-fns'

interface Prompt {
  id: string
  name: string
  content: string
  description: string | null
  createdAt: string
  user: {
    id: string
    username: string | null
    avatar: string | null
  }
  tags: Array<{
    id: string
    name: string
    color: string
  }>
  versions: Array<{
    content: string
    version: number
    createdAt: string
  }>
  stats?: {
    viewCount: number
    likeCount: number
    rating: number | null
    ratingCount: number
  } | null
  _count: {
    versions: number
  }
}

interface PromptDetailModalProps {
  prompt: Prompt | null
  isOpen: boolean
  onClose: () => void
}

export function PromptDetailModal({
  prompt,
  isOpen,
  onClose
}: PromptDetailModalProps) {
  const t = useTranslations('plaza')
  const tCommon = useTranslations('common')
  const { user } = useAuthUser()
  const [copied, setCopied] = useState(false)
  const [duplicating, setDuplicating] = useState(false)

  if (!isOpen || !prompt) return null

  const latestVersion = prompt.versions[0]
  const promptContent = latestVersion?.content || prompt.content

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(promptContent)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (error) {
      console.error('Failed to copy:', error)
    }
  }

  const handleDuplicate = async () => {
    if (!user) {
      // Redirect to sign in
      window.location.href = '/signin'
      return
    }

    setDuplicating(true)
    try {
      const requestData = {
        name: `${prompt.name} (Copy)`,
        content: promptContent,
        description: prompt.description,
        permissions: 'private',
        userId: user.id,
        tags: prompt.tags.map(tag => tag.name),
      }
      
      const response = await fetch('/api/prompts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestData),
      })

      if (response.ok) {
        // Create a temporary success notification
        const notification = document.createElement('div')
        notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300'
        notification.textContent = t('promptDuplicated')
        document.body.appendChild(notification)
        
        setTimeout(() => {
          notification.style.opacity = '0'
          setTimeout(() => {
            if (document.body.contains(notification)) {
              document.body.removeChild(notification)
            }
          }, 300)
        }, 2000)
      } else {
        // Create error notification
        let errorMessage = 'Failed to duplicate prompt'
        try {
          const errorData = await response.json()
          errorMessage = errorData.error || `HTTP ${response.status}: ${response.statusText}`
        } catch {
          errorMessage = `HTTP ${response.status}: ${response.statusText}`
        }
        
        const notification = document.createElement('div')
        notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300'
        notification.textContent = errorMessage
        document.body.appendChild(notification)
        
        setTimeout(() => {
          notification.style.opacity = '0'
          setTimeout(() => {
            if (document.body.contains(notification)) {
              document.body.removeChild(notification)
            }
          }, 300)
        }, 3000)
      }
    } catch {
      // Create error notification for network/other errors
      const notification = document.createElement('div')
      notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300'
      notification.textContent = 'Network error. Please try again.'
      document.body.appendChild(notification)
      
      setTimeout(() => {
        notification.style.opacity = '0'
        setTimeout(() => {
          if (document.body.contains(notification)) {
            document.body.removeChild(notification)
          }
        }, 300)
      }, 3000)
    } finally {
      setDuplicating(false)
    }
  }

  const formatDate = (dateString: string) => {
    return new Intl.DateTimeFormat('default', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    }).format(new Date(dateString))
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/50" 
        onClick={onClose}
      />
      
      {/* Modal */}
      <div className="relative bg-background border border-border rounded-lg shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-border">
          <div className="flex-1 min-w-0">
            <h2 className="text-xl font-semibold text-foreground truncate">
              {prompt.name}
            </h2>
            {prompt.description && (
              <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                {prompt.description}
              </p>
            )}
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            className="h-8 w-8 p-0 ml-4 flex-shrink-0"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>

        {/* Content */}
        <div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-200px)]">
          {/* Prompt Content */}
          <div>
            <h3 className="text-sm font-medium text-foreground mb-3">
              {t('promptContent')}
            </h3>
            <div className="bg-muted/50 rounded-lg p-4 border">
              <pre className="text-sm text-foreground whitespace-pre-wrap font-mono leading-relaxed">
                {promptContent}
              </pre>
            </div>
          </div>

          {/* Tags */}
          {prompt.tags.length > 0 && (
            <div>
              <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
                <Tag className="h-4 w-4" />
                {t('tags')}
              </h3>
              <div className="flex flex-wrap gap-2">
                {prompt.tags.map((tag) => (
                  <Badge 
                    key={tag.id} 
                    variant="secondary" 
                    className="text-sm"
                    style={{ backgroundColor: `${tag.color}20`, color: tag.color }}
                  >
                    {tag.name}
                  </Badge>
                ))}
              </div>
            </div>
          )}

          {/* Author & Meta Info */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-border">
            <div>
              <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
                <User className="h-4 w-4" />
                {t('author')}
              </h3>
              <div className="flex items-center gap-3">
                <LegacyAvatar
                  src={prompt.user.avatar || undefined}
                  alt={prompt.user.username || 'User'}
                  size={40}
                  className="w-10 h-10"
                />
                <div>
                  <p className="text-sm font-medium text-foreground">
                    {prompt.user.username || 'Anonymous'}
                  </p>
                </div>
              </div>
            </div>
            
            <div>
              <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                {t('createdAt')}
              </h3>
              <p className="text-sm text-muted-foreground">
                {formatDate(prompt.createdAt)}
              </p>
              <p className="text-xs text-muted-foreground mt-1">
                ({formatDistanceToNow(new Date(prompt.createdAt), { addSuffix: true })})
              </p>
            </div>
          </div>
        </div>

        {/* Footer Actions */}
        <div className="flex items-center justify-end space-x-3 p-6 border-t border-border">
          <Button
            variant="outline"
            onClick={onClose}
          >
            {tCommon('close')}
          </Button>
          <Button
            variant="outline"
            onClick={handleCopy}
            className="flex items-center space-x-2"
          >
            {copied ? (
              <>
                <Check className="h-4 w-4" />
                <span>{t('promptCopied')}</span>
              </>
            ) : (
              <>
                <Copy className="h-4 w-4" />
                <span>{t('copyToClipboard')}</span>
              </>
            )}
          </Button>
          <Button
            onClick={handleDuplicate}
            disabled={duplicating}
            className="flex items-center space-x-2"
          >
            <Download className="h-4 w-4" />
            <span>{duplicating ? '...' : t('duplicateToStudio')}</span>
          </Button>
        </div>
      </div>
    </div>
  )
}
