import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Downloads() {
  const [downloads, setDownloads] = useState([]);
  const [loading, setLoading] = useState(true);
  const [category, setCategory] = useState('All');

  useEffect(() => {
    const fetchDownloads = async () => {
      try {
        const res = await axios.get('http://localhost:5000/api/downloads');
        setDownloads(res.data);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    fetchDownloads();
  }, []);

  const filtered = category === 'All' ? downloads : downloads.filter(d => d.category === category);

  return (
    <div className="min-h-screen bg-background font-sans flex flex-col justify-between">
      <div>
        <Navbar />
        
        {/* Banner Section */}
        <div className="relative bg-primary/5 py-20 px-6 text-center border-b border-primary/10 mt-16 overflow-hidden">
          <div className="absolute inset-0 bg-radial-gradient from-primary/10 to-transparent pointer-events-none" />
          <div className="max-w-3xl mx-auto relative z-10 space-y-4">
            <span className="material-symbols-outlined text-[64px] text-primary animate-float">cloud_download</span>
            <h1 className="text-4xl md:text-5xl font-headline font-bold text-primary">Circulars &amp; Syllabus Downloads</h1>
            <p className="text-on-surface-variant max-w-xl mx-auto font-medium text-sm md:text-base">
              Access educational structures, school term schedules, syllabus sheets, and parent registration slips.
            </p>
          </div>
        </div>

        <main className="max-w-7xl mx-auto px-6 py-12">
          {/* Category Filters */}
          <div className="flex justify-center gap-3 mb-12">
            {['All', 'Circular', 'Syllabus', 'Form'].map((cat) => (
              <button
                key={cat}
                onClick={() => setCategory(cat)}
                className={`px-6 py-2.5 rounded-full font-headline font-bold text-xs md:text-sm shadow-md transition-all cursor-pointer ${
                  category === cat 
                    ? 'bg-primary text-white scale-105 shadow-primary/20' 
                    : 'bg-white text-on-surface-variant hover:bg-gray-50 border border-outline-variant/30'
                }`}
              >
                {cat === 'All' ? 'All Documents' : `${cat}s`}
              </button>
            ))}
          </div>

          {loading ? (
            <div className="text-center py-20">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
              <p className="text-on-surface-variant mt-4 font-semibold">Loading documents list...</p>
            </div>
          ) : filtered.length === 0 ? (
            <div className="text-center py-20 max-w-md mx-auto">
              <span className="material-symbols-outlined text-gray-300 text-[80px] mb-4">folder_open</span>
              <p className="text-on-surface-variant font-medium">No documents published in this category yet.</p>
            </div>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filtered.map((item) => (
                <div 
                  key={item._id} 
                  className="glass-card p-6 rounded-2xl bg-white/40 border border-outline/50 flex flex-col justify-between hover:scale-[1.02] hover:-translate-y-1 transition-all duration-300 shadow-lg shadow-black/5"
                >
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary mb-4">
                      <span className="material-symbols-outlined text-2xl">description</span>
                    </div>
                    <h3 className="text-lg font-headline font-bold text-primary mb-2 line-clamp-2" title={item.title}>
                      {item.title}
                    </h3>
                    <span className="inline-flex items-center px-3 py-1 bg-secondary-container/20 text-secondary border border-secondary/15 rounded-full text-[10px] font-bold uppercase tracking-wider">
                      {item.category}
                    </span>
                  </div>
                  <div className="mt-8 pt-4 border-t border-outline-variant/20 flex justify-between items-center">
                    <span className="text-xs text-on-surface-variant font-bold">
                      {new Date(item.date).toLocaleDateString()}
                    </span>
                    <a
                      href={item.fileUrl}
                      download={item.title}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-1.5 bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-full text-xs font-bold transition-all shadow-md shadow-primary/15"
                    >
                      <span className="material-symbols-outlined text-sm">download</span>
                      Download File
                    </a>
                  </div>
                </div>
              ))}
            </div>
          )}
        </main>
      </div>
      <Footer />
    </div>
  );
}
