'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { Calendar, ExternalLink } from 'lucide-react'
import { newsTickerApi, NewsTickerItem } from '@/lib/api'

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-ZA', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

export default function PublicNoticePage() {
  const [notices, setNotices] = useState<NewsTickerItem[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchNotices = async () => {
      try {
        // API already returns only active items, sorted by order then createdAt (descending)
        const items = await newsTickerApi.getAll()
        // The backend sorts by: order (ascending), then createdAt (descending)
        // So we just use the items as returned - they match what's shown in the news ticker
        setNotices(items)
      } catch (error) {
        console.error('Error fetching notices:', error)
        setNotices([])
      } finally {
        setIsLoading(false)
      }
    }

    fetchNotices()
  }, [])

  return (
    <div className="min-h-screen py-12 px-4">
      <div className="max-w-[900px] mx-auto">
        <div className="glass-page rounded-2xl p-8 md:p-12 shadow-2xl">
          {/* Header Section */}
          <div className="text-center mb-12">
            <div className="flex items-center justify-center gap-2 mb-4">
              <span className="text-primary text-2xl">★</span>
              <h1 className="text-primary text-2xl font-bold uppercase">MADIBENG</h1>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Public Notice</h2>
            <div className="w-24 h-1 bg-primary mx-auto"></div>
          </div>

          {/* Breadcrumb */}
          <div className="mb-8 text-white/70 text-sm">
            <Link href="/home" className="hover:text-primary transition-colors">Home</Link>
            <span className="mx-2">/</span>
            <span>Public Notice</span>
          </div>

          {/* Notices List */}
          {isLoading ? (
            <div className="text-center py-12 text-white/70">
              Loading notices...
            </div>
          ) : notices.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-white/70 text-lg mb-2">No public notices available at this time.</p>
              <p className="text-white/50 text-sm">Please check back later for updates.</p>
            </div>
          ) : (
            <div className="space-y-4">
              {notices.map((notice, index) => (
                <motion.div
                  key={notice._id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, delay: index * 0.05 }}
                  className="glass rounded-lg p-6 hover:bg-white/10 transition-all duration-300 glass-hover"
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-3">
                        <Calendar className="w-5 h-5 text-primary-light" />
                        <span className="text-white/70 text-sm">
                          {formatDate(notice.createdAt)}
                        </span>
                      </div>
                      <p className="text-white text-lg leading-relaxed">
                        {notice.text}
                      </p>
                    </div>
                    {notice.link && (
                      <a
                        href={notice.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 text-primary hover:text-primary-light transition-colors flex-shrink-0"
                      >
                        <ExternalLink className="w-5 h-5" />
                        <span className="text-sm font-medium">View Details</span>
                      </a>
                    )}
                  </div>
                </motion.div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}