'use client'

import { useTranslations } from 'next-intl'
import { Button } from '@/components/ui/button'
import { X, Edit, Play, Calendar, Tag } from 'lucide-react'

interface Prompt {
  id: string
  name: string
  description: string | null
  content: string
  tags: string[]
  createdAt: string
  updatedAt: string
  lastUsed?: string | null
  currentVersion?: number
  usage?: number
}

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

export function PromptDetailModal({
  prompt,
  isOpen,
  onClose,
  onEdit,
  onDebug
}: PromptDetailModalProps) {
  const t = useTranslations('studio')
  const tCommon = useTranslations('common')

  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))
  }

  if (!isOpen || !prompt) return null

  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-2xl 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">
            <h2 className="text-xl font-semibold text-foreground">
              {prompt.name}
            </h2>
            {prompt.description && (
              <p className="text-sm text-muted-foreground mt-1">
                {prompt.description}
              </p>
            )}
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            className="h-8 w-8 p-0"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>

        {/* Content */}
        <div className="p-6 space-y-6 overflow-y-auto max-h-[60vh]">
          {/* Tags */}
          {prompt.tags && prompt.tags.length > 0 && (
            <div className="space-y-2">
              <div className="flex items-center text-sm font-medium text-foreground">
                <Tag className="h-4 w-4 mr-2" />
                {t('tags')}
              </div>
              <div className="flex flex-wrap gap-2">
                {prompt.tags.map((tag: string | { name: string }) => {
                  const tagName = typeof tag === 'string' ? tag : tag?.name || '';
                  return (
                    <span
                      key={tagName}
                      className="inline-flex items-center px-3 py-1 text-sm font-medium bg-muted text-muted-foreground rounded-full"
                    >
                      {tagName}
                    </span>
                  );
                })}
              </div>
            </div>
          )}

          {/* Prompt Content */}
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-foreground">{t('promptContent')}</h3>
            <div className="bg-muted rounded-lg p-4">
              <pre className="text-sm text-foreground whitespace-pre-wrap break-words">
                {prompt.content}
              </pre>
            </div>
          </div>

          {/* Metadata */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div className="space-y-3">
              <div className="flex items-center text-muted-foreground">
                <Calendar className="h-4 w-4 mr-2" />
                <span className="font-medium">{t('createdAt')}:</span>
                <span className="ml-2">{formatDate(prompt.createdAt)}</span>
              </div>
              <div className="flex items-center text-muted-foreground">
                <Calendar className="h-4 w-4 mr-2" />
                <span className="font-medium">{t('updatedAt')}:</span>
                <span className="ml-2">{formatDate(prompt.updatedAt)}</span>
              </div>
            </div>
            <div className="space-y-3">
              {prompt.lastUsed && (
                <div className="flex items-center text-muted-foreground">
                  <Calendar className="h-4 w-4 mr-2" />
                  <span className="font-medium">{t('lastUsed')}:</span>
                  <span className="ml-2">{formatDate(prompt.lastUsed)}</span>
                </div>
              )}
              {prompt.currentVersion && (
                <div className="flex items-center text-muted-foreground">
                  <span className="font-medium">{t('version')}:</span>
                  <span className="ml-2">v{prompt.currentVersion}</span>
                </div>
              )}
            </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={() => {
              onEdit(prompt.id)
              onClose()
            }}
            className="flex items-center space-x-2"
          >
            <Edit className="h-4 w-4" />
            <span>{tCommon('edit')}</span>
          </Button>
          <Button
            onClick={() => {
              onDebug(prompt.id)
              onClose()
            }}
            className="flex items-center space-x-2"
          >
            <Play className="h-4 w-4" />
            <span>{t('debugPrompt')}</span>
          </Button>
        </div>
      </div>
    </div>
  )
}