"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Calendar, Clock, User, Search, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const categories = [
  "All",
  "AI & Education",
  "Coding",
  "Robotics",
  "Teacher Tips",
  "Industry News",
  "Tutorials",
]

const articles = [
  {
    id: 1,
    title: "The Future of AI in African Education: Opportunities and Challenges",
    excerpt:
      "Artificial Intelligence is revolutionizing education across the globe, and Africa is no exception. We explore how AI-powered tools are transforming learning experiences.",
    image: "/articles/first-robot-guide.jpg", // ✅ FIXED: Removed "/public" prefix
    author: "Dr. Thabo Molefe",
    date: "May 28, 2025",
    readTime: "8 min read",
    category: "AI & Education",
    slug: "future-of-ai-african-education",
    featured: true,
  },
  {
    id: 2,
    title: "Getting Started with Python: A Beginner's Guide for Young Coders",
    excerpt:
      "Python is one of the most beginner-friendly programming languages. This comprehensive guide will help young learners take their first steps into the world of coding.",
    image: "/articles/python.jpg",
    author: "Sarah Nkosi",
    date: "May 21, 2025",
    readTime: "12 min read",
    category: "Tutorials",
    slug: "getting-started-python-beginners",
    featured: false,
  },
  {
    id: 3,
    title: "Building Your First Robot: A Step-by-Step Guide",
    excerpt:
      "Robotics combines creativity with engineering. Learn how to build a simple robot using Arduino and basic components in this hands-on tutorial.",
    image: "/articles/first-robot-guide.jpg",
    author: "James Mokoena",
    date: "May 14, 2025",
    readTime: "15 min read",
    category: "Robotics",
    slug: "building-first-robot-guide",
    featured: false,
  },
  {
    id: 4,
    title: "5 Ways Teachers Can Integrate Coding into Any Subject",
    excerpt:
      "Coding isn't just for computer science class. Discover creative ways to incorporate programming concepts into math, science, art, and even language classes.",
    image: "/articles/code.jpg",
    author: "Dr. Palesa Dlamini",
    date: "May 7, 2025",
    readTime: "6 min read",
    category: "Teacher Tips",
    slug: "integrate-coding-any-subject",
    featured: false,
  },
  {
    id: 5,
    title: "The Rise of EdTech Startups in Southern Africa",
    excerpt:
      "The education technology sector in Southern Africa is booming. We look at the innovative startups that are changing how students learn.",
    image: "/articles/startups.jpg",
    author: "Michael van der Berg",
    date: "April 30, 2025",
    readTime: "10 min read",
    category: "Industry News",
    slug: "edtech-startups-southern-africa",
    featured: false,
  },
]

