marketing-app/client/src/components/PostDetailAttachments.jsx

import { useState, useRef } from 'react'
import { X, Upload, FileText, FolderOpen, Image as ImageIcon, Music, Film } from 'lucide-react'
import { useLanguage } from '../i18n/LanguageContext'

export function PostDetailAttachments({
  attachments,
  uploading,
  onFileUpload,
  onDeleteAttachment,
  onAttachAsset,
}) {
  const { t } = useLanguage()
  const imageInputRef = useRef(null)
  const [dragActive, setDragActive] = useState(false)
  const [showAssetPicker, setShowAssetPicker] = useState(false)
  const [availableAssets, setAvailableAssets] = useState([])
  const [assetSearch, setAssetSearch] = useState('')

  const handleDrop = (e) => {
    e.preventDefault(); e.stopPropagation(); setDragActive(false)
    if (e.dataTransfer.files?.length) onFileUpload(e.dataTransfer.files)
  }

  const openAssetPicker = async () => {
    const { api } = await import('../utils/api')
    try {
      const data = await api.get('/assets')
      setAvailableAssets(Array.isArray(data) ? data : [])
    } catch {
      setAvailableAssets([])
    }
    setAssetSearch('')
    setShowAssetPicker(true)
  }

  const handleAttachAsset = async (assetId) => {
    await onAttachAsset(assetId)
    setShowAssetPicker(false)
  }

  const images = attachments.filter(a => (a.mime_type || a.mimeType || '').startsWith('image/'))
  const audio = attachments.filter(a => (a.mime_type || a.mimeType || '').startsWith('audio/'))
  const videos = attachments.filter(a => (a.mime_type || a.mimeType || '').startsWith('video/'))
  const others = attachments.filter(a => {
    const mime = a.mime_type || a.mimeType || ''
    return !mime.startsWith('image/') && !mime.startsWith('audio/') && !mime.startsWith('video/')
  })

  return (
    <div className="space-y-4">
      {/* Images */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-1.5 text-xs font-medium text-text-secondary">
            <ImageIcon className="w-3.5 h-3.5" />
            {t('posts.images')}
            {images.length > 0 && <span className="text-text-tertiary">({images.length})</span>}
          </div>
          <label className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium text-brand-primary hover:bg-brand-primary/5 rounded cursor-pointer transition-colors">
            <Upload className="w-3 h-3" />
            {t('posts.addImage')}
            <input ref={imageInputRef} type="file" multiple accept="image/*" className="hidden"
              onChange={e => { onFileUpload(e.target.files); e.target.value = '' }} />
          </label>
        </div>
        {images.length > 0 && (
          <div className="grid grid-cols-3 gap-2">
            {images.map(att => {
              const attUrl = att.url || `/api/uploads/${att.filename}`
              const name = att.original_name || att.originalName || att.filename
              const attId = att.id || att._id
              return (
                <div key={attId} className="relative group/att border border-border rounded-lg overflow-hidden bg-surface">
                  <div className="h-20 relative">
                    <a href={attUrl} target="_blank" rel="noopener noreferrer" className="block h-full">
                      <img src={attUrl} alt={name} className="absolute inset-0 w-full h-full object-cover" />
                    </a>
                    <button onClick={() => onDeleteAttachment(attId)}
                      className="absolute top-1 end-1 p-1 bg-black/50 hover:bg-red-500 rounded-full text-white opacity-0 group-hover/att:opacity-100 transition-opacity"
                      title={t('common.delete')}><X className="w-2.5 h-2.5" /></button>
                  </div>
                  <div className="px-2 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">{name}</div>
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* Audio */}
      {audio.length > 0 && (
        <div>
          <div className="flex items-center gap-1.5 text-xs font-medium text-text-secondary mb-2">
            <Music className="w-3.5 h-3.5" />
            {t('posts.audio')} <span className="text-text-tertiary">({audio.length})</span>
          </div>
          <div className="space-y-2">
            {audio.map(att => {
              const attUrl = att.url || `/api/uploads/${att.filename}`
              const name = att.original_name || att.originalName || att.filename
              const attId = att.id || att._id
              return (
                <div key={attId} className="flex items-center gap-2 border border-border rounded-lg p-2 bg-surface group/att">
                  <Music className="w-4 h-4 text-text-tertiary shrink-0" />
                  <span className="text-xs text-text-secondary truncate flex-1">{name}</span>
                  <audio src={attUrl} controls className="h-7 max-w-[160px]" />
                  <button onClick={() => onDeleteAttachment(attId)}
                    className="p-1 text-text-tertiary hover:text-red-500 opacity-0 group-hover/att:opacity-100 transition-opacity"
                    title={t('common.delete')}><X className="w-3 h-3" /></button>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Videos */}
      {videos.length > 0 && (
        <div>
          <div className="flex items-center gap-1.5 text-xs font-medium text-text-secondary mb-2">
            <Film className="w-3.5 h-3.5" />
            {t('posts.videos')} <span className="text-text-tertiary">({videos.length})</span>
          </div>
          <div className="space-y-2">
            {videos.map(att => {
              const attUrl = att.url || `/api/uploads/${att.filename}`
              const name = att.original_name || att.originalName || att.filename
              const attId = att.id || att._id
              return (
                <div key={attId} className="border border-border rounded-lg overflow-hidden bg-surface group/att">
                  <video src={attUrl} controls className="w-full max-h-40" />
                  <div className="flex items-center justify-between px-2 py-1 border-t border-border-light">
                    <span className="text-[10px] text-text-tertiary truncate">{name}</span>
                    <button onClick={() => onDeleteAttachment(attId)}
                      className="p-1 text-text-tertiary hover:text-red-500 opacity-0 group-hover/att:opacity-100 transition-opacity"
                      title={t('common.delete')}><X className="w-3 h-3" /></button>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Other files */}
      {others.length > 0 && (
        <div>
          <div className="flex items-center gap-1.5 text-xs font-medium text-text-secondary mb-2">
            <FileText className="w-3.5 h-3.5" />
            {t('posts.otherFiles')} <span className="text-text-tertiary">({others.length})</span>
          </div>
          <div className="grid grid-cols-3 gap-2">
            {others.map(att => {
              const attUrl = att.url || `/api/uploads/${att.filename}`
              const name = att.original_name || att.originalName || att.filename
              const attId = att.id || att._id
              return (
                <div key={attId} className="relative group/att border border-border rounded-lg overflow-hidden bg-surface">
                  <a href={attUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 p-3 h-16">
                    <FileText className="w-6 h-6 text-text-tertiary shrink-0" />
                    <span className="text-xs text-text-secondary truncate">{name}</span>
                  </a>
                  <button onClick={() => onDeleteAttachment(attId)}
                    className="absolute top-1 end-1 p-1 bg-black/50 hover:bg-red-500 rounded-full text-white opacity-0 group-hover/att:opacity-100 transition-opacity"
                    title={t('common.delete')}><X className="w-2.5 h-2.5" /></button>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* Drag and drop zone */}
      <div
        className={`border-2 border-dashed rounded-lg p-3 text-center cursor-pointer transition-colors ${
          dragActive ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/40'
        }`}
        onDragEnter={e => { e.preventDefault(); setDragActive(true) }}
        onDragLeave={e => { e.preventDefault(); setDragActive(false) }}
        onDragOver={e => e.preventDefault()}
        onDrop={handleDrop}
      >
        <Upload className={`w-4 h-4 text-text-tertiary mx-auto mb-1 ${uploading ? 'animate-pulse' : ''}`} />
        <p className="text-[11px] text-text-secondary">
          {dragActive ? t('posts.dropFiles') : t('posts.dragToUpload')}
        </p>
      </div>

      <button
        type="button"
        onClick={openAssetPicker}
        className="flex items-center gap-2 px-3 py-2 text-sm text-text-secondary border border-border rounded-lg hover:bg-surface-tertiary transition-colors w-full justify-center"
      >
        <FolderOpen className="w-4 h-4" />
        {t('posts.attachFromAssets')}
      </button>

      {showAssetPicker && (
        <div className="border border-border rounded-lg p-3 bg-surface-secondary">
          <div className="flex items-center justify-between mb-2">
            <p className="text-xs font-medium text-text-secondary">{t('posts.selectAssets')}</p>
            <button onClick={() => setShowAssetPicker(false)} className="p-1 text-text-tertiary hover:text-text-primary">
              <X className="w-3.5 h-3.5" />
            </button>
          </div>
          <input
            type="text"
            value={assetSearch}
            onChange={e => setAssetSearch(e.target.value)}
            placeholder={t('common.search')}
            className="w-full px-3 py-1.5 text-xs border border-border rounded-lg mb-2 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
          />
          <div className="grid grid-cols-4 gap-2 max-h-48 overflow-y-auto">
            {availableAssets
              .filter(a => !assetSearch || (a.original_name || a.filename || '').toLowerCase().includes(assetSearch.toLowerCase()))
              .map(asset => {
                const isImage = asset.mime_type?.startsWith('image/')
                const assetUrl = `/api/uploads/${asset.filename}`
                const name = asset.original_name || asset.filename
                return (
                  <button
                    key={asset.id || asset._id}
                    onClick={() => handleAttachAsset(asset.id || asset._id)}
                    className="block w-full border border-border rounded-lg overflow-hidden bg-surface hover:border-brand-primary hover:ring-2 hover:ring-brand-primary/20 transition-all text-start"
                  >
                    <div className="aspect-square relative">
                      {isImage ? (
                        <img src={assetUrl} alt={name} className="absolute inset-0 w-full h-full object-cover" />
                      ) : (
                        <div className="absolute inset-0 flex items-center justify-center bg-surface-tertiary">
                          <FileText className="w-6 h-6 text-text-tertiary" />
                        </div>
                      )}
                    </div>
                    <div className="px-1.5 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">{name}</div>
                  </button>
                )
              })}
          </div>
          {availableAssets.filter(a => !assetSearch || (a.original_name || a.filename || '').toLowerCase().includes(assetSearch.toLowerCase())).length === 0 && (
            <p className="text-xs text-text-tertiary text-center py-4">{t('posts.noAssetsFound')}</p>
          )}
        </div>
      )}
    </div>
  )
}