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

const MOCK_FACULTY = [
  // Leadership
  {
    _id: 'l1',
    name: 'Dr. Elena Sterling',
    designation: 'Principal',
    department: 'Leadership',
    qualification: 'PhD in Education & Child Development, 20+ Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAikQ2lfzBPUmlYQJla9mOHlnaoRpzRYz1VxyxhXeuO4LAeFoTVrga2hfM0gor87oNUMWuFayn44XZicOmP_JXPyafkrdXaSVNIJUnd6WY2LXbkHVKxb46M7mZnAcZUZwPQxwJK_5-2i372Aa32t2yKhOS1ZoBfsV42KVwQWx0SCJAY89yGq1oVtcTS1EMQwe07AoLWkQQqfA58_I1dhPjSwEJBUxwobyVIssZW8EQs-bweSKHZozhO_w'
  },
  {
    _id: 'l2',
    name: 'Marcus Thorne',
    designation: 'Vice Principal',
    department: 'Leadership',
    qualification: 'M.Ed in School Administration, 15+ Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuACZb6CsrTqIbEikDJeDExJXKDHImTeMg1Skmq6287dhLBe1hZt5skCXiE9OhQzDzOwpHFHR-78eoSh7L-BOleGjeC4k0d3_sSIXiEmwDQvScjEbI-65XIUgnwuRUyxHXxS76FUfpcYPnIKK9tGZj--txvrJKvPdDoF4zz0AkSopA_yUGpBnTd9uZRuaCLCkf2MqhuEZq0CDkZef5w9jB5w2T-nY_ZBP0uu1wJgloJWHECKqp9GqFVM4g'
  },
  {
    _id: 'l3',
    name: 'Sarah Chen',
    designation: 'Academic Coordinator',
    department: 'Leadership',
    qualification: 'M.A. in Curriculum Design, 10+ Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDYvf9WFPVOb2lJLNDQg0BICftLraBvpVg-T2ZpIhd3Hyz0fZP4ijT4DjHva8cmDDIy40Pt0CtxlOzFMwuWWXO2rCfiFCUNkBmKRLmJGrZdMDt53crtRmjTfHW6l37zkIqS-yzygWBAimfXEUuVh_Vlr3b4muIavHOid_iWj79EDyP_7RDk1zojZEj7kpM2cN3F1mVESRtvszO4P0Rv9kHXjktG8K7TiwIIkL1Ua43ydOP1U8gCDUhTLQ'
  },
  // Teachers
  {
    _id: 't1',
    name: 'Julian Vance',
    designation: 'Physics & Astronomy Teacher',
    department: 'Science',
    qualification: 'PhD in Astrophysics, 12 Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDBWIEO7Ehd4j87vO00nITn_Z3VfRGFozXySN6bfwiTvVvyzpoV6B2rqI2w1TgoXSCCdYqoraxHL0HpwtkeCql63tZj-OuEuAC76jWJNh1MPjwQbkDg5j_ONWZgXEu8oZvTaJA0BU3Gao_g-uy15lIHW66Q_taOJn68nInFUXEIop_u61QISsvNGZeJ1A9dzs4eMkx-5Rod-cgop6rEFvjnYQZdJpENWsxLVgUXAlFt2kBgw9DRvuJB8w'
  },
  {
    _id: 't2',
    name: 'Emily Woods',
    designation: 'English Literature Teacher',
    department: 'Languages',
    qualification: 'M.A. in English Lit, 8 Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDEonijCFb0qWS94RHVjMK6SImWpXt9TlPhhlOqplTXoBL1lYLmC9NVe7CvclbqRh6sEE9H4sfFdLLfq3Oj0KKHhUa-ga1IdyBj9c-RpQK0ZHQHVC1c1fYCZPQUUpdh7UGBdwKyehtDx96xecLobvQXaUUZyBcVOsIWuEz31e9csuqHAnxwsBRZk8aOlD2kyyrdRw4hwbXPQYinShJIskR-VXxkmnjosE3u-XHQruMK6O-G0l9o6m5uXQ'
  },
  {
    _id: 't3',
    name: 'Dr. Robert Kay',
    designation: 'Mathematics Specialist',
    department: 'Mathematics',
    qualification: 'PhD in Mathematics, 15 Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuB6eA_BvljFwelN5UdpYiJ5s2G2rrS_S4vmMzv2ilFA8O3bVljQd_TqlRfL1Pt-pO2iKsBRFWjZw3R4S_DgUcY6i8LfAODBBmTUFr9JSNscPlaWPFI-CtNR9LhcFTyGfmt7ecILut4EPhRl3O8mxCElOcqrCyjjrfxrKtrOWa2GlU7NB5298nB0z5CQLpWl3f8J3sKh1eEQDKbJ15Fpbf1-7EFTjOMJijBtWdlDtMBFr7tzblkr8f7Tdg'
  },
  {
    _id: 't4',
    name: 'Isabella Ross',
    designation: 'Creative Arts Director',
    department: 'Arts',
    qualification: 'MFA in Fine Arts, 9 Years Exp.',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDcUBfNZKbeZXvaqv4XOY5buqFQqMv7cFOKHS6qb-hZXdB9pCBuIO-kFsmTEzenjPxc2x8N9R7asp6FwHpd22sFBLiO0W6xlvZRLCLMucEbNlE3cJr7Iw-Fu8V0So4eU5BmnBnAXKZ41KQ4DCJgaCHOO0oL888BDJ-M77vAyLLOlXsjrqN-THJdbbv-rfZuvqffn9Cw_G_-D0-OdZQ1MyNZJxrZw2VuwNYzV_c4NhbMv_k7FrxyEH5QhQ'
  }
];