export default function ArticlesPage() {
  const [selectedCategory, setSelectedCategory] = useState("All")
  const [searchQuery, setSearchQuery] = useState("")

  const filteredArticles = articles.filter((article) => {
    const matchesCategory =
      selectedCategory === "All" || article.category === selectedCategory
    const matchesSearch =
      article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      article.excerpt.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesCategory && matchesSearch
  })

  const featuredArticle = articles.find((article) => article.featured)

  return (
    <main className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-bcc-blue to-bcc-blue/90 py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <span className="inline-block px-4 py-2 bg-bcc-orange/20 text-bcc-gold rounded-full text-sm font-semibold mb-6">
              Beyond Bytes
            </span>
            <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
              Weekly Insights & Articles
            </h1>
            <p className="text-lg text-white/80 mb-8">
              Explore our collection of articles, tutorials, and insights on coding, robotics,
              AI, and education technology. Written by our team of experts and educators.
            </p>

            {/* Search Bar - Fixed & Restored */}
            <div className="relative max-w-xl mx-auto">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
              <Input
                type="text"
                placeholder="Search articles..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full h-14 pl-12 pr-4 bg-white border-0 text-slate-900 placeholder:text-slate-400 rounded-xl shadow-md focus-visible:ring-2 focus-visible:ring-bcc-orange"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Category Filter */}
      <section className="py-8 border-b border-slate-200 sticky top-0 bg-white z-40 shadow-sm">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap justify-center gap-3">
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                  selectedCategory === category
                    ? "bg-bcc-blue text-white"
                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Featured Article Layout */}
      {featuredArticle && selectedCategory === "All" && !searchQuery && (
        <section className="py-12 bg-slate-50">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-bold text-bcc-blue mb-8">Featured Article</h2>
            <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
              <div className="grid md:grid-cols-2 gap-0">
                <div className="relative h-64 md:h-full min-h-[350px]">
                  <Image
                    src={featuredArticle.image}
                    alt={featuredArticle.title}
                    fill
                    priority
                    className="object-cover"
                  />
                </div>
                <div className="p-8 md:p-12 flex flex-col justify-center">
                  <span className="inline-block px-3 py-1 bg-teal-50 text-teal-600 text-sm font-medium rounded-full w-fit mb-4">
                    {featuredArticle.category}
                  </span>
                  <h3 className="text-2xl md:text-3xl font-bold text-bcc-blue mb-4">
                    {featuredArticle.title}
                  </h3>
                  <p className="text-slate-600 mb-6">{featuredArticle.excerpt}</p>
                  <div className="flex flex-wrap items-center gap-4 text-sm text-slate-500 mb-6">
                    <span className="flex items-center gap-1">
                      <User className="w-4 h-4" />
                      {featuredArticle.author}
                    </span>
                    <span className="flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      {featuredArticle.date}
                    </span>
                    <span className="flex items-center gap-1">
                      <Clock className="w-4 h-4" />
                      {featuredArticle.readTime}
                    </span>
                  </div>
                  <Link 
                    href={`/articles/${featuredArticle.slug}`}
                    onClick={(e) => e.preventDefault()} //  Prevents Next.js router from pushing a new URL
                    className="pointer-events-none" //  Disables mouse interactions/hover effects on the wrapper
                  >
                    <Button 
                      disabled //  Native HTML property to disable button state
                      className="bg-bcc-orange/50 text-white/70 w-fit cursor-not-allowed select-none" //  Muted colors and inactive cursor style
                    >
                      Read Full Article
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Articles Grid Layout */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl font-bold text-bcc-blue">
              {selectedCategory === "All" ? "All Articles" : selectedCategory}
            </h2>
            <span className="text-slate-500">
              {filteredArticles.length} article{filteredArticles.length !== 1 ? "s" : ""}
            </span>
          </div>

          {filteredArticles.length === 0 ? (
            <div className="text-center py-16">
              <p className="text-slate-500 text-lg">No articles found matching your criteria.</p>
              <Button
                onClick={() => {
                  setSelectedCategory("All")
                  setSearchQuery("")
                }}
                variant="outline"
                className="mt-4"
              >
                Clear Filters
              </Button>
            </div>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredArticles
                .filter((article) => !article.featured || selectedCategory !== "All" || searchQuery)
                .map((article) => (
                  <article
                    key={article.id}
                    className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group flex flex-col h-full"
                  >
                    <div className="relative h-48 overflow-hidden">
                      <Image
                        src={article.image}
                        alt={article.title}
                        fill
                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                        className="object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                      <div className="absolute top-4 left-4">
                        <span className="px-3 py-1 bg-bcc-blue/90 text-white text-xs font-medium rounded-full">
                          {article.category}
                        </span>
                      </div>
                    </div>
                    <div className="p-6 flex flex-col flex-1 justify-between">
                      <div>
                        <h3 className="text-lg font-bold text-bcc-blue mb-3 line-clamp-2 group-hover:text-bcc-orange transition-colors">
                          {article.title}
                        </h3>
                        <p className="text-slate-600 text-sm mb-4 line-clamp-2">{article.excerpt}</p>
                      </div>
                      
                      <div>
                        <div className="flex items-center justify-between text-xs text-slate-500 mb-4">
                          <span className="flex items-center gap-1">
                            <User className="w-3 h-3" />
                            {article.author}
                          </span>
                          <span className="flex items-center gap-1">
                            <Clock className="w-3 h-3" />
                            {article.readTime}
                          </span>
                        </div>
                        <div className="flex items-center justify-between pt-2 border-t border-slate-100">
                          <span className="text-xs text-slate-400">{article.date}</span>
                          <Link
                            href={`/articles/${article.slug}`}
                            onClick={(e) => e.preventDefault()} 
                            className="text-slate-400 font-medium text-sm flex items-center gap-1 pointer-events-none cursor-not-allowed select-none" // Muted colors and disabled interactions
                          >
                            Read More
                            <ArrowRight className="w-4 h-4" />
                          </Link>
                        </div>
                      </div>
                    </div>
                  </article>
                ))}
            </div>
          )}
        </div>
      </section>

      {/* Newsletter CTA */}
      <section className="py-16 bg-bcc-blue">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto text-center">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
              Never Miss an Article
            </h2>
            <p className="text-white/80 mb-8">
              Subscribe to our newsletter and get the latest insights delivered to your inbox
              every week.
            </p>
            <form onSubmit={(e) => e.preventDefault()} className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
              <Input
                type="email"
                placeholder="Enter your email"
                className="flex-1 h-12 bg-white border-0 text-slate-950 placeholder:text-slate-400"
              />
              <Button type="submit" className="h-12 px-8 bg-bcc-orange hover:bg-bcc-orange/90 text-white transition-colors">
                Subscribe
              </Button>
            </form>
          </div>
        </div>
      </section>
    </main>
  )
}