import { useState, useEffect, useContext } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { ArrowLeft, Plus, Edit2, Trash2, DollarSign, Eye, MousePointer, Target, TrendingUp, FileText, Megaphone, Search, Globe, Pencil, Users, X, UserPlus, MessageCircle, Settings } from 'lucide-react'
import { format } from 'date-fns'
import { AppContext } from '../App'
import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../i18n/LanguageContext'
import { api, PLATFORMS, getInitials } from '../utils/api'
import PlatformIcon, { PlatformIcons } from '../components/PlatformIcon'
import StatusBadge from '../components/StatusBadge'
import BrandBadge from '../components/BrandBadge'
import Modal from '../components/Modal'
import BudgetBar from '../components/BudgetBar'
import CommentsSection from '../components/CommentsSection'

const TRACK_TYPES = {
  organic_social: { label: 'Organic Social', icon: Megaphone, color: 'text-green-600 bg-green-50', hasBudget: false },
  paid_social: { label: 'Paid Social', icon: DollarSign, color: 'text-blue-600 bg-blue-50', hasBudget: true },
  paid_search: { label: 'Paid Search (PPC)', icon: Search, color: 'text-amber-600 bg-amber-50', hasBudget: true },
  seo_content: { label: 'SEO / Content', icon: Globe, color: 'text-purple-600 bg-purple-50', hasBudget: false },
  production: { label: 'Production', icon: FileText, color: 'text-red-600 bg-red-50', hasBudget: true },
}

const TRACK_STATUSES = ['planned', 'active', 'paused', 'completed']

const EMPTY_TRACK = {
  name: '', type: 'organic_social', platform: '', budget_allocated: '', status: 'planned', notes: '',
}

const EMPTY_METRICS = {
  budget_spent: '', revenue: '', impressions: '', clicks: '', conversions: '', notes: '',
}

function MetricBox({ label, value, icon: Icon, color = 'text-text-primary' }) {
  return (
    <div className="text-center">
      <Icon className={`w-4 h-4 mx-auto mb-0.5 ${color}`} />
      <div className={`text-base font-bold ${color}`}>{value ?? '—'}</div>
      <div className="text-[10px] text-text-tertiary">{label}</div>
    </div>
  )
}

