import { useState, useEffect, useContext } from 'react'
import { Plus, LayoutGrid, List, Search, X, FileText, Filter } from 'lucide-react'
import { AppContext } from '../App'
import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../i18n/LanguageContext'
import { api, PLATFORMS } from '../utils/api'
import KanbanBoard from '../components/KanbanBoard'
import KanbanCard from '../components/KanbanCard'
import PostCard from '../components/PostCard'
import PostDetailPanel from '../components/PostDetailPanel'
import DatePresetPicker from '../components/DatePresetPicker'
import { SkeletonKanbanBoard, SkeletonTable } from '../components/SkeletonLoader'
import EmptyState from '../components/EmptyState'
import BulkSelectBar from '../components/BulkSelectBar'
import Modal from '../components/Modal'
import { useToast } from '../components/ToastContainer'

const EMPTY_POST = {
  title: '', description: '', brand_id: '', platforms: [],
  status: 'draft', assigned_to: '', scheduled_date: '', notes: '', campaign_id: '',
  publication_links: [],
}

export default function PostProduction() {
  const { t, lang } = useLanguage()
  const { teamMembers, brands, getBrandName } = useContext(AppContext)
  const { canEditResource } = useAuth()
  const toast = useToast()
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)
  const [view, setView] = useState('kanban')
  const [panelPost, setPanelPost] = useState(null)
  const [campaigns, setCampaigns] = useState([])
  const [filters, setFilters] = useState({ brand: '', platform: '', assignedTo: '', campaign: '', periodFrom: '', periodTo: '' })
  const [searchTerm, setSearchTerm] = useState('')
  const [activePreset, setActivePreset] = useState('')
  const [moveError, setMoveError] = useState('')
  const [selectedIds, setSelectedIds] = useState(new Set())
  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
  const [showFilters, setShowFilters] = useState(false)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [createForm, setCreateForm] = useState({ ...EMPTY_POST })
  const [createSaving, setCreateSaving] = useState(false)

  useEffect(() => {
    loadPosts()
    api.get('/campaigns').then(r => setCampaigns(Array.isArray(r) ? r : [])).catch(() => {})
  }, [])

  const loadPosts = async () => {
    try {
      const res = await api.get('/posts')
      setPosts(Array.isArray(res) ? res : [])
    } catch (err) {
      console.error('Failed to load posts:', err)
    } finally {
      setLoading(false)
    }
  }

  const handleMovePost = async (postId, newStatus) => {
    // Optimistic update — move the card instantly
    const prev = posts
    setPosts(posts.map(p => p._id === postId ? { ...p, status: newStatus } : p))
    try {
      await api.patch(`/posts/${postId}`, { status: newStatus })
      toast.success(t('posts.statusUpdated'))
    } catch (err) {
      console.error('Move failed:', err)
      setPosts(prev)
      if (err.message?.includes('Cannot publish')) {
        setMoveError(t('posts.publishRequired'))
        setTimeout(() => setMoveError(''), 5000)
        toast.error(t('posts.publishRequired'))
      } else {
        toast.error(t('common.updateFailed'))
      }
    }
  }

  const handlePanelSave = async (postId, data) => {
    if (postId) {
      await api.patch(`/posts/${postId}`, data)
      toast.success(t('posts.updated'))
    } else {
      await api.post('/posts', data)
      toast.success(t('posts.created'))
    }
    loadPosts()
  }

  const handlePanelDelete = async (postId) => {
    try {
      await api.delete(`/posts/${postId}`)
      toast.success(t('posts.deleted'))
      loadPosts()
    } catch (err) {
      console.error('Delete failed:', err)
      toast.error(t('common.deleteFailed'))
    }
  }

  const handleBulkDelete = async () => {
    try {
      await api.post('/posts/bulk-delete', { ids: [...selectedIds] })
      toast.success(t('posts.deleted'))
      setSelectedIds(new Set())
      setShowBulkDeleteConfirm(false)
      loadPosts()
    } catch (err) {
      console.error('Bulk delete failed:', err)
      toast.error(t('common.deleteFailed'))
    }
  }

  const toggleSelect = (id) => {
    setSelectedIds(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  const toggleSelectAll = () => {
    if (selectedIds.size === filteredPosts.length) setSelectedIds(new Set())
    else setSelectedIds(new Set(filteredPosts.map(p => p._id || p.id || p.Id)))
  }

  const openEdit = (post) => {
    if (!canEditResource('post', post)) {
      toast.error(t('posts.canOnlyEditOwn'))
      return
    }
    setPanelPost(post)
  }

  const openNew = () => {
    setCreateForm({ ...EMPTY_POST })
    setShowCreateModal(true)
  }

  const handleCreate = async () => {
    setCreateSaving(true)
    try {
      const data = {
        title: createForm.title,
        brand_id: createForm.brand_id ? Number(createForm.brand_id) : null,
        campaign_id: createForm.campaign_id ? Number(createForm.campaign_id) : null,
        assigned_to: createForm.assigned_to ? Number(createForm.assigned_to) : null,
        status: 'draft',
      }
      const created = await api.post('/posts', data)
      setShowCreateModal(false)
      toast.success(t('posts.created'))
      loadPosts()
      // Open the detail panel for further editing
      if (created) setPanelPost(created)
    } catch (err) {
      console.error('Create post failed:', err)
      toast.error(t('common.saveFailed'))
    } finally {
      setCreateSaving(false)
    }
  }

  const filteredPosts = posts.filter(p => {
    if (filters.brand && String(p.brandId || p.brand_id) !== filters.brand) return false
    if (filters.platform && !(p.platforms || []).includes(filters.platform) && p.platform !== filters.platform) return false
    if (filters.assignedTo && String(p.assignedTo || p.assigned_to) !== filters.assignedTo) return false
    if (filters.campaign && String(p.campaignId || p.campaign_id) !== filters.campaign) return false
    if (searchTerm && !p.title?.toLowerCase().includes(searchTerm.toLowerCase())) return false
    if (filters.periodFrom || filters.periodTo) {
      const postDate = p.scheduledDate || p.scheduled_date || p.published_date || p.publishedDate
      if (!postDate) return false
      const d = new Date(postDate).toISOString().slice(0, 10)
      if (filters.periodFrom && d < filters.periodFrom) return false
      if (filters.periodTo && d > filters.periodTo) return false
    }
    return true
  })

  if (loading) {
    return view === 'kanban' ? <SkeletonKanbanBoard /> : <SkeletonTable rows={8} cols={6} />
  }

  return (
    <div className="space-y-4 animate-fade-in">
      {/* Toolbar */}
      <div className="space-y-2">
        <div className="flex flex-wrap items-center gap-3">
          <div className="relative flex-1 min-w-[200px] max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
            <input
              type="text"
              placeholder={t('posts.searchPosts')}
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-white"
            />
          </div>

          <button
            data-tutorial="filters"
            onClick={() => setShowFilters(f => !f)}
            className={`relative flex items-center gap-1.5 px-3 py-2 text-sm border rounded-lg transition-colors ${showFilters ? 'border-brand-primary bg-brand-primary/5 text-brand-primary' : 'border-border bg-white text-text-secondary hover:border-brand-primary/40'}`}
          >
            <Filter className="w-4 h-4" />
            {t('common.filter')}
            {(filters.brand || filters.platform || filters.assignedTo || filters.periodFrom || filters.periodTo) && (
              <span className="w-1.5 h-1.5 rounded-full bg-brand-primary" />
            )}
          </button>

          <div className="flex bg-surface-tertiary rounded-lg p-0.5 ml-auto">
            <button
              onClick={() => setView('kanban')}
              className={`p-2 rounded-md ${view === 'kanban' ? 'bg-white shadow-sm text-text-primary' : 'text-text-tertiary'}`}
            >
              <LayoutGrid className="w-4 h-4" />
            </button>
            <button
              onClick={() => setView('list')}
              className={`p-2 rounded-md ${view === 'list' ? 'bg-white shadow-sm text-text-primary' : 'text-text-tertiary'}`}
            >
              <List className="w-4 h-4" />
            </button>
          </div>

          <button
            data-tutorial="new-post"
            onClick={openNew}
            className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm"
          >
            <Plus className="w-4 h-4" />
            {t('posts.newPost')}
          </button>
        </div>

        {showFilters && (
          <div className="flex items-center gap-2 flex-wrap animate-fade-in">
            <select
              value={filters.brand}
              onChange={e => setFilters(f => ({ ...f, brand: e.target.value }))}
              className="text-xs border border-border rounded-lg px-2.5 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
            >
              <option value="">{t('posts.allBrands')}</option>
              {brands.map(b => <option key={b._id} value={b._id}>{lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
            </select>

            <select
              value={filters.platform}
              onChange={e => setFilters(f => ({ ...f, platform: e.target.value }))}
              className="text-xs border border-border rounded-lg px-2.5 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
            >
              <option value="">{t('posts.allPlatforms')}</option>
              {Object.entries(PLATFORMS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>

            <select
              value={filters.assignedTo}
              onChange={e => setFilters(f => ({ ...f, assignedTo: e.target.value }))}
              className="text-xs border border-border rounded-lg px-2.5 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
            >
              <option value="">{t('posts.allPeople')}</option>
              {teamMembers.map(m => <option key={m._id} value={String(m._id)}>{m.name}</option>)}
            </select>

            <DatePresetPicker
              activePreset={activePreset}
              onSelect={(from, to, key) => { setFilters(f => ({ ...f, periodFrom: from, periodTo: to })); setActivePreset(key) }}
              onClear={() => { setFilters(f => ({ ...f, periodFrom: '', periodTo: '' })); setActivePreset('') }}
            />

            <div className="flex items-center gap-1.5">
              <input
                type="date"
                value={filters.periodFrom}
                onChange={e => { setFilters(f => ({ ...f, periodFrom: e.target.value })); setActivePreset('') }}
                title={t('posts.periodFrom')}
                className="text-xs border border-border rounded-lg px-2 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
              />
              <span className="text-xs text-text-tertiary">–</span>
              <input
                type="date"
                value={filters.periodTo}
                onChange={e => { setFilters(f => ({ ...f, periodTo: e.target.value })); setActivePreset('') }}
                title={t('posts.periodTo')}
                className="text-xs border border-border rounded-lg px-2 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
              />
            </div>
          </div>
        )}
      </div>

      {moveError && (
        <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-700 flex items-center justify-between">
          <span>{moveError}</span>
          <button onClick={() => setMoveError('')} className="p-0.5 hover:bg-amber-100 rounded">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {view === 'kanban' ? (
        <KanbanBoard
          columns={[
            { id: 'draft', label: t('posts.status.draft'), color: 'bg-gray-400' },
            { id: 'in_review', label: t('posts.status.in_review'), color: 'bg-amber-400' },
            { id: 'approved', label: t('posts.status.approved'), color: 'bg-blue-400' },
            { id: 'scheduled', label: t('posts.status.scheduled'), color: 'bg-purple-400' },
            { id: 'published', label: t('posts.status.published'), color: 'bg-emerald-400' },
          ]}
          items={filteredPosts}
          getItemId={(p) => p._id}
          onMove={(id, status) => handleMovePost(id, status)}
          renderCard={(post) => {
            const brandName = getBrandName(post.brand_id || post.brandId) || post.brand_name || post.brand
            const assignee = post.assignedToName || post.assignedName || post.assigned_name
            return (
              <KanbanCard
                title={post.title}
                thumbnail={post.thumbnail_url}
                brandName={brandName}
                assigneeName={assignee}
                date={post.scheduledDate}
                onClick={() => openEdit(post)}
              />
            )
          }}
        />
      ) : (
        <div className="bg-white rounded-xl border border-border overflow-hidden">
          {filteredPosts.length === 0 ? (
            <EmptyState
              icon={FileText}
              title={posts.length === 0 ? t('posts.noPosts') : t('posts.noPostsFound')}
              description={posts.length === 0 ? t('posts.createFirstPost') : t('posts.tryDifferentFilter')}
              actionLabel={posts.length === 0 ? t('posts.createPost') : null}
              onAction={posts.length === 0 ? openNew : null}
              secondaryActionLabel={posts.length > 0 ? t('common.clearFilters') : null}
              onSecondaryAction={() => {
                setFilters({ brand: '', platform: '', assignedTo: '', campaign: '', periodFrom: '', periodTo: '' })
                setSearchTerm('')
              }}
            />
          ) : (
            <>
            {selectedIds.size > 0 && (
              <div className="px-4 pt-3">
                <BulkSelectBar selectedCount={selectedIds.size} onDelete={() => setShowBulkDeleteConfirm(true)} onClear={() => setSelectedIds(new Set())} />
              </div>
            )}
            <table className="w-full">
              <thead>
                <tr className="border-b border-border bg-surface-secondary">
                  <th className="w-10 px-3 py-3" onClick={e => e.stopPropagation()}>
                    <input type="checkbox" checked={selectedIds.size === filteredPosts.length && filteredPosts.length > 0} onChange={toggleSelectAll} className="rounded border-border" />
                  </th>
                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.postTitle')}</th>
                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.brand')}</th>
                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.status')}</th>
                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.platforms')}</th>
                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.assignTo')}</th>
                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.scheduledDate')}</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border-light">
                {filteredPosts.map(post => {
                  const postId = post._id || post.id || post.Id
                  return (
                    <PostCard
                      key={postId}
                      post={post}
                      onClick={() => openEdit(post)}
                      checkboxSlot={<input type="checkbox" checked={selectedIds.has(postId)} onChange={() => toggleSelect(postId)} className="rounded border-border" />}
                    />
                  )
                })}
              </tbody>
            </table>
            </>
          )}
        </div>
      )}

      {/* Bulk Delete Confirmation */}
      <Modal
        isOpen={showBulkDeleteConfirm}
        onClose={() => setShowBulkDeleteConfirm(false)}
        title={t('common.bulkDeleteConfirm').replace('{count}', selectedIds.size)}
        isConfirm
        danger
        confirmText={t('common.deleteSelected')}
        onConfirm={handleBulkDelete}
      >
        {t('common.bulkDeleteDesc')}
      </Modal>

      {/* Create Post Modal */}
      <Modal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} title={t('posts.newPost')} size="md">
        <div className="space-y-4">
          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.postTitle')} *</label>
            <input type="text" value={createForm.title} onChange={e => setCreateForm(f => ({ ...f, title: 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" autoFocus />
          </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={createForm.brand_id} onChange={e => setCreateForm(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="">{t('posts.allBrands')}</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-xs font-medium text-text-tertiary mb-1">{t('posts.campaign')}</label>
              <select value={createForm.campaign_id} onChange={e => setCreateForm(f => ({ ...f, 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="">—</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.assignedTo')}</label>
            <select value={createForm.assigned_to} onChange={e => setCreateForm(f => ({ ...f, 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} value={String(m._id)}>{m.name}</option>)}
            </select>
          </div>
          <button onClick={handleCreate} disabled={!createForm.title || createSaving}
            className={`w-full px-4 py-2.5 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 ${createSaving ? 'btn-loading' : ''}`}>
            {t('posts.newPost')}
          </button>
        </div>
      </Modal>

      {/* Post Detail Panel (edit only) */}
      {panelPost && (
        <PostDetailPanel
          post={panelPost}
          onClose={() => setPanelPost(null)}
          onSave={handlePanelSave}
          onDelete={handlePanelDelete}
          brands={brands}
          teamMembers={teamMembers}
          campaigns={campaigns}
        />
      )}
    </div>
  )
}