import { useState, useEffect, useRef } from 'react'
import { X, Trash2, Upload, FileText, Link2, ExternalLink, FolderOpen, Image as ImageIcon, Music, Film, Send, CheckCircle2, XCircle, Copy, Check } from 'lucide-react'
import { useLanguage } from '../i18n/LanguageContext'
import { api, PLATFORMS, getBrandColor } from '../utils/api'
import ApproverMultiSelect from './ApproverMultiSelect'
import CommentsSection from './CommentsSection'
import Modal from './Modal'
import SlidePanel from './SlidePanel'
import CollapsibleSection from './CollapsibleSection'
import { useToast } from './ToastContainer'

export default function PostDetailPanel({ post, onClose, onSave, onDelete, brands, teamMembers, campaigns }) {
  const { t, lang } = useLanguage()
  const toast = useToast()
  const imageInputRef = useRef(null)
  const audioInputRef = useRef(null)
  const videoInputRef = useRef(null)
  const [form, setForm] = useState({})
  const [dirty, setDirty] = useState(false)
  const [saving, setSaving] = useState(false)
  const [publishError, setPublishError] = useState('')
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)

  // Review state
  const [submittingReview, setSubmittingReview] = useState(false)
  const [copied, setCopied] = useState(false)

  // Attachments state
  const [attachments, setAttachments] = useState([])
  const [uploading, setUploading] = useState(false)
  const [dragActive, setDragActive] = useState(false)
  const [showAssetPicker, setShowAssetPicker] = useState(false)
  const [availableAssets, setAvailableAssets] = useState([])
  const [assetSearch, setAssetSearch] = useState('')

  const postId = post?._id || post?.id
  const isCreateMode = !postId
  const reviewUrl = post?.approval_token ? `${window.location.origin}/review-post/${post.approval_token}` : ''

  useEffect(() => {
    if (post) {
      setForm({
        title: post.title || '',
        description: post.description || '',
        brand_id: post.brandId || post.brand_id || '',
        platforms: post.platforms || (post.platform ? [post.platform] : []),
        status: post.status || 'draft',
        assigned_to: post.assignedTo || post.assigned_to || '',
        scheduled_date: post.scheduledDate ? new Date(post.scheduledDate).toISOString().slice(0, 10) : (post.scheduled_date ? new Date(post.scheduled_date).toISOString().slice(0, 10) : ''),
        notes: post.notes || '',
        campaign_id: post.campaignId || post.campaign_id || '',
        publication_links: post.publication_links || post.publicationLinks || [],
        approver_ids: post.approvers?.map(a => String(a.id)) || (post.approver_ids ? post.approver_ids.split(',').map(s => s.trim()).filter(Boolean) : []),
      })
      setDirty(isCreateMode)
      setPublishError('')
      if (!isCreateMode) loadAttachments()
    }
  }, [post])

  if (!post) return null

  const statusOptions = [
    { value: 'draft', label: t('posts.status.draft') },
    { value: 'in_review', label: t('posts.status.in_review') },
    { value: 'approved', label: t('posts.status.approved') },
    { value: 'rejected', label: t('posts.status.rejected') },
    { value: 'scheduled', label: t('posts.status.scheduled') },
    { value: 'published', label: t('posts.status.published') },
  ]

  const update = (field, value) => {
    setForm(f => ({ ...f, [field]: value }))
    setDirty(true)
  }

  const updatePublicationLink = (platform, url) => {
    setForm(f => {
      const links = [...(f.publication_links || [])]
      const idx = links.findIndex(l => l.platform === platform)
      if (idx >= 0) {
        links[idx] = { ...links[idx], url }
      } else {
        links.push({ platform, url })
      }
      return { ...f, publication_links: links }
    })
    setDirty(true)
  }

  const handleSave = async () => {
    setPublishError('')
    setSaving(true)
    try {
      const data = {
        title: form.title,
        description: form.description,
        brand_id: form.brand_id ? Number(form.brand_id) : null,
        assigned_to: form.assigned_to ? Number(form.assigned_to) : null,
        status: form.status,
        platforms: form.platforms || [],
        scheduled_date: form.scheduled_date || null,
        notes: form.notes,
        campaign_id: form.campaign_id ? Number(form.campaign_id) : null,
        publication_links: form.publication_links || [],
        approver_ids: (form.approver_ids || []).length > 0 ? form.approver_ids.join(',') : null,
      }

      if (data.status === 'published' && data.platforms.length > 0) {
        const missingPlatforms = data.platforms.filter(platform => {
          const link = (data.publication_links || []).find(l => l.platform === platform)
          return !link || !link.url || !link.url.trim()
        })
        if (missingPlatforms.length > 0) {
          const names = missingPlatforms.map(p => PLATFORMS[p]?.label || p).join(', ')
          setPublishError(`${t('posts.publishMissing')} ${names}`)
          setSaving(false)
          return
        }
      }

      await onSave(isCreateMode ? null : postId, data)
      setDirty(false)
      if (isCreateMode) onClose()
    } catch (err) {
      if (err.message?.includes('Cannot publish')) {
        setPublishError(err.message.replace(/.*: /, ''))
      }
    } finally {
      setSaving(false)
    }
  }

  const handleStatusAction = async (newStatus) => {
    if (!postId || saving) return
    setSaving(true)
    try {
      await onSave(postId, { ...form, status: newStatus, approver_ids: (form.approver_ids || []).length > 0 ? form.approver_ids.join(',') : null })
      setForm(f => ({ ...f, status: newStatus }))
      setDirty(false)
    } finally {
      setSaving(false)
    }
  }

  const handleSubmitReview = async () => {
    if (!postId || submittingReview) return
    // Save pending changes first
    if (dirty) await handleSave()
    setSubmittingReview(true)
    try {
      await api.post(`/posts/${postId}/submit-review`)
      setForm(f => ({ ...f, status: 'in_review' }))
      toast.success(t('posts.submittedForReview'))
      onSave(postId, {}) // reload parent
    } catch (err) {
      toast.error(err.message || t('posts.failedSubmitReview'))
    } finally {
      setSubmittingReview(false)
    }
  }

  const copyReviewLink = () => {
    navigator.clipboard.writeText(reviewUrl)
    setCopied(true)
    toast.success(t('posts.reviewLinkCopied'))
    setTimeout(() => setCopied(false), 2000)
  }

  const confirmDelete = async () => {
    setShowDeleteConfirm(false)
    await onDelete(postId)
    onClose()
  }

  // ─── Attachments ──────────────────────────────
  async function loadAttachments() {
    if (!postId) return
    try {
      const data = await api.get(`/posts/${postId}/attachments`)
      setAttachments(Array.isArray(data) ? data : [])
    } catch {
      setAttachments([])
    }
  }

  const handleFileUpload = async (files) => {
    if (!postId || !files?.length) return
    setUploading(true)
    for (const file of files) {
      const fd = new FormData()
      fd.append('file', file)
      try {
        await api.upload(`/posts/${postId}/attachments`, fd)
      } catch (err) {
        console.error('Upload failed:', err)
      }
    }
    setUploading(false)
    loadAttachments()
  }

  const handleDeleteAttachment = async (attId) => {
    try {
      await api.delete(`/attachments/${attId}`)
      loadAttachments()
    } catch (err) {
      console.error('Delete attachment failed:', err)
    }
  }

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

  const handleAttachAsset = async (assetId) => {
    if (!postId) return
    try {
      await api.post(`/posts/${postId}/attachments/from-asset`, { asset_id: assetId })
      loadAttachments()
      setShowAssetPicker(false)
    } catch (err) {
      console.error('Attach asset failed:', err)
    }
  }

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

  const brandName = (() => {
    if (form.brand_id) {
      const b = brands?.find(b => String(b._id || b.id) === String(form.brand_id))
      return b ? (lang === 'ar' && b.name_ar ? b.name_ar : b.name) : null
    }
    return post.brand_name || post.brandName || null
  })()

  const header = (
    <div className="px-5 py-4 border-b border-border shrink-0">
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <input
            type="text"
            value={form.title}
            onChange={e => update('title', e.target.value)}
            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
            placeholder={t('posts.postTitlePlaceholder')}
          />
          <div className="flex items-center gap-2 mt-2">
            <span className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${
              form.status === 'published' ? 'bg-emerald-100 text-emerald-700' :
              form.status === 'scheduled' ? 'bg-purple-100 text-purple-700' :
              form.status === 'approved' ? 'bg-blue-100 text-blue-700' :
              form.status === 'in_review' ? 'bg-amber-100 text-amber-700' :
              form.status === 'rejected' ? 'bg-red-100 text-red-700' :
              'bg-gray-100 text-gray-600'
            }`}>
              {statusOptions.find(s => s.value === form.status)?.label}
            </span>
            {brandName && (
              <span className={`text-[10px] px-1.5 py-0.5 rounded ${getBrandColor(brandName).bg} ${getBrandColor(brandName).text}`}>
                {brandName}
              </span>
            )}
            {post.creator_user_name && (
              <span className="text-[11px] text-text-secondary font-medium">
                {t('review.createdBy')} <strong className="text-text-primary">{post.creator_user_name}</strong>
              </span>
            )}
          </div>
        </div>
        <button
          onClick={onClose}
          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
        >
          <X className="w-5 h-5" />
        </button>
      </div>
    </div>
  )

  return (
    <>
      <SlidePanel onClose={onClose} maxWidth="520px" header={header} footer={
        <div className="bg-surface border-t border-border px-5 py-3 flex items-center gap-2 shrink-0">
          {dirty ? (
            <>
              <button
                onClick={handleSave}
                disabled={!form.title || saving}
                className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
              >
                {isCreateMode ? t('posts.createPost') : t('posts.saveChanges')}
              </button>
              {!isCreateMode && (
                <button
                  onClick={onClose}
                  className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg transition-colors"
                >
                  {t('common.cancel')}
                </button>
              )}
            </>
          ) : (
            <button
              onClick={onClose}
              className="flex-1 px-4 py-2 text-sm font-medium text-text-secondary border border-border rounded-lg hover:bg-surface-tertiary transition-colors"
            >
              {t('common.close')}
            </button>
          )}
          {onDelete && !isCreateMode && (
            <button
              onClick={() => setShowDeleteConfirm(true)}
              className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
              title={t('common.delete')}
            >
              <Trash2 className="w-4 h-4" />
            </button>
          )}
        </div>
      }>
        {/* Content Section */}
        <CollapsibleSection title={t('posts.content')}>
          <div className="px-5 pb-4 space-y-3">
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.description')}</label>
              <textarea
                value={form.description}
                onChange={e => update('description', e.target.value)}
                rows={3}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
                placeholder={t('posts.postDescPlaceholder')}
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.brand')}</label>
                <select
                  value={form.brand_id}
                  onChange={e => update('brand_id', e.target.value)}
                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                >
                  <option value="">{t('posts.selectBrand')}</option>
                  {(brands || []).map(b => <option key={b._id || b.id} value={b._id || b.id}>{b.icon} {lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.campaign')}</label>
                <select
                  value={form.campaign_id}
                  onChange={e => update('campaign_id', e.target.value)}
                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                >
                  <option value="">{t('posts.noCampaign')}</option>
                  {(campaigns || []).map(c => <option key={c._id || c.id} value={c._id || c.id}>{c.name}</option>)}
                </select>
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.notes')}</label>
              <input
                type="text"
                value={form.notes}
                onChange={e => update('notes', e.target.value)}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                placeholder={t('posts.additionalNotes')}
              />
            </div>
          </div>
        </CollapsibleSection>

        {/* Scheduling & Assignment Section */}
        <CollapsibleSection title={t('posts.scheduling')}>
          <div className="px-5 pb-4 space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.status')}</label>
                <select
                  value={form.status}
                  onChange={e => update('status', e.target.value)}
                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                >
                  {statusOptions.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.scheduledDate')}</label>
                <input
                  type="date"
                  value={form.scheduled_date}
                  onChange={e => update('scheduled_date', e.target.value)}
                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.assignTo')}</label>
              <select
                value={form.assigned_to}
                onChange={e => update('assigned_to', e.target.value)}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
              >
                <option value="">{t('common.unassigned')}</option>
                {(teamMembers || []).map(m => <option key={m._id || m.id} value={m._id || m.id}>{m.name}</option>)}
              </select>
            </div>

            {publishError && (
              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
                {publishError}
              </div>
            )}
          </div>
        </CollapsibleSection>

        {/* Approval Section */}
        <CollapsibleSection title={t('posts.approval')}>
          <div className="px-5 pb-4 space-y-3">
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.approvers')}</label>
              <ApproverMultiSelect
                users={teamMembers || []}
                selected={form.approver_ids || []}
                onChange={ids => update('approver_ids', ids)}
              />
            </div>

            {!isCreateMode && (
              <>
                {/* Submit for Review */}
                {!reviewUrl && (
                  <button
                    onClick={handleSubmitReview}
                    disabled={submittingReview}
                    className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors font-medium text-sm disabled:opacity-50"
                  >
                    <Send className="w-4 h-4" />
                    {submittingReview ? t('posts.submitting') : t('posts.sendToReview')}
                  </button>
                )}

                {/* Review Link */}
                {reviewUrl && (
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                    <div className="text-xs font-semibold text-blue-900 mb-2">{t('posts.reviewLinkTitle')}</div>
                    <div className="flex items-center gap-2">
                      <input type="text" value={reviewUrl} readOnly className="flex-1 px-3 py-1.5 text-xs bg-white border border-border rounded" />
                      <button onClick={copyReviewLink} className="p-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                        {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                      </button>
                    </div>
                  </div>
                )}

                {/* Waiting for review */}
                {form.status === 'in_review' && (
                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-center">
                    <p className="text-sm font-medium text-amber-800">{t('posts.awaitingReview')}</p>
                    <p className="text-xs text-amber-600 mt-1">{t('posts.awaitingReviewDesc')}</p>
                  </div>
                )}

                {/* Approved info */}
                {form.status === 'approved' && post.approved_by_name && (
                  <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                      <span className="text-sm font-medium text-emerald-800">{t('posts.approvedBy')} {post.approved_by_name}</span>
                    </div>
                    {post.feedback && <p className="text-xs text-emerald-700 mt-1">{post.feedback}</p>}
                  </div>
                )}

                {/* Rejected info */}
                {form.status === 'rejected' && post.approved_by_name && (
                  <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <XCircle className="w-4 h-4 text-red-600" />
                      <span className="text-sm font-medium text-red-800">{t('posts.rejectedBy')} {post.approved_by_name}</span>
                    </div>
                    {post.feedback && <p className="text-xs text-red-700 mt-1">{post.feedback}</p>}
                  </div>
                )}

                {/* Schedule button after approval */}
                {form.status === 'approved' && (
                  <button
                    onClick={() => handleStatusAction('scheduled')}
                    disabled={saving}
                    className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium text-sm disabled:opacity-50"
                  >
                    {t('posts.schedule')}
                  </button>
                )}
              </>
            )}
          </div>
        </CollapsibleSection>

        {/* Platforms & Links Section */}
        <CollapsibleSection title={t('posts.platformsLinks')}>
          <div className="px-5 pb-4 space-y-3">
            <div>
              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.platforms')}</label>
              <div className="flex flex-wrap gap-2 p-2 border border-border rounded-lg bg-white min-h-[38px]">
                {Object.entries(PLATFORMS).map(([k, v]) => {
                  const checked = (form.platforms || []).includes(k)
                  return (
                    <label
                      key={k}
                      className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full cursor-pointer border transition-colors ${
                        checked
                          ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary font-medium'
                          : 'bg-surface-tertiary border-transparent text-text-secondary hover:bg-surface-tertiary/80'
                      }`}
                    >
                      <input
                        type="checkbox"
                        checked={checked}
                        onChange={() => {
                          update('platforms', checked
                            ? form.platforms.filter(p => p !== k)
                            : [...(form.platforms || []), k]
                          )
                        }}
                        className="sr-only"
                      />
                      {v.label}
                    </label>
                  )
                })}
              </div>
            </div>

            {(form.platforms || []).length > 0 && (
              <div className="space-y-2 border border-border rounded-lg p-3 bg-surface-secondary">
                <div className="flex items-center gap-1.5 text-xs font-medium text-text-secondary mb-1">
                  <Link2 className="w-3.5 h-3.5" />
                  {t('posts.publicationLinks')}
                </div>
                {(form.platforms || []).map(platformKey => {
                  const platformInfo = PLATFORMS[platformKey] || { label: platformKey }
                  const existingLink = (form.publication_links || []).find(l => l.platform === platformKey)
                  const linkUrl = existingLink?.url || ''
                  return (
                    <div key={platformKey} className="flex items-center gap-2">
                      <span className="text-xs font-medium text-text-secondary w-24 shrink-0 flex items-center gap-1.5">
                        <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: platformInfo.color || '#888' }} />
                        {platformInfo.label}
                      </span>
                      <input
                        type="url"
                        value={linkUrl}
                        onChange={e => updatePublicationLink(platformKey, e.target.value)}
                        className="flex-1 px-3 py-1.5 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                        placeholder="https://..."
                      />
                      {linkUrl && (
                        <a href={linkUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 text-text-tertiary hover:text-brand-primary">
                          <ExternalLink className="w-3.5 h-3.5" />
                        </a>
                      )}
                    </div>
                  )
                })}
                {form.status === 'published' && (form.platforms || []).some(p => {
                  const link = (form.publication_links || []).find(l => l.platform === p)
                  return !link || !link.url?.trim()
                }) && (
                  <p className="text-xs text-amber-600 mt-1">{t('posts.publishRequired')}</p>
                )}
              </div>
            )}
          </div>
        </CollapsibleSection>

        {/* Attachments Section (hidden in create mode) */}
        {!isCreateMode && (
          <CollapsibleSection
            title={t('posts.attachments')}
            badge={attachments.length > 0 ? (
              <span className="text-xs font-medium text-text-tertiary bg-surface-tertiary px-1.5 py-0.5 rounded-full">
                {attachments.length}
              </span>
            ) : null}
          >
            <div className="px-5 pb-4 space-y-4">
              {/* Images */}
              {(() => {
                const images = attachments.filter(a => (a.mime_type || a.mimeType || '').startsWith('image/'))
                return (
                  <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 => { handleFileUpload(e.target.files); e.target.value = '' }} />
                      </label>
                    </div>
                    {images.length > 0 && (
                      <div className="grid grid-cols-2 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-white">
                              <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={() => handleDeleteAttachment(attId)}
                                  className="absolute top-1 right-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 */}
              {(() => {
                const audio = attachments.filter(a => (a.mime_type || a.mimeType || '').startsWith('audio/'))
                return (
                  <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">
                        <Music className="w-3.5 h-3.5" />
                        {t('posts.audio')}
                        {audio.length > 0 && <span className="text-text-tertiary">({audio.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.addAudio')}
                        <input ref={audioInputRef} type="file" multiple accept="audio/*" className="hidden"
                          onChange={e => { handleFileUpload(e.target.files); e.target.value = '' }} />
                      </label>
                    </div>
                    {audio.length > 0 && (
                      <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-white 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={() => handleDeleteAttachment(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>
                )
              })()}

              {/* Video */}
              {(() => {
                const videos = attachments.filter(a => (a.mime_type || a.mimeType || '').startsWith('video/'))
                return (
                  <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">
                        <Film className="w-3.5 h-3.5" />
                        {t('posts.videos')}
                        {videos.length > 0 && <span className="text-text-tertiary">({videos.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.addVideo')}
                        <input ref={videoInputRef} type="file" multiple accept="video/*" className="hidden"
                          onChange={e => { handleFileUpload(e.target.files); e.target.value = '' }} />
                      </label>
                    </div>
                    {videos.length > 0 && (
                      <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-white 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={() => handleDeleteAttachment(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 */}
              {(() => {
                const others = attachments.filter(a => {
                  const mime = a.mime_type || a.mimeType || ''
                  return !mime.startsWith('image/') && !mime.startsWith('audio/') && !mime.startsWith('video/')
                })
                return 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-2 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-white">
                            <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={() => handleDeleteAttachment(attId)}
                              className="absolute top-1 right-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>
                ) : null
              })()}

              {/* 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-3 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-white hover:border-brand-primary hover:ring-2 hover:ring-brand-primary/20 transition-all text-left"
                          >
                            <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>
          </CollapsibleSection>
        )}

        {/* Discussion Section (hidden in create mode) */}
        {!isCreateMode && (
          <CollapsibleSection title={t('posts.discussion')} noBorder>
            <div className="px-5 pb-5">
              <CommentsSection entityType="post" entityId={postId} />
            </div>
          </CollapsibleSection>
        )}
      </SlidePanel>

      <Modal
        isOpen={showDeleteConfirm}
        onClose={() => setShowDeleteConfirm(false)}
        title={t('posts.deletePost')}
        isConfirm
        danger
        confirmText={t('posts.deletePost')}
        onConfirm={confirmDelete}
      >
        {t('posts.deleteConfirm')}
      </Modal>
    </>
  )
}