export default function Faculty() {
  const [faculty, setFaculty] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchFaculty();
  }, []);

  const fetchFaculty = async () => {
    try {
      setLoading(true);
      const res = await axios.get('http://localhost:5000/api/faculty');
      if (res.data && res.data.length > 0) {
        setFaculty(res.data);
      } else {
        setFaculty(MOCK_FACULTY);
      }
    } catch (err) {
      console.error("Failed to fetch faculty:", err);
      setFaculty(MOCK_FACULTY);
    } finally {
      setLoading(false);
    }
  };

  const leadershipTeam = faculty.filter(f => f.department === 'Leadership');
  const educators = faculty.filter(f => f.department !== 'Leadership');

  return (
    <div className="min-h-screen pt-16">
      <Navbar />

      <header className="relative pt-0 pb-32 px-4 md:px-8 overflow-hidden bg-surface-container/10">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12 relative z-10">
          <div className="md:w-1/2 text-center md:text-left">
            <h1 className="font-headline font-bold text-4xl md:text-5xl text-primary mb-6">Meet Our Faculty</h1>
            <p className="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
              Passionate Educators, Inspiring Future Leaders. Discover the brilliant minds shaping the wonders of tomorrow in our enchanted halls of learning.
            </p>
            <div className="mt-10 flex flex-wrap gap-4 justify-center md:justify-start">
              <a className="bg-primary text-on-primary px-8 py-4 rounded-full font-semibold hover:scale-105 transition-all shadow-xl shadow-primary/20 block text-center" href="#leadership">Explore Team</a>
              <a className="bg-secondary-container text-on-secondary-container px-8 py-4 rounded-full font-semibold hover:scale-105 transition-all shadow-lg shadow-secondary-container/30 block text-center" href="#philosophy">Our Philosophy</a>
            </div>
          </div>
          <div className="md:w-1/2 relative">
            <div className="absolute -top-10 -left-10 w-32 h-32 bg-secondary-container/30 rounded-full blur-3xl floating-element"></div>
            <div className="rounded-xl overflow-hidden shadow-2xl border-4 border-white transform rotate-2 hover:rotate-0 transition-transform duration-500">
              <img className="w-full h-auto object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqV4l8xmUOZk5-kyTOAgPe4_tXLO73jKFatfxwR9PwVcV_HfEmNVyy9xNLMGSkE-SINuHW1GtilbTHR7FRExCVCoia_DXSpMtL7R1mxSpuSuNvzHyDz050tAae6K-wxD7KJmm485q8VBB5tLqmFzy0DoWlVZSMzJcWr28tzgouduoMDu5NJXzMxnmVpiOXQ0QzHkWfRaFl0ushXSZga6BXj-Yscy9Y6dawYRS5Vs3eMWtNrH2wY7qsdw" alt="Creative teachers illustration" />
            </div>
            <div className="absolute -bottom-6 -right-6 w-40 h-40 bg-primary-container/20 rounded-full blur-3xl floating-element"></div>
          </div>
        </div>

        <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-0 transform translate-y-1">
          <svg className="relative block w-full h-24" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="#eeeeee"></path>
          </svg>
        </div>
      </header>

      {loading ? (
        <div className="text-center py-20 text-on-surface-variant">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p>Loading faculty records...</p>
        </div>
      ) : (
        <>
          {/* Leadership Section */}
          <section className="py-20 px-4 md:px-8 bg-surface-container" id="leadership">
            <div className="max-w-7xl mx-auto text-center mb-16">
              <span className="bg-primary/10 text-primary px-4 py-1.5 rounded-full font-semibold text-sm uppercase tracking-widest">Guidance</span>
              <h2 className="font-headline font-bold text-3xl text-on-background mt-4">The Leadership Team</h2>
            </div>
            
            {leadershipTeam.length === 0 ? (
              <p className="text-center text-on-surface-variant">No leadership records found.</p>
            ) : (
              <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
                {leadershipTeam.map((lead, index) => (
                  <div 
                    key={lead._id} 
                    className={`glass-card bg-white p-10 rounded-xl text-center border border-white/50 shadow-lg hover:shadow-2xl transition-all duration-300 group ${
                      index === 1 ? 'md:mt-8' : ''
                    }`}
                  >
                    <div className="w-48 h-48 mx-auto mb-8 rounded-full overflow-hidden border-8 border-primary-container/30 relative">
                      <img 
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" 
                        src={lead.image || "https://lh3.googleusercontent.com/aida-public/AB6AXuACZb6CsrTqIbEikDJeDExJXKDHImTeMg1Skmq6287dhLBe1hZt5skCXiE9OhQzDzOwpHFHR-78eoSh7L-BOleGjeC4k0d3_sSIXiEmwDQvScjEbI-65XIUgnwuRUyxHXxS76FUfpcYPnIKK9tGZj--txvrJKvPdDoF4zz0AkSopA_yUGpBnTd9uZRuaCLCkf2MqhuEZq0CDkZef5w9jB5w2T-nY_ZBP0uu1wJgloJWHECKqp9GqFVM4g"} 
                        alt={lead.name} 
                      />
                    </div>
                    <h3 className="font-headline font-bold text-2xl text-primary mb-1">{lead.name}</h3>
                    <p className="font-semibold text-sm text-secondary mb-4">{lead.designation}</p>
                    <p className="font-body-md text-body-md text-on-surface-variant">{lead.qualification}</p>
                  </div>
                ))}
              </div>
            )}
          </section>

          {/* Philosophy Section */}
          <section id="philosophy" className="py-20 bg-white px-4 md:px-8 border-y border-outline-variant/20">
            <div className="max-w-4xl mx-auto text-center space-y-6">
              <span className="bg-secondary-container text-on-secondary-container px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Educational Vision</span>
              <h2 className="font-headline font-bold text-3xl text-primary">Nurturing Wonder &amp; Creativity</h2>
              <p className="text-on-surface-variant text-body-lg leading-relaxed">
                We believe that education is not the filling of a bucket, but the lighting of a fire. Our faculty members act as guides, helpers, and partners in exploration, letting kids ask questions, make mistakes, and build their own path to discovery.
              </p>
            </div>
          </section>

          {/* Dedicated Educators Directory */}
          <section className="py-20 px-4 md:px-8 bg-surface relative overflow-hidden">
            <span className="material-symbols-outlined absolute top-20 left-10 text-primary-container/20 text-6xl floating-element">auto_awesome</span>
            <span className="material-symbols-outlined absolute bottom-20 right-10 text-secondary-container/20 text-7xl floating-element">star</span>
            
            <div className="max-w-7xl mx-auto">
              <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
                <div className="max-w-2xl">
                  <span className="bg-secondary-container/20 text-secondary px-4 py-1.5 rounded-full font-semibold text-xs uppercase tracking-widest">Staff Directory</span>
                  <h2 className="font-headline font-bold text-3xl text-on-background mt-4">Our Dedicated Educators</h2>
                  <p className="font-body-md text-body-md text-on-surface-variant mt-4">
                    Our teachers are mentors, innovators, and storytellers who believe every child has a unique gift to share with the world.
                  </p>
                </div>
              </div>

              {educators.length === 0 ? (
                <p className="text-center text-on-surface-variant">No faculty records found.</p>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                  {educators.map((edu) => (
                    <div key={edu._id} className="bg-white rounded-xl border border-surface-variant p-6 hover:shadow-xl shadow-sm transition-all duration-300 group flex flex-col h-full">
                      <div className="aspect-[4/5] rounded-xl overflow-hidden mb-6 bg-surface-container">
                        <img 
                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                          src={edu.image || "https://lh3.googleusercontent.com/aida-public/AB6AXuDBWIEO7Ehd4j87vO00nITn_Z3VfRGFozXySN6bfwiTvVvyzpoV6B2rqI2w1TgoXSCCdYqoraxHL0HpwtkeCql63tZj-OuEuAC76jWJNh1MPjwQbkDg5j_ONWZgXEu8oZvTaJA0BU3Gao_g-uy15lIHW66Q_taOJn68nInFUXEIop_u61QISsvNGZeJ1A9dzs4eMkx-5Rod-cgop6rEFvjnYQZdJpENWsxLVgUXAlFt2kBgw9DRvuJB8w"} 
                          alt={edu.name} 
                        />
                      </div>
                      <div className="space-y-2 flex-grow flex flex-col justify-between">
                        <div>
                          <h4 className="font-headline font-bold text-lg text-primary">{edu.name}</h4>
                          <p className="text-xs text-secondary font-semibold uppercase tracking-wider">{edu.designation} ({edu.department})</p>
                        </div>
                        <div className="pt-4 border-t border-surface-variant/50 flex items-center justify-between text-xs text-on-surface-variant">
                          <span>{edu.qualification}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </section>
        </>
      )}
      <Footer />
    </div>
  );
}
