'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Search, Plus, Edit, Trash2, Eye, EyeOff, Filter, CheckSquare, Square, X, LayoutGrid, List } from 'lucide-react'
import { isAuthenticated, hasRole } from '@/lib/auth'
import { apiGet, apiDelete, apiPut } from '@/lib/apiClient'
import { normalizeImageUrl } from '@/lib/media'
import { tendersApi } from '@/lib/api'
import LoadingSpinner from '@/components/LoadingSpinner'

interface Tender {
  _id: string
  title: string
  description: string
  imageUrl?: string
  tenderNumber: string
  category: string
  closingDate: string
  status: 'draft' | 'open' | 'closed' | 'awarded' | 'cancelled'
  isPublished: boolean
  isFeatured: boolean
  createdAt: string
  createdBy?: {
    _id: string
    firstName: string
    lastName: string
    email: string
  }
}

export default function TendersPage() {
  const router = useRouter()
  const [tenders, setTenders] = useState<Tender[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [filterCategory, setFilterCategory] = useState('all')
  const [filterStatus, setFilterStatus] = useState('all')
  const [selectedTenders, setSelectedTenders] = useState<Set<string>>(new Set())
  const [bulkMode, setBulkMode] = useState(false)
  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list')
  const [isManager, setIsManager] = useState(false)
  const [canCreate, setCanCreate] = useState(false)
  
  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }
    setIsManager(hasRole(['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER']))
    setCanCreate(hasRole(['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'COMMUNICATIONS_OFFICER']))
    fetchTenders()
  }, [router])

  const fetchTenders = async () => {
    try {
      const result = await apiGet<Tender[]>('/tenders/all')
      if (result.success && result.data) {
        setTenders(result.data)
      }
    } catch (error: any) {
      console.error('Error fetching tenders:', 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 tender?')) return

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

  const togglePublish = async (id: string, currentStatus: boolean) => {
    try {
      const result = await apiPut(`/tenders/${id}`, {
        isPublished: !currentStatus
      })
      if (result.success) {
        fetchTenders()
      }
    } catch (error: any) {
      console.error('Error toggling publish status:', error)
      alert(error.message || 'Failed to update publish status')
    }
  }

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

  const selectAll = () => {
    if (selectedTenders.size === filteredTenders.length) {
      setSelectedTenders(new Set())
    } else {
      setSelectedTenders(new Set(filteredTenders.map(t => t._id)))
    }
  }

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

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

    try {
      const result = await tendersApi.bulkDelete(Array.from(selectedTenders))
      if (result.success) {
        alert(result.message || `Successfully deleted ${result.deletedCount} tender(s)`)
        setSelectedTenders(new Set())
        fetchTenders()
      }
    } catch (error: any) {
      console.error('Error deleting tenders:', error)
      alert(error.message || 'Failed to delete tenders')
    }
  }

  const handleBulkPublish = async () => {
    if (selectedTenders.size === 0) {
      alert('Please select at least one tender')
      return
    }

    if (!isManager) {
      alert('Only managers can publish tenders')
      return
    }

    try {
      const result = await tendersApi.bulkPublish(Array.from(selectedTenders))
      if (result.success) {
        alert(result.message || `Successfully published ${result.modifiedCount} tender(s)`)
        setSelectedTenders(new Set())
        fetchTenders()
      }
    } catch (error: any) {
      console.error('Error publishing tenders:', error)
      alert(error.message || 'Failed to publish tenders')
    }
  }

  const handleBulkUnpublish = async () => {
    if (selectedTenders.size === 0) {
      alert('Please select at least one tender')
      return
    }

    if (!isManager) {
      alert('Only managers can unpublish tenders')
      return
    }

    try {
      const result = await tendersApi.bulkUnpublish(Array.from(selectedTenders))
      if (result.success) {
        alert(result.message || `Successfully unpublished ${result.modifiedCount} tender(s)`)
        setSelectedTenders(new Set())
        fetchTenders()
      }
    } catch (error: any) {
      console.error('Error unpublishing tenders:', error)
      alert(error.message || 'Failed to unpublish tenders')
    }
  }

  const filteredTenders = tenders.filter(tender => {
    const matchesSearch = tender.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         tender.tenderNumber.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = filterCategory === 'all' || tender.category === filterCategory
    const matchesStatus = filterStatus === 'all' || tender.status === filterStatus
    
    return matchesSearch && matchesCategory && matchesStatus
  })
  
  const getStatusBadge = (tender: Tender) => {
    switch (tender.status) {
      case 'open':
        return <span className="px-2 py-1 text-xs font-medium rounded bg-green-500/20 text-green-400">Open</span>
      case 'closed':
        return <span className="px-2 py-1 text-xs font-medium rounded bg-gray-500/20 text-gray-400">Closed</span>
      case 'awarded':
        return <span className="px-2 py-1 text-xs font-medium rounded bg-blue-500/20 text-blue-400">Awarded</span>
      case 'cancelled':
        return <span className="px-2 py-1 text-xs font-medium rounded bg-red-500/20 text-red-400">Cancelled</span>
      default:
        return <span className="px-2 py-1 text-xs font-medium rounded bg-gray-500/20 text-gray-400">Draft</span>
    }
  }

  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">Tenders</h1>
          <p className="text-white/70">Manage tenders and procurement opportunities</p>
        </div>
        <div className="flex gap-3">
          <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'
              }`}
            >
              <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'
              }`}
            >
              <LayoutGrid className="w-5 h-5" />
            </button>
          </div>
          <button
            onClick={() => {
              setBulkMode(!bulkMode)
              setSelectedTenders(new Set())
            }}
            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>
          {canCreate && (
            <button
              onClick={() => router.push('/admin/tenders/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 Tender
            </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-4' : 'md:grid-cols-3'}`}>
          {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"
              >
                {selectedTenders.size === filteredTenders.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 tenders..."
              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 className="relative">
            <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
            <select
              value={filterCategory}
              onChange={(e) => setFilterCategory(e.target.value)}
              className="w-full pl-10 pr-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 Categories</option>
              <option value="general">General</option>
              <option value="infrastructure">Infrastructure</option>
              <option value="services">Services</option>
              <option value="supplies">Supplies</option>
            </select>
          </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="open">Open</option>
              <option value="closed">Closed</option>
              <option value="awarded">Awarded</option>
              <option value="draft">Draft</option>
            </select>
          </div>
        </div>

        {/* Bulk Actions Bar */}
        {bulkMode && selectedTenders.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">
              {selectedTenders.size} tender(s) selected
            </span>
            <div className="flex gap-2 flex-wrap">
              {isManager && (
                <>
                  <button
                    onClick={handleBulkPublish}
                    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" />
                    Publish Selected
                  </button>
                  <button
                    onClick={handleBulkUnpublish}
                    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" />
                    Unpublish 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>

      {/* Tenders Display */}
      {viewMode === 'grid' ? (
        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
          {filteredTenders.map((tender) => (
            <div
              key={tender._id}
              className={`bg-white/10 backdrop-blur-xl rounded-xl border overflow-hidden hover:border-white/40 transition-all ${
                selectedTenders.has(tender._id) ? 'border-primary ring-2 ring-primary' : 'border-white/20'
              }`}
            >
              <div className="relative h-48 bg-white/5">
                {tender.imageUrl ? (
                  <img
                    src={normalizeImageUrl(tender.imageUrl)}
                    alt={tender.title}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-white/30">
                    No Image
                  </div>
                )}
                
                {bulkMode && (
                  <button
                    onClick={() => toggleSelection(tender._id)}
                    className="absolute top-3 left-3 p-2 bg-black/50 backdrop-blur-sm rounded-lg hover:bg-black/70 transition-all"
                  >
                    {selectedTenders.has(tender._id) ? (
                      <CheckSquare className="w-6 h-6 text-primary" />
                    ) : (
                      <Square className="w-6 h-6 text-white" />
                    )}
                  </button>
                )}

                <div className="absolute top-3 right-3 flex gap-2 flex-wrap">
                  {tender.isFeatured && (
                    <span className="px-2 py-1 bg-yellow-500 text-white text-xs font-medium rounded">
                      Featured
                    </span>
                  )}
                  {getStatusBadge(tender)}
                </div>
              </div>

              <div className="p-4">
                <h3 className="text-white font-semibold text-lg mb-2 line-clamp-2">
                  {tender.title}
                </h3>
                <p className="text-white/70 text-sm mb-2 font-mono">
                  {tender.tenderNumber}
                </p>
                <p className="text-white/70 text-sm mb-3 line-clamp-2">
                  {tender.description}
                </p>
                <div className="flex items-center justify-between text-xs text-white/50 mb-4">
                  <span>{tender.category}</span>
                  <span>Closes: {new Date(tender.closingDate).toLocaleDateString()}</span>
                </div>

                {!bulkMode && (
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => router.push(`/admin/tenders/${tender._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>
                    {isManager && (
                      <button
                        onClick={() => togglePublish(tender._id, tender.isPublished)}
                        className="p-2 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30 rounded-lg transition-all"
                      >
                        {tender.isPublished ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                      </button>
                    )}
                    <button
                      onClick={() => handleDelete(tender._id)}
                      className="p-2 bg-red-500/20 text-red-400 hover:bg-red-500/30 rounded-lg transition-all"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="bg-white/10 backdrop-blur-xl rounded-xl border border-white/20 overflow-hidden">
          <div className="divide-y divide-white/10">
            {filteredTenders.map((tender) => (
              <div
                key={tender._id}
                className={`p-4 hover:bg-white/5 transition-colors ${
                  selectedTenders.has(tender._id) ? 'bg-primary/10 border-l-4 border-l-primary' : ''
                }`}
              >
                <div className="flex items-start gap-4">
                  {bulkMode && (
                    <button
                      onClick={() => toggleSelection(tender._id)}
                      className="flex-shrink-0 p-2 hover:bg-white/10 rounded-lg transition-all"
                    >
                      {selectedTenders.has(tender._id) ? (
                        <CheckSquare className="w-5 h-5 text-primary" />
                      ) : (
                        <Square className="w-5 h-5 text-white/50" />
                      )}
                    </button>
                  )}

                  {tender.imageUrl && (
                    <div className="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden bg-white/5">
                      <img
                        src={normalizeImageUrl(tender.imageUrl)}
                        alt={tender.title}
                        className="w-full h-full object-cover"
                      />
                    </div>
                  )}

                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-3 mb-2">
                      <div className="flex-1">
                        <h3 className="text-white font-semibold text-lg line-clamp-1">
                          {tender.title}
                        </h3>
                        <p className="text-white/50 text-sm font-mono mt-1">
                          {tender.tenderNumber}
                        </p>
                      </div>
                      <div className="flex items-center gap-2 flex-shrink-0">
                        {tender.isFeatured && (
                          <span className="px-2 py-1 bg-yellow-500 text-white text-xs font-medium rounded">
                            Featured
                          </span>
                        )}
                        {getStatusBadge(tender)}
                      </div>
                    </div>
                    <p className="text-white/70 text-sm mb-3 line-clamp-2">
                      {tender.description}
                    </p>
                    <div className="flex items-center gap-4 text-xs text-white/50 mb-3">
                      <span className="capitalize">{tender.category}</span>
                      <span>Closes: {new Date(tender.closingDate).toLocaleDateString()}</span>
                      {tender.createdBy && (
                        <span>By {tender.createdBy.firstName} {tender.createdBy.lastName}</span>
                      )}
                    </div>

                    {!bulkMode && (
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => router.push(`/admin/tenders/${tender._id}`)}
                          className="flex items-center gap-2 px-3 py-1.5 text-blue-400 hover:bg-blue-500/20 rounded-lg transition-all text-sm"
                        >
                          <Edit className="w-4 h-4" />
                          Edit
                        </button>
                        {isManager && (
                          <button
                            onClick={() => togglePublish(tender._id, tender.isPublished)}
                            className="flex items-center gap-2 px-3 py-1.5 text-yellow-400 hover:bg-yellow-500/20 rounded-lg transition-all text-sm"
                          >
                            {tender.isPublished ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                            {tender.isPublished ? 'Unpublish' : 'Publish'}
                          </button>
                        )}
                        <button
                          onClick={() => handleDelete(tender._id)}
                          className="flex items-center gap-2 px-3 py-1.5 text-red-400 hover:bg-red-500/20 rounded-lg transition-all text-sm"
                        >
                          <Trash2 className="w-4 h-4" />
                          Delete
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {filteredTenders.length === 0 && (
        <div className="bg-white/10 backdrop-blur-xl rounded-xl p-12 text-center border border-white/20">
          <p className="text-white/50">No tenders found</p>
        </div>
      )}
    </div>
  )
}