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

export default function Admissions() {
  const [formData, setFormData] = useState({
    studentName: '',
    parentName: '',
    email: '',
    phone: '',
    grade: 'Nursery',
    message: ''
  });
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState({ type: '', message: '' });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.studentName || !formData.parentName || !formData.email || !formData.phone) {
      setStatus({ type: 'error', message: 'Please fill in all required fields.' });
      return;
    }

    setLoading(true);
    setStatus({ type: '', message: '' });
    try {
      const res = await axios.post('http://localhost:5000/api/admissions', formData);
      setStatus({ type: 'success', message: res.data.message || 'Inquiry submitted successfully!' });
      setFormData({
        studentName: '',
        parentName: '',
        email: '',
        phone: '',
        grade: 'Nursery',
        message: ''
      });
    } catch (err) {
      console.error(err);
      setStatus({ 
        type: 'error', 
        message: err.response?.data?.message || 'Failed to submit inquiry. Please try again.' 
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen pt-16">
      <Navbar />
      <main className="pt-0">
        
        <section className="relative px-margin-mobile md:px-margin-desktop py-section-gap overflow-hidden">
          <div className="grid md:grid-cols-2 gap-gutter items-center relative z-10">
            <div className="space-y-6">
              <span className="bg-secondary-container text-on-secondary-container px-4 py-1.5 rounded-full font-label-md text-label-sm uppercase tracking-wider">Join Our Family</span>
              <h1 className="font-headline-xl text-headline-xl text-primary leading-tight">Admissions Open</h1>
              <p className="font-body-lg text-body-lg text-on-surface-variant max-w-lg">
                Start Your Child's Journey Toward a Bright Future. At St. Andrews Academy, we blend academic rigor with the magic of discovery.
              </p>
              <div className="flex flex-wrap gap-4 pt-4">
                <a href="#inquiry-form" className="bg-primary text-on-primary px-8 py-4 rounded-full font-headline-md text-label-md hover:scale-105 transition-transform shadow-lg shadow-primary/20 block text-center">Apply Now</a>
                <button className="bg-surface border-2 border-primary-container text-primary px-8 py-4 rounded-full font-headline-md text-label-md hover:bg-primary-container/10 transition-colors">Download Brochure</button>
              </div>
            </div>
            <div className="relative">
              <div className="absolute -top-12 -right-12 w-64 h-64 bg-primary-container/30 rounded-full blur-3xl animate-pulse"></div>
              <div className="absolute bottom-0 -left-12 w-48 h-48 bg-secondary-container/20 rounded-full blur-2xl"></div>
              <div className="rounded-xl overflow-hidden shadow-2xl floating">
                <img className="w-full h-[500px] object-cover" data-alt="A magical, vibrant school campus." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDwoZ30p0c19nwzyxKnhqrGTNOEkk8Ic_8OrD7Ykc_hhSxwpKjkEwkVIXm11P54xrpuS2m7CjBPODvv_zV8YAMX10pqKVS9eRw7O7x6cbmdPOloySVSaU5PsnCuM9opy056uGNBqqktZXj9HThDFmFJl_fFpQI6y5th78n0N8k-taZxO6K7HRXpRskBN7X2D1eCB9Uy_ulRAc3f4HjPrZ281eCoWbr5kFtb1TPQixqvCZotwg8qnIkbIA" alt="Campus entrance" />
              </div>
            </div>
          </div>
        </section>

        <div className="w-full h-24 bg-primary-container" style={{"clipPath":"polygon(0 100%, 100% 100%, 100% 0, 85% 30%, 70% 10%, 50% 50%, 30% 10%, 15% 40%, 0 0)"}}></div>

        <section className="bg-primary-container py-section-gap px-margin-mobile md:px-margin-desktop">
          <div className="text-center mb-16">
            <h2 className="font-headline-lg text-headline-lg text-on-primary-container mb-4">Your Path to Stellar Learning</h2>
            <div className="h-1.5 w-24 bg-secondary mx-auto rounded-full"></div>
          </div>
          <div className="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
            <div className="hidden md:block absolute top-1/2 left-0 w-full h-1 bg-on-primary-container/20 -translate-y-1/2 -z-0"></div>
            <div className="relative z-10 flex flex-col items-center text-center group">
              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform mb-4">
                <span className="material-symbols-outlined text-primary text-3xl">mail</span>
              </div>
              <h3 className="font-headline-md text-on-primary-container">Submit Inquiry</h3>
              <p className="text-label-sm text-on-primary-container/80 mt-2">Start the conversation</p>
            </div>
            <div className="relative z-10 flex flex-col items-center text-center group">
              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform mb-4">
                <span className="material-symbols-outlined text-primary text-3xl">edit_document</span>
              </div>
              <h3 className="font-headline-md text-on-primary-container">Fill Application</h3>
              <p className="text-label-sm text-on-primary-container/80 mt-2">Share your details</p>
            </div>
            <div className="relative z-10 flex flex-col items-center text-center group">
              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform mb-4">
                <span className="material-symbols-outlined text-primary text-3xl">verified</span>
              </div>
              <h3 className="font-headline-md text-on-primary-container">Verification</h3>
              <p className="text-label-sm text-on-primary-container/80 mt-2">Document review</p>
            </div>
            <div className="relative z-10 flex flex-col items-center text-center group">
              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform mb-4">
                <span className="material-symbols-outlined text-primary text-3xl">groups</span>
              </div>
              <h3 className="font-headline-md text-on-primary-container">Interaction</h3>
              <p className="text-label-sm text-on-primary-container/80 mt-2">Meet our teachers</p>
            </div>
            <div className="relative z-10 flex flex-col items-center text-center group">
              <div className="w-16 h-16 bg-secondary-container rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform mb-4">
                <span className="material-symbols-outlined text-on-secondary-container text-3xl">celebration</span>
              </div>
              <h3 className="font-headline-md text-on-primary-container">Confirmation</h3>
              <p className="text-label-sm text-on-primary-container/80 mt-2">Welcome aboard!</p>
            </div>
          </div>
        </section>

        <section className="py-section-gap px-margin-mobile md:px-margin-desktop bg-surface">
          <div className="mb-12">
            <h2 className="font-headline-lg text-headline-lg text-primary">Eligibility Criteria</h2>
            <p className="text-on-surface-variant font-body-md mt-2">Find the right program for your child's age group.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="p-8 bg-white rounded-xl shadow-sm hover:shadow-xl transition-all border border-outline-variant/30">
              <div className="w-12 h-12 bg-primary-container/20 rounded-lg flex items-center justify-center mb-6">
                <span className="material-symbols-outlined text-primary">child_care</span>
              </div>
              <h4 className="font-headline-md mb-4 text-primary">Pre-Primary</h4>
              <p className="text-on-surface-variant mb-6">Ages 3 to 5 years. Focus on sensory play, social interaction, and early literacy through magical storytelling.</p>
              <ul className="space-y-2 font-label-md text-label-md text-on-surface">
                <li className="flex items-center gap-2"><span className="material-symbols-outlined text-primary text-sm">check_circle</span> Nursery: 3+ years</li>
                <li className="flex items-center gap-2"><span className="material-symbols-outlined text-primary text-sm">check_circle</span> KG: 4+ years</li>
              </ul>
            </div>
            <div className="p-8 bg-white rounded-xl shadow-sm hover:shadow-xl transition-all border border-outline-variant/30 scale-105 ring-2 ring-primary-container">
              <div className="w-12 h-12 bg-primary-container/20 rounded-lg flex items-center justify-center mb-6">
                <span className="material-symbols-outlined text-primary">school</span>
              </div>
              <h4 className="font-headline-md mb-4 text-primary">Primary</h4>
              <p className="text-on-surface-variant mb-6">Grades 1 to 5. Comprehensive curriculum focusing on core subjects and creative exploration.</p>
              <ul className="space-y-2 font-label-md text-label-md text-on-surface">
                <li className="flex items-center gap-2"><span className="material-symbols-outlined text-primary text-sm">check_circle</span> Grade 1: 6+ years</li>
                <li className="flex items-center gap-2"><span className="material-symbols-outlined text-primary text-sm">check_circle</span> Grade 5: 10+ years</li>
              </ul>
            </div>
            <div className="p-8 bg-white rounded-xl shadow-sm hover:shadow-xl transition-all border border-outline-variant/30">
              <div className="w-12 h-12 bg-primary-container/20 rounded-lg flex items-center justify-center mb-6">
                <span className="material-symbols-outlined text-primary">history_edu</span>
              </div>
              <h4 className="font-headline-md mb-4 text-primary">Senior Secondary</h4>
              <p className="text-on-surface-variant mb-6">Grades 6 to 12. Advanced learning, competitive preparation, and specialized career pathways.</p>
              <ul className="space-y-2 font-label-md text-label-md text-on-surface">
                <li className="flex items-center gap-2"><span className="material-symbols-outlined text-primary text-sm">check_circle</span> Diverse Stream Options</li>
                <li className="flex items-center gap-2"><span className="material-symbols-outlined text-primary text-sm">check_circle</span> Mentorship Focused</li>
              </ul>
            </div>
          </div>
        </section>

        <section className="py-section-gap px-margin-mobile md:px-margin-desktop bg-white overflow-hidden relative">
          <div className="grid lg:grid-cols-2 gap-16 items-start">
            <div>
              <h2 className="font-headline-lg text-headline-lg text-primary mb-8">Required Documents</h2>
              <div className="grid sm:grid-cols-2 gap-4">
                <div className="flex items-center gap-4 p-4 rounded-lg bg-surface border border-outline-variant/20">
                  <span className="material-symbols-outlined text-tertiary">badge</span>
                  <span className="font-label-md text-label-md">Birth Certificate</span>
                </div>
                <div className="flex items-center gap-4 p-4 rounded-lg bg-surface border border-outline-variant/20">
                  <span className="material-symbols-outlined text-tertiary">description</span>
                  <span className="font-label-md text-label-md">Past Report Cards</span>
                </div>
                <div className="flex items-center gap-4 p-4 rounded-lg bg-surface border border-outline-variant/20">
                  <span className="material-symbols-outlined text-tertiary">swap_horiz</span>
                  <span className="font-label-md text-label-md">Transfer Certificate</span>
                </div>
                <div className="flex items-center gap-4 p-4 rounded-lg bg-surface border border-outline-variant/20">
                  <span className="material-symbols-outlined text-tertiary">photo_camera</span>
                  <span className="font-label-md text-label-md">Recent Photos</span>
                </div>
                <div className="flex items-center gap-4 p-4 rounded-lg bg-surface border border-outline-variant/20">
                  <span className="material-symbols-outlined text-tertiary">fingerprint</span>
                  <span className="font-label-md text-label-md">Parents' ID Proof</span>
                </div>
                <div className="flex items-center gap-4 p-4 rounded-lg bg-surface border border-outline-variant/20">
                  <span className="material-symbols-outlined text-tertiary">home</span>
                  <span className="font-label-md text-label-md">Address Proof</span>
                </div>
              </div>
            </div>

            <div className="bg-primary-container/10 p-8 rounded-xl border-2 border-primary-container/30">
              <h2 className="font-headline-lg text-headline-lg text-primary mb-6">Investment in Growth</h2>
              <div className="space-y-4 mb-8">
                <div className="flex justify-between items-center pb-4 border-b border-primary-container/20">
                  <span className="font-label-md">Admission Fee (One-time)</span>
                  <span className="font-headline-md text-primary">$500</span>
                </div>
                <div className="flex justify-between items-center pb-4 border-b border-primary-container/20">
                  <span className="font-label-md">Monthly Tuition (Average)</span>
                  <span className="font-headline-md text-primary">$150 - $250</span>
                </div>
              </div>
              <div className="bg-white p-4 rounded-lg text-on-surface-variant text-body-md italic border-l-4 border-secondary">
                "For a detailed grade-wise fee structure, please visit the administrative office or call us directly."
              </div>
            </div>
          </div>
        </section>

        <section id="inquiry-form" className="py-section-gap px-margin-mobile md:px-margin-desktop relative">
          <div className="absolute inset-0 bg-primary-container/10 -skew-y-3 origin-left -z-10"></div>
          <div className="max-w-5xl mx-auto grid lg:grid-cols-5 gap-12 items-center">
            <div className="lg:col-span-2 space-y-4">
              <h2 className="font-headline-lg text-headline-lg text-primary">Inquiry Form</h2>
              <p className="text-on-surface-variant">Have questions? Fill out the form and our admissions counselor will get in touch within 24 hours.</p>
              <div className="flex items-center gap-4 text-primary font-bold">
                <span className="material-symbols-outlined">call</span>
                <span>+1 (555) 123-4567</span>
              </div>
            </div>
            <div className="lg:col-span-3 bg-white p-8 rounded-xl shadow-xl border border-outline-variant/20">
              <form onSubmit={handleSubmit} className="space-y-6">
                {status.message && (
                  <div className={`p-4 rounded-lg font-semibold text-center ${
                    status.type === 'success' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                  }`}>
                    {status.message}
                  </div>
                )}
                
                <div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-label-sm mb-2 font-bold text-on-surface-variant">Student Name *</label>
                    <input 
                      name="studentName"
                      value={formData.studentName}
                      onChange={handleChange}
                      className="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-4 focus:ring-primary-container/50" 
                      placeholder="John Doe" 
                      type="text"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-label-sm mb-2 font-bold text-on-surface-variant">Parent/Guardian Name *</label>
                    <input 
                      name="parentName"
                      value={formData.parentName}
                      onChange={handleChange}
                      className="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-4 focus:ring-primary-container/50" 
                      placeholder="Jane Doe" 
                      type="text"
                      required
                    />
                  </div>
                </div>

                <div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-label-sm mb-2 font-bold text-on-surface-variant">Phone Number *</label>
                    <input 
                      name="phone"
                      value={formData.phone}
                      onChange={handleChange}
                      className="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-4 focus:ring-primary-container/50" 
                      placeholder="+1 000 0000" 
                      type="tel"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-label-sm mb-2 font-bold text-on-surface-variant">Email Address *</label>
                    <input 
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      className="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-4 focus:ring-primary-container/50" 
                      placeholder="email@example.com" 
                      type="email"
                      required
                    />
                  </div>
                </div>

                <div className="grid sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-label-sm mb-2 font-bold text-on-surface-variant">Class Applied For *</label>
                    <select 
                      name="grade"
                      value={formData.grade}
                      onChange={handleChange}
                      className="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-4 focus:ring-primary-container/50"
                    >
                      <option value="Nursery">Nursery</option>
                      <option value="Kindergarten">Kindergarten</option>
                      <option value="Grade 1-5">Grade 1-5</option>
                      <option value="Grade 6-12">Grade 6-12</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-label-sm mb-2 font-bold text-on-surface-variant">Message</label>
                  <textarea 
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    className="w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface-container-low focus:ring-4 focus:ring-primary-container/50" 
                    placeholder="Any specific questions for us?" 
                    rows="4"
                  ></textarea>
                </div>
                
                <button 
                  disabled={loading}
                  className="w-full bg-primary text-on-primary py-4 rounded-full font-headline-md text-label-md shadow-lg hover:scale-[1.02] active:scale-95 transition-transform disabled:opacity-50 disabled:cursor-not-allowed" 
                  type="submit"
                >
                  {loading ? 'Submitting...' : 'Send Inquiry'}
                </button>
              </form>
            </div>
          </div>
        </section>

        <section className="py-section-gap px-margin-mobile md:px-margin-desktop text-center bg-white relative overflow-hidden">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[120%] h-full bg-primary-container/20 rounded-[100%] blur-3xl opacity-50"></div>
          <div className="relative z-10">
            <h2 className="font-headline-xl text-headline-xl text-primary mb-6">Admissions Are Now Open!</h2>
            <p className="text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10">Don't miss the chance to give your child a stellar education. Applications for the 2024-25 session close soon.</p>
            <div className="flex flex-wrap justify-center gap-4">
              <a href="#inquiry-form" className="bg-primary text-on-primary px-10 py-5 rounded-full font-headline-md text-label-md hover:scale-105 transition-all shadow-xl inner-glow block text-center">Apply Today</a>
              <a href="#inquiry-form" className="bg-secondary text-on-secondary px-10 py-5 rounded-full font-headline-md text-label-md hover:scale-105 transition-all shadow-xl block text-center">Contact Admissions</a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
