'use client'

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { Calendar, FileText, Search, Tag, CheckCircle, Award, ArrowLeft } from 'lucide-react'
import Link from 'next/link'
import { tendersApi, Tender } from '@/lib/api'

const formatDate = (dateString: string | undefined) => {
  if (!dateString) return 'Date TBA'
  const date = new Date(dateString)
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
}

export default function TendersAwardedPage() {
  const [tenders, setTenders] = useState<Tender[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    const fetchAwardedTenders = async () => {
      try {
        const result = await tendersApi.getAwarded({ limit: 100 })
        setTenders(result.data)
      } catch (error) {
        console.error('Error fetching awarded tenders:', error)
        setTenders([])
      } finally {
        setIsLoading(false)
      }
    }

    fetchAwardedTenders()
  }, [])

  const filteredTenders = tenders.filter(tender => {
    const matchesSearch = 
      tender.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      tender.tenderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (tender as any).awardedTo?.toLowerCase().includes(searchTerm.toLowerCase())
    return matchesSearch
  })

  return (
    <div className="min-h-screen py-12 px-4">
      <div className="max-w-[1200px] mx-auto">
        <div className="glass-page rounded-2xl p-8 md:p-12 shadow-2xl">
          {/* Header Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mb-12"
          >
            <Link
              href="/tenders"
              className="inline-flex items-center gap-2 text-white/70 hover:text-white mb-6 transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              Back to Tenders
            </Link>
            <div className="flex items-center justify-center gap-3 mb-4">
              <Award className="w-8 h-8 text-primary-light" />
              <h1 className="text-4xl md:text-5xl font-bold text-white">Tenders Awarded</h1>
            </div>
            <p className="text-white/70 text-lg text-center mb-6">
              View tenders that have been awarded to successful bidders
            </p>
            <div className="w-24 h-1 bg-primary mx-auto"></div>
          </motion.div>

          {/* Search */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="mb-8"
          >
            <div className="relative">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/50" />
              <input
                type="text"
                placeholder="Search awarded tenders..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-12 pr-4 py-3 glass rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary"
              />
            </div>
          </motion.div>

          {/* Tenders List */}
          {isLoading ? (
            <div className="text-center py-12">
              <div className="text-white/70">Loading awarded tenders...</div>
            </div>
          ) : filteredTenders.length === 0 ? (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="text-center py-12"
            >
              <Award className="w-16 h-16 text-white/30 mx-auto mb-4" />
              <p className="text-white/60 text-lg">No awarded tenders found</p>
              <p className="text-white/40 text-sm mt-2">
                {searchTerm
                  ? 'Try adjusting your search terms.'
                  : 'No tenders have been awarded yet.'}
              </p>
            </motion.div>
          ) : (
            <div className="grid grid-cols-1 gap-6">
              {filteredTenders.map((tender, index) => {
                const awardedTender = tender as any
                
                return (
                  <motion.div
                    key={tender._id}
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    whileHover={{ y: -8, scale: 1.02 }}
                    className="glass rounded-xl p-6 shadow-xl glass-hover border-2 border-white/10 hover:border-green-500/30 transition-all duration-300"
                  >
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0">
                        <div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
                          <CheckCircle className="w-6 h-6 text-green-400" />
                        </div>
                      </div>
                      <div className="flex-1">
                        {/* Tender Number */}
                        <div className="flex items-center gap-2 mb-2">
                          <Tag className="w-4 h-4 text-primary-light" />
                          <span className="text-primary-light font-semibold text-sm">
                            {tender.tenderNumber}
                          </span>
                          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-green-500/20 text-green-300 border border-green-500/30">
                            AWARDED
                          </span>
                        </div>

                        {/* Title */}
                        <h3 className="text-2xl font-bold text-white mb-3 hover:text-primary-light transition-colors">
                          {tender.title}
                        </h3>

                        {/* Description */}
                        <p className="text-white/70 text-sm mb-4">
                          {tender.description}
                        </p>

                        {/* Award Details */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                          {awardedTender.awardedTo && (
                            <div>
                              <span className="text-white/50 text-xs uppercase">Awarded To:</span>
                              <p className="text-white font-semibold">{awardedTender.awardedTo}</p>
                            </div>
                          )}
                          {awardedTender.awardedAt && (
                            <div>
                              <span className="text-white/50 text-xs uppercase">Awarded Date:</span>
                              <p className="text-white font-semibold">{formatDate(awardedTender.awardedAt)}</p>
                            </div>
                          )}
                          {awardedTender.awardedAmount && (
                            <div>
                              <span className="text-white/50 text-xs uppercase">Awarded Amount:</span>
                              <p className="text-white font-semibold">
                                R {awardedTender.awardedAmount.toLocaleString()}
                              </p>
                            </div>
                          )}
                          {tender.category && (
                            <div>
                              <span className="text-white/50 text-xs uppercase">Category:</span>
                              <p className="text-white font-semibold">{tender.category}</p>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </motion.div>
                )
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}