export default function CampaignDetail() {
  const { id } = useParams()
  const navigate = useNavigate()
  const { brands, getBrandName } = useContext(AppContext)
  const { lang } = useLanguage()
  const { permissions, user } = useAuth()
  const isSuperadmin = user?.role === 'superadmin'
  const [campaign, setCampaign] = useState(null)
  const [tracks, setTracks] = useState([])
  const [posts, setPosts] = useState([])
  const [assignments, setAssignments] = useState([])
  const [allUsers, setAllUsers] = useState([])
  const [loading, setLoading] = useState(true)
  const [showAssignModal, setShowAssignModal] = useState(false)
  const [selectedUserIds, setSelectedUserIds] = useState([])
  const canSetBudget = permissions?.canSetBudget
  const [editingBudget, setEditingBudget] = useState(false)
  const [budgetValue, setBudgetValue] = useState('')
  const [showTrackModal, setShowTrackModal] = useState(false)
  const [editingTrack, setEditingTrack] = useState(null)
  const [trackForm, setTrackForm] = useState(EMPTY_TRACK)
  const [showMetricsModal, setShowMetricsModal] = useState(false)
  const [metricsTrack, setMetricsTrack] = useState(null)
  const [metricsForm, setMetricsForm] = useState(EMPTY_METRICS)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [trackToDelete, setTrackToDelete] = useState(null)
  const [selectedPost, setSelectedPost] = useState(null)
  const [showDiscussion, setShowDiscussion] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [editForm, setEditForm] = useState({})
  const [showDeleteCampaignConfirm, setShowDeleteCampaignConfirm] = useState(false)

  const isCreator = campaign?.createdByUserId === user?.id || campaign?.created_by_user_id === user?.id
  const canManage = isSuperadmin || (permissions?.canEditCampaigns && isCreator)
  const canAssign = isSuperadmin || (permissions?.canAssignCampaigns && isCreator)

  useEffect(() => { loadAll() }, [id])

  const loadAll = async () => {
    try {
      const [campRes, tracksRes, postsRes, assignRes] = await Promise.all([
        api.get(`/campaigns/${id}`),
        api.get(`/campaigns/${id}/tracks`),
        api.get(`/campaigns/${id}/posts`),
        api.get(`/campaigns/${id}/assignments`),
      ])
      setCampaign(campRes.data || campRes || null)
      setTracks(tracksRes.data || tracksRes || [])
      setPosts(postsRes.data || postsRes || [])
      setAssignments(Array.isArray(assignRes) ? assignRes : (assignRes.data || []))
    } catch (err) {
      console.error('Failed to load campaign:', err)
    } finally {
      setLoading(false)
    }
  }

  const loadUsersForAssign = async () => {
    try {
      const users = await api.get('/users/team?all=true')
      setAllUsers(Array.isArray(users) ? users : (users.data || []))
    } catch (err) {
      console.error('Failed to load users:', err)
    }
  }

  const openAssignModal = () => {
    loadUsersForAssign()
    setSelectedUserIds(assignments.map(a => a.user_id))
    setShowAssignModal(true)
  }

  const saveAssignments = async () => {
    try {
      const currentIds = assignments.map(a => a.user_id)
      const toAdd = selectedUserIds.filter(id => !currentIds.includes(id))
      const toRemove = currentIds.filter(id => !selectedUserIds.includes(id))

      if (toAdd.length > 0) {
        await api.post(`/campaigns/${id}/assignments`, { user_ids: toAdd })
      }
      for (const uid of toRemove) {
        await api.delete(`/campaigns/${id}/assignments/${uid}`)
      }
      setShowAssignModal(false)
      loadAll()
    } catch (err) {
      console.error('Failed to save assignments:', err)
    }
  }

  const removeAssignment = async (userId) => {
    try {
      await api.delete(`/campaigns/${id}/assignments/${userId}`)
      loadAll()
    } catch (err) {
      console.error('Failed to remove assignment:', err)
    }
  }

  const saveTrack = async () => {
    try {
      const data = {
        name: trackForm.name,
        type: trackForm.type,
        platform: trackForm.platform || null,
        budget_allocated: trackForm.budget_allocated ? Number(trackForm.budget_allocated) : 0,
        status: trackForm.status,
        notes: trackForm.notes,
      }
      if (editingTrack) {
        await api.patch(`/tracks/${editingTrack.id}`, data)
      } else {
        await api.post(`/campaigns/${id}/tracks`, data)
      }
      setShowTrackModal(false)
      setEditingTrack(null)
      setTrackForm(EMPTY_TRACK)
      loadAll()
    } catch (err) {
      console.error('Save track failed:', err)
    }
  }

  const deleteTrack = async (trackId) => {
    setTrackToDelete(trackId)
    setShowDeleteConfirm(true)
  }

  const confirmDeleteTrack = async () => {
    if (!trackToDelete) return
    await api.delete(`/tracks/${trackToDelete}`)
    setTrackToDelete(null)
    loadAll()
  }

  const saveMetrics = async () => {
    try {
      await api.patch(`/tracks/${metricsTrack.id}`, {
        budget_spent: metricsForm.budget_spent ? Number(metricsForm.budget_spent) : 0,
        revenue: metricsForm.revenue ? Number(metricsForm.revenue) : 0,
        impressions: metricsForm.impressions ? Number(metricsForm.impressions) : 0,
        clicks: metricsForm.clicks ? Number(metricsForm.clicks) : 0,
        conversions: metricsForm.conversions ? Number(metricsForm.conversions) : 0,
        notes: metricsForm.notes || '',
      })
      setShowMetricsModal(false)
      setMetricsTrack(null)
      loadAll()
    } catch (err) {
      console.error('Save metrics failed:', err)
    }
  }

  const openEditTrack = (track) => {
    setEditingTrack(track)
    setTrackForm({
      name: track.name || '',
      type: track.type || 'organic_social',
      platform: track.platform || '',
      budget_allocated: track.budget_allocated || '',
      status: track.status || 'planned',
      notes: track.notes || '',
    })
    setShowTrackModal(true)
  }

  const openEditCampaign = () => {
    setEditForm({
      name: campaign.name || '',
      description: campaign.description || '',
      status: campaign.status || 'planning',
      start_date: campaign.start_date ? new Date(campaign.start_date).toISOString().slice(0, 10) : '',
      end_date: campaign.end_date ? new Date(campaign.end_date).toISOString().slice(0, 10) : '',
      goals: campaign.goals || '',
      platforms: campaign.platforms || [],
      notes: campaign.notes || '',
      brand_id: campaign.brand_id || '',
      budget: campaign.budget || '',
    })
    setShowEditModal(true)
  }

  const saveCampaignEdit = async () => {
    try {
      await api.patch(`/campaigns/${id}`, {
        name: editForm.name,
        description: editForm.description,
        status: editForm.status,
        start_date: editForm.start_date,
        end_date: editForm.end_date,
        goals: editForm.goals,
        platforms: editForm.platforms,
        notes: editForm.notes,
        brand_id: editForm.brand_id || null,
        budget: editForm.budget ? Number(editForm.budget) : null,
      })
      setShowEditModal(false)
      loadAll()
    } catch (err) {
      console.error('Failed to update campaign:', err)
    }
  }

  const openMetrics = (track) => {
    setMetricsTrack(track)
    setMetricsForm({
      budget_spent: track.budget_spent || '',
      revenue: track.revenue || '',
      impressions: track.impressions || '',
      clicks: track.clicks || '',
      conversions: track.conversions || '',
      notes: track.notes || '',
    })
    setShowMetricsModal(true)
  }

  if (loading) {
    return <div className="animate-pulse"><div className="h-64 bg-surface-tertiary rounded-xl"></div></div>
  }

  if (!campaign) {
    return (
      <div className="text-center py-12 text-text-tertiary">
        Campaign not found. <button onClick={() => navigate('/campaigns')} className="text-brand-primary underline">Go back</button>
      </div>
    )
  }

  // Aggregates from tracks
  const totalAllocated = tracks.reduce((s, t) => s + (t.budget_allocated || 0), 0)
  const totalSpent = tracks.reduce((s, t) => s + (t.budget_spent || 0), 0)
  const totalImpressions = tracks.reduce((s, t) => s + (t.impressions || 0), 0)
  const totalClicks = tracks.reduce((s, t) => s + (t.clicks || 0), 0)
  const totalConversions = tracks.reduce((s, t) => s + (t.conversions || 0), 0)
  const totalRevenue = tracks.reduce((s, t) => s + (t.revenue || 0), 0)

  return (
    <div className="flex gap-6 animate-fade-in">
      {/* Main content */}
      <div className={`space-y-6 min-w-0 ${showDiscussion ? 'flex-1' : 'w-full'}`}>
      {/* Header */}
      <div className="flex items-start gap-4">
        <button onClick={() => navigate('/campaigns')} className="mt-1 p-1.5 hover:bg-surface-tertiary rounded-lg">
          <ArrowLeft className="w-5 h-5 text-text-secondary" />
        </button>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-3 mb-1">
            <h1 className="text-xl font-bold text-text-primary">{campaign.name}</h1>
            <StatusBadge status={campaign.status} />
            {(campaign.brand_id || campaign.brand_name) && <BrandBadge brand={getBrandName(campaign.brand_id) || campaign.brand_name} />}
          </div>
          {campaign.description && <p className="text-sm text-text-secondary">{campaign.description}</p>}
          <div className="flex items-center gap-3 mt-2 text-xs text-text-tertiary">
            {campaign.start_date && campaign.end_date && (
              <span>{format(new Date(campaign.start_date), 'MMM d')} – {format(new Date(campaign.end_date), 'MMM d, yyyy')}</span>
            )}
            <span>
              Budget: {campaign.budget > 0 ? `${campaign.budget.toLocaleString()} SAR` : 'Not set'}
            </span>
            {campaign.platforms && campaign.platforms.length > 0 && (
              <PlatformIcons platforms={campaign.platforms} size={16} />
            )}
          </div>
        </div>
        {/* Action buttons */}
        <div className="flex items-center gap-2 shrink-0">
          <button
            onClick={() => setShowDiscussion(prev => !prev)}
            className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
              showDiscussion
                ? 'bg-brand-primary text-white shadow-sm'
                : 'bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/80 hover:text-text-primary'
            }`}
          >
            <MessageCircle className="w-4 h-4" />
            Discussion
          </button>
          {canSetBudget && (
            <button
              onClick={() => { setBudgetValue(campaign.budget || ''); setEditingBudget(true) }}
              className="flex items-center gap-1.5 px-3 py-2 bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/80 hover:text-text-primary rounded-lg text-sm font-medium transition-colors"
            >
              <DollarSign className="w-4 h-4" />
              Budget
            </button>
          )}
          {canManage && (
            <button
              onClick={openEditCampaign}
              className="flex items-center gap-1.5 px-3 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm transition-colors"
            >
              <Settings className="w-4 h-4" />
              Edit
            </button>
          )}
        </div>
      </div>

      {/* Assigned Team */}
      <div className="bg-white rounded-xl border border-border p-5">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-xs uppercase tracking-wider text-text-tertiary font-medium flex items-center gap-1.5">
            <Users className="w-3.5 h-3.5" /> Assigned Team
          </h3>
          {canAssign && (
            <button
              onClick={openAssignModal}
              className="flex items-center gap-1.5 px-3 py-1.5 bg-brand-primary text-white rounded-lg text-xs font-medium hover:bg-brand-primary-light"
            >
              <UserPlus className="w-3.5 h-3.5" /> Assign Members
            </button>
          )}
        </div>
        {assignments.length === 0 ? (
          <p className="text-xs text-text-tertiary py-2">No team members assigned yet.</p>
        ) : (
          <div className="flex flex-wrap gap-2">
            {assignments.map(a => (
              <div key={a.user_id} className="flex items-center gap-2 bg-surface-secondary rounded-full pl-1 pr-2 py-1">
                <div className="w-6 h-6 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-bold shrink-0">
                  {a.user_avatar ? (
                    <img src={a.user_avatar} className="w-full h-full rounded-full object-cover" alt="" />
                  ) : (
                    getInitials(a.user_name)
                  )}
                </div>
                <span className="text-xs font-medium text-text-primary">{a.user_name}</span>
                {canAssign && (
                  <button
                    onClick={() => removeAssignment(a.user_id)}
                    className="p-0.5 rounded-full hover:bg-red-100 text-text-tertiary hover:text-red-500"
                  >
                    <X className="w-3 h-3" />
                  </button>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Aggregate Metrics */}
      {tracks.length > 0 && (
        <div className="bg-white rounded-xl border border-border p-5">
          <h3 className="text-xs uppercase tracking-wider text-text-tertiary font-medium mb-4">Campaign Totals (from tracks)</h3>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
            <MetricBox icon={DollarSign} label="Allocated" value={`${totalAllocated.toLocaleString()}`} color="text-blue-600" />
            <MetricBox icon={TrendingUp} label="Spent" value={`${totalSpent.toLocaleString()}`} color="text-amber-600" />
            <MetricBox icon={Eye} label="Impressions" value={totalImpressions.toLocaleString()} color="text-purple-600" />
            <MetricBox icon={MousePointer} label="Clicks" value={totalClicks.toLocaleString()} color="text-green-600" />
            <MetricBox icon={Target} label="Conversions" value={totalConversions.toLocaleString()} color="text-red-600" />
            <MetricBox icon={DollarSign} label="Revenue" value={`${totalRevenue.toLocaleString()}`} color="text-emerald-600" />
          </div>
          {totalAllocated > 0 && (
            <div className="mt-4">
              <BudgetBar budget={totalAllocated} spent={totalSpent} height="h-2" />
            </div>
          )}
        </div>
      )}

      {/* Tracks */}
      <div className="bg-white rounded-xl border border-border overflow-hidden">
        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
          <h3 className="font-semibold text-text-primary">Tracks</h3>
          {canManage && (
            <button
              onClick={() => { setEditingTrack(null); setTrackForm(EMPTY_TRACK); setShowTrackModal(true) }}
              className="flex items-center gap-1.5 px-3 py-1.5 bg-brand-primary text-white rounded-lg text-xs font-medium hover:bg-brand-primary-light"
            >
              <Plus className="w-3.5 h-3.5" /> Add Track
            </button>
          )}
        </div>

        {tracks.length === 0 ? (
          <div className="py-12 text-center text-sm text-text-tertiary">
            No tracks yet. Add organic, paid, or SEO tracks to organize this campaign.
          </div>
        ) : (
          <div className="divide-y divide-border-light">
            {tracks.map(track => {
              const typeInfo = TRACK_TYPES[track.type] || TRACK_TYPES.organic_social
              const TypeIcon = typeInfo.icon
              const trackPosts = posts.filter(p => p.track_id === track.id)
              return (
                <div key={track.id} className="px-5 py-4">
                  <div className="flex items-start gap-3">
                    <div className={`p-2 rounded-lg ${typeInfo.color}`}>
                      <TypeIcon className="w-4 h-4" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-0.5">
                        <h4 className="text-sm font-semibold text-text-primary">
                          {track.name || typeInfo.label}
                        </h4>
                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-tertiary">
                          {typeInfo.label}
                        </span>
                        {track.platform && (
                          <PlatformIcon platform={track.platform} size={16} />
                        )}
                        <StatusBadge status={track.status} size="xs" />
                      </div>

                      {/* Budget bar for paid tracks */}
                      {track.budget_allocated > 0 && (
                        <div className="w-48 mt-1.5">
                          <BudgetBar budget={track.budget_allocated} spent={track.budget_spent || 0} height="h-2" />
                        </div>
                      )}

                      {/* Quick metrics */}
                      {(track.impressions > 0 || track.clicks > 0 || track.conversions > 0) && (
                        <div className="flex items-center gap-3 mt-1.5 text-[10px] text-text-tertiary">
                          {track.impressions > 0 && <span>👁 {track.impressions.toLocaleString()}</span>}
                          {track.clicks > 0 && <span>🖱 {track.clicks.toLocaleString()}</span>}
                          {track.conversions > 0 && <span>🎯 {track.conversions.toLocaleString()}</span>}
                          {track.clicks > 0 && track.budget_spent > 0 && (
                            <span>CPC: {(track.budget_spent / track.clicks).toFixed(2)} SAR</span>
                          )}
                          {track.impressions > 0 && track.clicks > 0 && (
                            <span>CTR: {(track.clicks / track.impressions * 100).toFixed(2)}%</span>
                          )}
                        </div>
                      )}

                      {/* Linked posts count */}
                      {trackPosts.length > 0 && (
                        <div className="text-[10px] text-text-tertiary mt-1">
                          📝 {trackPosts.length} post{trackPosts.length !== 1 ? 's' : ''} linked
                        </div>
                      )}

                      {track.notes && (
                        <p className="text-xs text-text-secondary mt-1 line-clamp-1">{track.notes}</p>
                      )}
                    </div>

                    {/* Actions */}
                    {canManage && (
                      <div className="flex items-center gap-1 shrink-0">
                        <button
                          onClick={() => openMetrics(track)}
                          title="Update metrics"
                          className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-brand-primary"
                        >
                          <TrendingUp className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => openEditTrack(track)}
                          title="Edit track"
                          className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-text-primary"
                        >
                          <Edit2 className="w-4 h-4" />
                        </button>
                        <button
                          onClick={() => deleteTrack(track.id)}
                          title="Delete track"
                          className="p-1.5 hover:bg-red-50 rounded-lg text-text-tertiary hover:text-red-500"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* Linked Posts */}
      {posts.length > 0 && (
        <div className="bg-white rounded-xl border border-border overflow-hidden">
          <div className="px-5 py-4 border-b border-border">
            <h3 className="font-semibold text-text-primary">Linked Posts ({posts.length})</h3>
          </div>
          <div className="divide-y divide-border-light">
            {posts.map(post => (
              <div
                key={post.id}
                onClick={() => setSelectedPost(post)}
                className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary cursor-pointer transition-colors"
              >
                {post.thumbnail_url && (
                  <img src={post.thumbnail_url} alt="" className="w-10 h-10 rounded-lg object-cover shrink-0" />
                )}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <h4 className="text-sm font-medium text-text-primary">{post.title}</h4>
                    <StatusBadge status={post.status} size="xs" />
                  </div>
                  <div className="flex items-center gap-2 mt-0.5 text-[10px] text-text-tertiary">
                    {post.track_name && <span className="px-1.5 py-0.5 rounded bg-surface-tertiary">{post.track_name}</span>}
                    {post.brand_name && <BrandBadge brand={post.brand_name} />}
                    {post.assigned_name && <span>→ {post.assigned_name}</span>}
                    {post.platforms && post.platforms.length > 0 && (
                      <PlatformIcons platforms={post.platforms} size={14} />
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      </div>{/* end main content */}

      {/* ─── DISCUSSION SIDEBAR ─── */}
      {showDiscussion && (
        <div className="w-[340px] shrink-0 bg-white rounded-xl border border-border flex flex-col self-start sticky top-4" style={{ maxHeight: 'calc(100vh - 6rem)' }}>
          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
            <h3 className="text-sm font-semibold text-text-primary flex items-center gap-1.5">
              <MessageCircle className="w-4 h-4" />
              Discussion
            </h3>
            <button onClick={() => setShowDiscussion(false)} className="p-1 hover:bg-surface-tertiary rounded-lg text-text-tertiary">
              <X className="w-4 h-4" />
            </button>
          </div>
          <div className="flex-1 overflow-y-auto p-4">
            <CommentsSection entityType="campaign" entityId={Number(id)} />
          </div>
        </div>
      )}

      {/* Add/Edit Track Modal */}
      <Modal
        isOpen={showTrackModal}
        onClose={() => { setShowTrackModal(false); setEditingTrack(null) }}
        title={editingTrack ? 'Edit Track' : 'Add Track'}
      >
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Track Name</label>
            <input
              type="text"
              value={trackForm.name}
              onChange={e => setTrackForm(f => ({ ...f, name: 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="e.g., Instagram Paid Ads, Organic Wave, Google Search..."
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Type</label>
              <select
                value={trackForm.type}
                onChange={e => setTrackForm(f => ({ ...f, type: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              >
                {Object.entries(TRACK_TYPES).map(([k, v]) => (
                  <option key={k} value={k}>{v.label}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Platform</label>
              <select
                value={trackForm.platform}
                onChange={e => setTrackForm(f => ({ ...f, platform: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              >
                <option value="">All / Multiple</option>
                {Object.entries(PLATFORMS).map(([k, v]) => (
                  <option key={k} value={k}>{v.label}</option>
                ))}
                <option value="google_ads">Google Ads</option>
              </select>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Budget Allocated (SAR)</label>
              <input
                type="number"
                value={trackForm.budget_allocated}
                onChange={e => setTrackForm(f => ({ ...f, budget_allocated: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
                placeholder="0 for free/organic"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Status</label>
              <select
                value={trackForm.status}
                onChange={e => setTrackForm(f => ({ ...f, status: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              >
                {TRACK_STATUSES.map(s => (
                  <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
                ))}
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
            <textarea
              value={trackForm.notes}
              onChange={e => setTrackForm(f => ({ ...f, notes: e.target.value }))}
              rows={2}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
              placeholder="Keywords, targeting details, content plan..."
            />
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-border">
            <button onClick={() => setShowTrackModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
            <button onClick={saveTrack} className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm">
              {editingTrack ? 'Save' : 'Add Track'}
            </button>
          </div>
        </div>
      </Modal>

      {/* Update Metrics Modal */}
      <Modal
        isOpen={showMetricsModal}
        onClose={() => { setShowMetricsModal(false); setMetricsTrack(null) }}
        title={`Update Metrics — ${metricsTrack?.name || ''}`}
      >
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Budget Spent (SAR)</label>
              <input
                type="number"
                value={metricsForm.budget_spent}
                onChange={e => setMetricsForm(f => ({ ...f, budget_spent: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Revenue (SAR)</label>
              <input
                type="number"
                value={metricsForm.revenue}
                onChange={e => setMetricsForm(f => ({ ...f, revenue: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              />
            </div>
          </div>

          <div className="grid grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Impressions</label>
              <input
                type="number"
                value={metricsForm.impressions}
                onChange={e => setMetricsForm(f => ({ ...f, impressions: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Clicks</label>
              <input
                type="number"
                value={metricsForm.clicks}
                onChange={e => setMetricsForm(f => ({ ...f, clicks: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Conversions</label>
              <input
                type="number"
                value={metricsForm.conversions}
                onChange={e => setMetricsForm(f => ({ ...f, conversions: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
            <textarea
              value={metricsForm.notes}
              onChange={e => setMetricsForm(f => ({ ...f, notes: e.target.value }))}
              rows={2}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
              placeholder="What's working, what to adjust..."
            />
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-border">
            <button onClick={() => setShowMetricsModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
            <button onClick={saveMetrics} className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm">
              Save Metrics
            </button>
          </div>
        </div>
      </Modal>

      {/* Delete Track Confirmation */}
      <Modal
        isOpen={showDeleteConfirm}
        onClose={() => { setShowDeleteConfirm(false); setTrackToDelete(null) }}
        title="Delete Track?"
        isConfirm
        danger
        confirmText="Delete Track"
        onConfirm={confirmDeleteTrack}
      >
        Are you sure you want to delete this campaign track? This action cannot be undone.
      </Modal>

      {/* Assign Members Modal */}
      <Modal
        isOpen={showAssignModal}
        onClose={() => setShowAssignModal(false)}
        title="Assign Team Members"
      >
        <div className="space-y-3 max-h-80 overflow-y-auto">
          {allUsers.map(u => {
            const checked = selectedUserIds.includes(u.id || u._id)
            return (
              <label
                key={u.id || u._id}
                className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer hover:bg-surface-secondary ${checked ? 'bg-brand-primary/5' : ''}`}
              >
                <input
                  type="checkbox"
                  checked={checked}
                  onChange={() => {
                    const uid = u.id || u._id
                    setSelectedUserIds(prev =>
                      prev.includes(uid) ? prev.filter(id => id !== uid) : [...prev, uid]
                    )
                  }}
                  className="rounded border-border text-brand-primary focus:ring-brand-primary"
                />
                <div className="w-7 h-7 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-bold shrink-0">
                  {u.avatar ? (
                    <img src={u.avatar} className="w-full h-full rounded-full object-cover" alt="" />
                  ) : (
                    getInitials(u.name)
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-text-primary">{u.name}</div>
                  {u.team_role && <div className="text-[10px] text-text-tertiary">{u.team_role}</div>}
                </div>
              </label>
            )
          })}
        </div>
        <div className="flex justify-end gap-3 pt-4 border-t border-border mt-4">
          <button onClick={() => setShowAssignModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
          <button onClick={saveAssignments} className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm">
            Save Assignments
          </button>
        </div>
      </Modal>

      {/* Budget Modal */}
      <Modal isOpen={editingBudget} onClose={() => setEditingBudget(false)} title="Set Campaign Budget" size="sm">
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Budget (SAR)</label>
            <input
              type="number"
              value={budgetValue}
              onChange={e => setBudgetValue(e.target.value)}
              autoFocus
              min="0"
              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="Enter budget amount"
            />
          </div>
          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
            <button
              onClick={() => setEditingBudget(false)}
              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
            >
              Cancel
            </button>
            <button
              onClick={async () => {
                try {
                  await api.patch(`/campaigns/${id}`, { budget: budgetValue ? Number(budgetValue) : null })
                  setEditingBudget(false)
                  loadAll()
                } catch (err) {
                  console.error('Failed to update budget:', err)
                }
              }}
              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm"
            >
              Save
            </button>
          </div>
        </div>
      </Modal>

      {/* Edit Campaign Modal */}
      <Modal
        isOpen={showEditModal}
        onClose={() => setShowEditModal(false)}
        title="Edit Campaign"
        size="lg"
      >
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Name *</label>
            <input
              type="text"
              value={editForm.name || ''}
              onChange={e => setEditForm(f => ({ ...f, name: 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>
            <label className="block text-sm font-medium text-text-primary mb-1">Brand</label>
            <select
              value={editForm.brand_id || ''}
              onChange={e => setEditForm(f => ({ ...f, 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="">No brand</option>
              {brands.map(b => (
                <option key={b.id} value={b.id}>{lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Description</label>
            <textarea
              value={editForm.description || ''}
              onChange={e => setEditForm(f => ({ ...f, 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"
            />
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Status</label>
              <select
                value={editForm.status || 'planning'}
                onChange={e => setEditForm(f => ({ ...f, 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"
              >
                <option value="planning">Planning</option>
                <option value="active">Active</option>
                <option value="paused">Paused</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Goals</label>
              <input
                type="text"
                value={editForm.goals || ''}
                onChange={e => setEditForm(f => ({ ...f, goals: 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>
              <label className="block text-sm font-medium text-text-primary mb-1">Budget (SAR)</label>
              <input
                type="number"
                value={editForm.budget || ''}
                onChange={e => setEditForm(f => ({ ...f, budget: e.target.value }))}
                min="0"
                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="0"
              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">Start Date</label>
              <input
                type="date"
                value={editForm.start_date || ''}
                onChange={e => setEditForm(f => ({ ...f, start_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>
              <label className="block text-sm font-medium text-text-primary mb-1">End Date</label>
              <input
                type="date"
                value={editForm.end_date || ''}
                onChange={e => setEditForm(f => ({ ...f, end_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-sm font-medium text-text-primary mb-1">Platforms</label>
            <div className="flex flex-wrap gap-2 p-2 border border-border rounded-lg bg-white min-h-[42px]">
              {Object.entries(PLATFORMS).map(([k, v]) => {
                const checked = (editForm.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={() => {
                        setEditForm(f => ({
                          ...f,
                          platforms: checked
                            ? f.platforms.filter(p => p !== k)
                            : [...(f.platforms || []), k]
                        }))
                      }}
                      className="sr-only"
                    />
                    {v.label}
                  </label>
                )
              })}
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
            <textarea
              value={editForm.notes || ''}
              onChange={e => setEditForm(f => ({ ...f, notes: e.target.value }))}
              rows={2}
              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"
            />
          </div>
          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
            {permissions?.canDeleteCampaigns && (
              <button
                onClick={() => setShowDeleteCampaignConfirm(true)}
                className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg mr-auto"
              >
                Delete Campaign
              </button>
            )}
            <button
              onClick={() => setShowEditModal(false)}
              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
            >
              Cancel
            </button>
            <button
              onClick={saveCampaignEdit}
              disabled={!editForm.name}
              className="px-5 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"
            >
              Save Changes
            </button>
          </div>
        </div>
      </Modal>

      {/* Delete Campaign Confirmation */}
      <Modal
        isOpen={showDeleteCampaignConfirm}
        onClose={() => setShowDeleteCampaignConfirm(false)}
        title="Delete Campaign?"
        isConfirm
        danger
        confirmText="Delete Campaign"
        onConfirm={async () => {
          try {
            await api.delete(`/campaigns/${id}`)
            setShowDeleteCampaignConfirm(false)
            setShowEditModal(false)
            navigate('/campaigns')
          } catch (err) {
            console.error('Failed to delete campaign:', err)
          }
        }}
      >
        Are you sure you want to delete this campaign? All tracks and linked data will be permanently removed. This action cannot be undone.
      </Modal>

      {/* Post Detail Modal */}
      <Modal
        isOpen={!!selectedPost}
        onClose={() => setSelectedPost(null)}
        title={selectedPost?.title || 'Post Details'}
        size="lg"
      >
        {selectedPost && (
          <div className="space-y-4">
            {/* Thumbnail / Media */}
            {selectedPost.thumbnail_url && (
              <div className="rounded-lg overflow-hidden border border-border">
                <img
                  src={selectedPost.thumbnail_url}
                  alt={selectedPost.title}
                  className="w-full max-h-64 object-contain bg-surface-secondary"
                />
              </div>
            )}

            {/* Status & Platforms */}
            <div className="flex flex-wrap items-center gap-2">
              <StatusBadge status={selectedPost.status} />
              {selectedPost.brand_name && <BrandBadge brand={selectedPost.brand_name} />}
              {selectedPost.platforms && selectedPost.platforms.length > 0 && (
                <PlatformIcons platforms={selectedPost.platforms} size={18} />
              )}
            </div>

            {/* Description */}
            {selectedPost.description && (
              <div>
                <h4 className="text-xs uppercase tracking-wider text-text-tertiary font-medium mb-1">Description</h4>
                <p className="text-sm text-text-secondary whitespace-pre-wrap">{selectedPost.description}</p>
              </div>
            )}

            {/* Meta info grid */}
            <div className="grid grid-cols-2 gap-3 text-sm">
              {selectedPost.track_name && (
                <div>
                  <span className="text-text-tertiary text-xs">Track</span>
                  <p className="font-medium text-text-primary">{selectedPost.track_name}</p>
                </div>
              )}
              {selectedPost.assigned_name && (
                <div>
                  <span className="text-text-tertiary text-xs">Assigned to</span>
                  <p className="font-medium text-text-primary">{selectedPost.assigned_name}</p>
                </div>
              )}
              {selectedPost.creator_user_name && (
                <div>
                  <span className="text-text-tertiary text-xs">Created by</span>
                  <p className="font-medium text-text-primary">{selectedPost.creator_user_name}</p>
                </div>
              )}
              {selectedPost.scheduled_date && (
                <div>
                  <span className="text-text-tertiary text-xs">Scheduled</span>
                  <p className="font-medium text-text-primary">{format(new Date(selectedPost.scheduled_date), 'MMM d, yyyy')}</p>
                </div>
              )}
              {selectedPost.published_date && (
                <div>
                  <span className="text-text-tertiary text-xs">Published</span>
                  <p className="font-medium text-text-primary">{format(new Date(selectedPost.published_date), 'MMM d, yyyy')}</p>
                </div>
              )}
              {selectedPost.created_at && (
                <div>
                  <span className="text-text-tertiary text-xs">Created</span>
                  <p className="font-medium text-text-primary">{format(new Date(selectedPost.created_at), 'MMM d, yyyy')}</p>
                </div>
              )}
            </div>

            {/* Publication Links */}
            {selectedPost.publication_links && selectedPost.publication_links.length > 0 && (
              <div>
                <h4 className="text-xs uppercase tracking-wider text-text-tertiary font-medium mb-2">Publication Links</h4>
                <div className="space-y-2">
                  {selectedPost.publication_links.map((link, i) => {
                    const url = typeof link === 'string' ? link : link.url
                    const platform = typeof link === 'string' ? null : link.platform
                    const platformInfo = platform ? PLATFORMS[platform] : null
                    return (
                      <a
                        key={i}
                        href={url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 p-2 rounded-lg border border-border hover:bg-surface-secondary transition-colors group"
                      >
                        {platformInfo && <PlatformIcon platform={platform} size={18} />}
                        <span className="text-sm font-medium text-brand-primary group-hover:underline truncate flex-1">
                          {platformInfo ? platformInfo.label : url}
                        </span>
                        <span className="text-[10px] text-text-tertiary truncate max-w-[200px]">{url}</span>
                      </a>
                    )
                  })}
                </div>
              </div>
            )}

            {/* Notes */}
            {selectedPost.notes && (
              <div>
                <h4 className="text-xs uppercase tracking-wider text-text-tertiary font-medium mb-1">Notes</h4>
                <p className="text-sm text-text-secondary whitespace-pre-wrap">{selectedPost.notes}</p>
              </div>
            )}
          </div>
        )}
      </Modal>
    </div>
  )
}