'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Search, Plus, Edit, Trash2, Eye, EyeOff, ArrowUp, ArrowDown, GripVertical, LayoutGrid, List, CheckSquare, Square, X } from 'lucide-react'
import { isAuthenticated } from '@/lib/auth'
import { apiGet, apiDelete, apiPut, apiPatch, apiPost } from '@/lib/apiClient'
import { newsTickerApi } from '@/lib/api'
import LoadingSpinner from '@/components/LoadingSpinner'

interface NewsTicker {
  _id: string
  text: string
  link?: string
  isActive: boolean
  order: number
  createdAt: string
}

export default function NewsTickerPage() {
  const router = useRouter()
  const [tickers, setTickers] = useState<NewsTicker[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [filterStatus, setFilterStatus] = useState('all')
  const [isReordering, setIsReordering] = useState(false)
  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list')
  const [bulkMode, setBulkMode] = useState(false)
  const [selectedTickers, setSelectedTickers] = useState<Set<string>>(new Set())

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }
    fetchTickers()
  }, [router])

  const fetchTickers = async () => {
    try {
      const result = await apiGet<NewsTicker[]>('/news-ticker/all')
      if (result.success && result.data) {
        setTickers(result.data)
      }
    } catch (error: any) {
      console.error('Error fetching news ticker items:', error)
      if (error.message?.includes('Authentication required')) {
        router.push('/admin')
      }
    } finally {
      setLoading(false)
    }
  }

  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this news ticker item?')) return

    try {
      const result = await apiDelete(`/news-ticker/${id}`)
      if (result.success) {
        fetchTickers()
      }
    } catch (error: any) {
      console.error('Error deleting news ticker item:', error)
      alert(error.message || 'Failed to delete news ticker item')
    }
  }

  const toggleActive = async (id: string, currentStatus: boolean) => {
    try {
      const result = await apiPut(`/news-ticker/${id}`, {
        isActive: !currentStatus
      })
      if (result.success) {
        fetchTickers()
      }
    } catch (error: any) {
      console.error('Error toggling status:', error)
      alert(error.message || 'Failed to update status')
    }
  }

  const handleReorder = async (items: NewsTicker[]) => {
    try {
      const reorderData = items.map((item, index) => ({
        id: item._id,
        order: index
      }))
      
      const result = await apiPatch('/news-ticker/reorder', { items: reorderData })
      if (result.success) {
        setTickers(items)
        setIsReordering(false)
      }
    } catch (error: any) {
      console.error('Error reordering:', error)
      alert(error.message || 'Failed to reorder items')
    }
  }

  const moveItem = (index: number, direction: 'up' | 'down') => {
    const newTickers = [...tickers]
    const newIndex = direction === 'up' ? index - 1 : index + 1
    
    if (newIndex < 0 || newIndex >= newTickers.length) return
    
    ;[newTickers[index], newTickers[newIndex]] = [newTickers[newIndex], newTickers[index]]
    handleReorder(newTickers)
  }

  const toggleSelection = (id: string) => {
    const newSelection = new Set(selectedTickers)
    if (newSelection.has(id)) {
      newSelection.delete(id)
    } else {
      newSelection.add(id)
    }
    setSelectedTickers(newSelection)
  }

  const selectAll = () => {
    if (selectedTickers.size === filteredTickers.length) {
      setSelectedTickers(new Set())
    } else {
      setSelectedTickers(new Set(filteredTickers.map(t => t._id)))
    }
  }

  const handleBulkDelete = async () => {
    if (selectedTickers.size === 0) {
      alert('Please select at least one item to delete')
      return
    }

    if (!confirm(`Are you sure you want to delete ${selectedTickers.size} item(s)?`)) return

    try {
      const result = await newsTickerApi.bulkDelete(Array.from(selectedTickers))
      if (result.success) {
        alert(result.message || `Successfully deleted ${result.deletedCount} item(s)`)
        setSelectedTickers(new Set())
        fetchTickers()
      }
    } catch (error: any) {
      console.error('Error deleting items:', error)
      alert(error.message || 'Failed to delete items')
    }
  }

  const handleBulkActivate = async () => {
    if (selectedTickers.size === 0) {
      alert('Please select at least one item')
      return
    }

    try {
      const result = await newsTickerApi.bulkUpdate(Array.from(selectedTickers), { isActive: true })
      if (result.success) {
        alert(result.message || `Successfully activated ${result.modifiedCount} item(s)`)
        setSelectedTickers(new Set())
        fetchTickers()
      }
    } catch (error: any) {
      console.error('Error activating items:', error)
      alert(error.message || 'Failed to activate items')
    }
  }

  const handleBulkDeactivate = async () => {
    if (selectedTickers.size === 0) {
      alert('Please select at least one item')
      return
    }

    try {
      const result = await newsTickerApi.bulkUpdate(Array.from(selectedTickers), { isActive: false })
      if (result.success) {
        alert(result.message || `Successfully deactivated ${result.modifiedCount} item(s)`)
        setSelectedTickers(new Set())
        fetchTickers()
      }
    } catch (error: any) {
      console.error('Error deactivating items:', error)
      alert(error.message || 'Failed to deactivate items')
    }
  }

  const filteredTickers = tickers.filter(ticker => {
    const matchesSearch = ticker.text.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = filterStatus === 'all' || 
      (filterStatus === 'active' ? ticker.isActive : !ticker.isActive)
    return matchesSearch && matchesStatus
  })

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <LoadingSpinner />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-white mb-2">News Ticker</h1>
          <p className="text-white/70">Manage scrolling news ticker items</p>
        </div>
        <div className="flex gap-3">
          {/* View Toggle */}
          <div className="flex items-center bg-white/10 rounded-lg p-1">
            <button
              onClick={() => setViewMode('list')}
              className={`p-2 rounded transition-all ${
                viewMode === 'list' ? 'bg-primary text-white' : 'text-white/50 hover:text-white'
              }`}
              title="List View"
            >
              <List className="w-5 h-5" />
            </button>
            <button
              onClick={() => setViewMode('grid')}
              className={`p-2 rounded transition-all ${
                viewMode === 'grid' ? 'bg-primary text-white' : 'text-white/50 hover:text-white'
              }`}
              title="Grid View"
            >
              <LayoutGrid className="w-5 h-5" />
            </button>
          </div>
          <button
            onClick={() => {
              setBulkMode(!bulkMode)
              setSelectedTickers(new Set())
              setIsReordering(false)
            }}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
              bulkMode ? 'bg-orange-500 hover:bg-orange-600' : 'bg-white/10 hover:bg-white/20'
            } text-white`}
          >
            {bulkMode ? <X className="w-5 h-5" /> : <CheckSquare className="w-5 h-5" />}
            {bulkMode ? 'Exit Bulk Mode' : 'Bulk Operations'}
          </button>
          <button
            onClick={() => {
              setIsReordering(!isReordering)
              setBulkMode(false)
              setSelectedTickers(new Set())
            }}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
              isReordering ? 'bg-orange-500 hover:bg-orange-600' : 'bg-white/10 hover:bg-white/20'
            } text-white`}
          >
            <GripVertical className="w-5 h-5" />
            {isReordering ? 'Done Reordering' : 'Reorder Items'}
          </button>
          <button
            onClick={() => router.push('/admin/news-ticker/new')}
            className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-all"
          >
            <Plus className="w-5 h-5" />
            New Item
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
        <div className={`grid grid-cols-1 gap-4 ${bulkMode ? 'md:grid-cols-3' : 'md:grid-cols-2'}`}>
          {bulkMode && (
            <div>
              <button
                onClick={selectAll}
                className="w-full px-4 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg text-white transition-all"
              >
                {selectedTickers.size === filteredTickers.length ? 'Deselect All' : 'Select All'}
              </button>
            </div>
          )}
          
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
            <input
              type="text"
              placeholder="Search news ticker items..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          <div>
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary appearance-none"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
        </div>

        {/* Bulk Actions Bar */}
        {bulkMode && selectedTickers.size > 0 && (
          <div className="mt-4 pt-4 border-t border-white/20 flex items-center gap-3 flex-wrap">
            <span className="text-white/70 text-sm">
              {selectedTickers.size} item(s) selected
            </span>
            <div className="flex gap-2 flex-wrap">
              <button
                onClick={handleBulkActivate}
                className="flex items-center gap-2 px-4 py-2 bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-lg transition-all text-sm"
              >
                <Eye className="w-4 h-4" />
                Activate Selected
              </button>
              <button
                onClick={handleBulkDeactivate}
                className="flex items-center gap-2 px-4 py-2 bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 rounded-lg transition-all text-sm"
              >
                <EyeOff className="w-4 h-4" />
                Deactivate Selected
              </button>
              <button
                onClick={handleBulkDelete}
                className="flex items-center gap-2 px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-all text-sm"
              >
                <Trash2 className="w-4 h-4" />
                Delete Selected
              </button>
            </div>
          </div>
        )}
      </div>

      {/* News Ticker Items Display */}
      {viewMode === 'list' ? (
        <div className="bg-white/10 backdrop-blur-xl rounded-xl border border-white/20 overflow-hidden">
          <div className="divide-y divide-white/10">
            {filteredTickers.map((ticker, index) => (
            <div
              key={ticker._id}
              className={`p-4 hover:bg-white/5 transition-colors ${
                selectedTickers.has(ticker._id) ? 'bg-primary/10 border-l-4 border-l-primary' : ''
              }`}
            >
              <div className="flex items-center gap-4">
                {/* Bulk Selection Checkbox */}
                {bulkMode && (
                  <button
                    onClick={() => toggleSelection(ticker._id)}
                    className="flex-shrink-0 p-2 hover:bg-white/10 rounded-lg transition-all"
                  >
                    {selectedTickers.has(ticker._id) ? (
                      <CheckSquare className="w-5 h-5 text-primary" />
                    ) : (
                      <Square className="w-5 h-5 text-white/50" />
                    )}
                  </button>
                )}

                {/* Reorder Controls */}
                {isReordering && !bulkMode && (
                  <div className="flex flex-col gap-1">
                    <button
                      onClick={() => moveItem(index, 'up')}
                      disabled={index === 0}
                      className="p-1 text-white/50 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
                    >
                      <ArrowUp className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => moveItem(index, 'down')}
                      disabled={index === filteredTickers.length - 1}
                      className="p-1 text-white/50 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
                    >
                      <ArrowDown className="w-4 h-4" />
                    </button>
                  </div>
                )}

                {/* Order Badge */}
                {!isReordering && !bulkMode && (
                  <div className="w-8 h-8 flex items-center justify-center bg-primary/20 text-primary rounded-lg font-semibold text-sm">
                    {ticker.order + 1}
                  </div>
                )}

                {/* Content */}
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <p className="text-white font-medium">{ticker.text}</p>
                    <span className={`px-2 py-1 text-xs font-medium rounded ${
                      ticker.isActive 
                        ? 'bg-green-500/20 text-green-400' 
                        : 'bg-gray-500/20 text-gray-400'
                    }`}>
                      {ticker.isActive ? 'Active' : 'Inactive'}
                    </span>
                  </div>
                  {ticker.link && (
                    <a
                      href={ticker.link}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-primary hover:text-primary-light text-sm"
                    >
                      {ticker.link}
                    </a>
                  )}
                  <p className="text-white/50 text-xs mt-1">
                    Created: {new Date(ticker.createdAt).toLocaleDateString()}
                  </p>
                </div>

                {/* Actions */}
                {!isReordering && !bulkMode && (
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => router.push(`/admin/news-ticker/${ticker._id}`)}
                      className="p-2 text-blue-400 hover:bg-blue-500/20 rounded-lg transition-all"
                      title="Edit"
                    >
                      <Edit className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => toggleActive(ticker._id, ticker.isActive)}
                      className="p-2 text-yellow-400 hover:bg-yellow-500/20 rounded-lg transition-all"
                      title={ticker.isActive ? 'Deactivate' : 'Activate'}
                    >
                      {ticker.isActive ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                    <button
                      onClick={() => handleDelete(ticker._id)}
                      className="p-2 text-red-400 hover:bg-red-500/20 rounded-lg transition-all"
                      title="Delete"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
          </div>

          {filteredTickers.length === 0 && (
            <div className="p-12 text-center">
              <p className="text-white/50">No news ticker items found</p>
            </div>
          )}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredTickers.map((ticker, index) => (
            <div
              key={ticker._id}
              className={`relative bg-white/10 backdrop-blur-xl rounded-xl border p-4 hover:border-white/40 transition-all ${
                selectedTickers.has(ticker._id) ? 'border-primary ring-2 ring-primary' : 'border-white/20'
              }`}
            >
              {bulkMode && (
                <button
                  onClick={() => toggleSelection(ticker._id)}
                  className="absolute top-3 left-3 p-2 bg-black/50 backdrop-blur-sm rounded-lg hover:bg-black/70 transition-all z-10"
                >
                  {selectedTickers.has(ticker._id) ? (
                    <CheckSquare className="w-6 h-6 text-primary" />
                  ) : (
                    <Square className="w-6 h-6 text-white" />
                  )}
                </button>
              )}

              <div className="flex items-start justify-between mb-3">
                {!bulkMode && (
                  <div className="w-10 h-10 flex items-center justify-center bg-primary/20 text-primary rounded-lg font-semibold">
                    {ticker.order + 1}
                  </div>
                )}
                <span className={`px-2 py-1 text-xs font-medium rounded ${
                  ticker.isActive 
                    ? 'bg-green-500/20 text-green-400' 
                    : 'bg-gray-500/20 text-gray-400'
                }`}>
                  {ticker.isActive ? 'Active' : 'Inactive'}
                </span>
              </div>

              <p className="text-white font-medium mb-3 line-clamp-3">
                {ticker.text}
              </p>

              {ticker.link && (
                <a
                  href={ticker.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary hover:text-primary-light text-sm block mb-3 truncate"
                >
                  {ticker.link}
                </a>
              )}

              <p className="text-white/50 text-xs mb-4">
                Created: {new Date(ticker.createdAt).toLocaleDateString()}
              </p>

              {!isReordering && !bulkMode && (
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => router.push(`/admin/news-ticker/${ticker._id}`)}
                    className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 rounded-lg transition-all"
                  >
                    <Edit className="w-4 h-4" />
                    Edit
                  </button>
                  <button
                    onClick={() => toggleActive(ticker._id, ticker.isActive)}
                    className="p-2 text-yellow-400 hover:bg-yellow-500/20 rounded-lg transition-all"
                    title={ticker.isActive ? 'Deactivate' : 'Activate'}
                  >
                    {ticker.isActive ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                  <button
                    onClick={() => handleDelete(ticker._id)}
                    className="p-2 text-red-400 hover:bg-red-500/20 rounded-lg transition-all"
                    title="Delete"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              )}
            </div>
          ))}

          {filteredTickers.length === 0 && (
            <div className="col-span-full bg-white/10 backdrop-blur-xl rounded-xl p-12 text-center border border-white/20">
              <p className="text-white/50">No news ticker items found</p>
            </div>
          )}
        </div>
      )}
    </div>
  )
}