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 ContactUs() {
  const [formData, setFormData] = useState({
    studentName: '',
    parentName: '',
    phone: '',
    email: '',
    subject: 'Admission Inquiry',
    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.parentName || !formData.email || !formData.subject || !formData.message) {
      setStatus({ type: 'error', message: 'Please fill in all required fields.' });
      return;
    }

    setLoading(true);
    setStatus({ type: '', message: '' });

    // Format the payload to match backend schema: name, email, subject, message
    const payload = {
      name: `${formData.parentName} (Student: ${formData.studentName || 'N/A'}, Phone: ${formData.phone || 'N/A'})`,
      email: formData.email,
      subject: formData.subject,
      message: formData.message
    };

    try {
      const res = await axios.post('http://localhost:5000/api/contact', payload);
      setStatus({ type: 'success', message: res.data.message || 'Message sent successfully!' });
      setFormData({
        studentName: '',
        parentName: '',
        phone: '',
        email: '',
        subject: 'Admission Inquiry',
        message: ''
      });
    } catch (err) {
      console.error(err);
      setStatus({ 
        type: 'error', 
        message: err.response?.data?.message || 'Failed to send message. Please try again.' 
      });
    } finally {
      setLoading(false);
    }
  };

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

      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
        <span className="material-symbols-outlined absolute top-40 left-10 text-primary-container/30 text-6xl floating-element" data-icon="cloud">cloud</span>
        <span className="material-symbols-outlined absolute top-80 right-20 text-secondary-container/20 text-4xl floating-element" data-icon="star">star</span>
        <span className="material-symbols-outlined absolute bottom-40 left-1/4 text-primary-container/20 text-5xl floating-element" data-icon="cloud">cloud</span>
        <span className="material-symbols-outlined absolute top-1/4 left-1/2 text-tertiary-container/20 text-3xl floating-element" data-icon="star">star</span>
      </div>

      <main className="relative z-10">
        <section className="pt-0 pb-32 px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto text-center relative">
          <div className="mb-12 inline-block rounded-xl overflow-hidden shadow-2xl transform -rotate-1">
            <img className="w-full max-w-4xl h-auto rounded-xl object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvZfFA6BulpTwnSzfoNPzNRwPsCiIVkcx0SpFPd4773wC_jAG_3TQrTp-2cyWMsxWJgnJgF92PjrisZv9fcNGtZKkhcNsfBR3PGUiRK8MH2MD3V7fWYqy63_gb0g_T7Wv5x-YO_EOiv6BzhUCJ_CDXTT4Aog8nP2Fz9nIAdE4ovA7vgyM-YvuFS2K1CnMwvB5tgB59vnVvpjV66QOVAUSddqLYTBEgpcBf1LrQJa2wG7Pi0uYxEIa8qw" alt="Teachers and students" />
          </div>
          <h1 className="font-headline-xl text-headline-xl text-primary mb-4">Contact Us</h1>
          <p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">
            We're Here to Help You Begin Your Child's Learning Journey. Every question is a stepping stone to a bright future.
          </p>
        </section>

        <div className="w-full overflow-hidden leading-[0] transform translate-y-1">
          <svg className="relative block w-full h-24" data-name="Layer 1" preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
            <path className="fillSurface-container-low" fill="#f3f3f4" 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"></path>
          </svg>
        </div>

        <section className="bg-surface-container-low py-section-gap px-margin-mobile md:px-margin-desktop">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
              <div className="storybook-card bg-white p-8 rounded-xl shadow-sm text-center">
                <div className="w-16 h-16 bg-primary-container/20 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="material-symbols-outlined text-3xl">location_on</span>
                </div>
                <h3 className="font-headline-md text-headline-md mb-2">Our Campus</h3>
                <p className="text-on-surface-variant font-body-md">123 Scholastic Way,<br/>Academic Meadows, NY 10001</p>
              </div>

              <div className="storybook-card bg-white p-8 rounded-xl shadow-sm text-center">
                <div className="w-16 h-16 bg-secondary-container/20 text-secondary rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="material-symbols-outlined text-3xl">call</span>
                </div>
                <h3 className="font-headline-md text-headline-md mb-2">Call Us</h3>
                <p className="text-on-surface-variant font-body-md">+1 (555) 888-MAGIC<br/>+1 (555) 123-4567</p>
              </div>

              <div className="storybook-card bg-white p-8 rounded-xl shadow-sm text-center">
                <div className="w-16 h-16 bg-tertiary-container/20 text-tertiary rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="material-symbols-outlined text-3xl">mail</span>
                </div>
                <h3 className="font-headline-md text-headline-md mb-2">Email Us</h3>
                <p className="text-on-surface-variant font-body-md">hello@standrews.edu<br/>admissions@standrews.edu</p>
              </div>

              <div className="storybook-card bg-white p-8 rounded-xl shadow-sm text-center">
                <div className="w-16 h-16 bg-primary-container/20 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="material-symbols-outlined text-3xl">schedule</span>
                </div>
                <h3 className="font-headline-md text-headline-md mb-2">Office Hours</h3>
                <p className="text-on-surface-variant font-body-md">Mon - Fri: 8:00 AM - 4:00 PM<br/>Sat: 9:00 AM - 12:00 PM</p>
              </div>
            </div>
          </div>
        </section>

        <section id="contact-form" className="py-section-gap px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto">
          <div className="flex flex-col lg:flex-row gap-16 items-start">
            <div className="w-full lg:w-3/5 bg-white p-10 md:p-12 rounded-xl shadow-xl border border-outline-variant/20 relative overflow-hidden">
              <div className="absolute -top-10 -right-10 w-40 h-40 bg-primary-container/10 rounded-full blur-3xl"></div>
              <h2 className="font-headline-lg text-headline-lg text-primary mb-8">Send Us a Message</h2>
              
              <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {status.message && (
                  <div className={`md:col-span-2 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="space-y-2">
                  <label className="font-label-md text-label-md text-on-surface-variant px-2">Student Name</label>
                  <input 
                    name="studentName"
                    value={formData.studentName}
                    onChange={handleChange}
                    className="w-full px-6 py-4 rounded-full bg-surface-container-low border border-outline-variant/30 focus:ring-4 focus:ring-primary-container/50 transition-all font-body-md" 
                    placeholder="Enter student's name" 
                    type="text"
                  />
                </div>
                <div className="space-y-2">
                  <label className="font-label-md text-label-md text-on-surface-variant px-2">Parent/Guardian Name *</label>
                  <input 
                    name="parentName"
                    value={formData.parentName}
                    onChange={handleChange}
                    className="w-full px-6 py-4 rounded-full bg-surface-container-low border border-outline-variant/30 focus:ring-4 focus:ring-primary-container/50 transition-all font-body-md" 
                    placeholder="Enter parent's name" 
                    type="text"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <label className="font-label-md text-label-md text-on-surface-variant px-2">Phone Number</label>
                  <input 
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    className="w-full px-6 py-4 rounded-full bg-surface-container-low border border-outline-variant/30 focus:ring-4 focus:ring-primary-container/50 transition-all font-body-md" 
                    placeholder="+1 (555) 000-0000" 
                    type="tel"
                  />
                </div>
                <div className="space-y-2">
                  <label className="font-label-md text-label-md text-on-surface-variant px-2">Email Address *</label>
                  <input 
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    className="w-full px-6 py-4 rounded-full bg-surface-container-low border border-outline-variant/30 focus:ring-4 focus:ring-primary-container/50 transition-all font-body-md" 
                    placeholder="example@email.com" 
                    type="email"
                    required
                  />
                </div>
                <div className="md:col-span-2 space-y-2">
                  <label className="font-label-md text-label-md text-on-surface-variant px-2">Subject *</label>
                  <select 
                    name="subject"
                    value={formData.subject}
                    onChange={handleChange}
                    className="w-full px-6 py-4 rounded-full bg-surface-container-low border border-outline-variant/30 focus:ring-4 focus:ring-primary-container/50 transition-all font-body-md"
                  >
                    <option value="Admission Inquiry">Admission Inquiry</option>
                    <option value="Campus Tour Request">Campus Tour Request</option>
                    <option value="Academic Question">Academic Question</option>
                    <option value="Other">Other</option>
                  </select>
                </div>
                <div className="md:col-span-2 space-y-2">
                  <label className="font-label-md text-label-md text-on-surface-variant px-2">Your Message *</label>
                  <textarea 
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    className="w-full px-6 py-4 rounded-xl bg-surface-container-low border border-outline-variant/30 focus:ring-4 focus:ring-primary-container/50 transition-all font-body-md" 
                    placeholder="How can we help you today?" 
                    rows="4"
                    required
                  ></textarea>
                </div>
                <div className="md:col-span-2 pt-4">
                  <button 
                    disabled={loading}
                    className="w-full md:w-auto bg-primary text-on-primary px-12 py-4 rounded-full font-bold text-lg hover:scale-105 active:scale-95 transition-all shadow-lg disabled:opacity-50"
                    type="submit"
                  >
                    {loading ? 'Sending...' : 'Send Message'}
                  </button>
                </div>
              </form>
            </div>

            <div className="w-full lg:w-2/5 flex flex-col gap-8">
              <div className="bg-secondary-container/20 p-8 rounded-xl border border-secondary/10 relative overflow-hidden group">
                <div className="mb-6 rounded-lg overflow-hidden h-48">
                  <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDJPRG2tQE9GXo5rdfZ9eqESAFui4gERuIngb163s3IGqKVmtbcyY-pckytC3gLvUMWIn4tu7pAbq0sR_ADeT1-mGjDmVMh3oWjwjKjXl-zLkm8gV4d8MS_cTIETj-3MzSHmffHF9y-uhjnKGTS9WGy_bmHHeVKqRiHXLS2yvgs7hB-JZah9ndmqoGzdzk6C55vyH4fG7PacTpHBZxyg7_nQzOdy0g61a3teMF22ENTjt2PcbSZ-SjZNQ" alt="Campus Map Illustration" />
                </div>
                <h3 className="font-headline-md text-headline-md text-secondary mb-3">See Magic in Person</h3>
                <p className="text-on-surface-variant mb-6 font-body-md">Experience the warmth and wonder of St. Andrews Academy. Our guided tours offer a peek into our classrooms and community.</p>
                <a href="#contact-form" className="bg-secondary text-white px-8 py-3 rounded-full font-bold w-full block text-center hover:shadow-xl transition-all">Book a Campus Tour</a>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <a className="flex flex-col items-center justify-center p-6 bg-primary-container/10 rounded-xl hover:bg-primary-container/20 transition-all text-primary font-bold text-center" href="tel:+15551234567">
                  <span className="material-symbols-outlined text-3xl mb-2">phone_forwarded</span>
                  <span className="text-label-md">Call Now</span>
                </a>
                <a className="flex flex-col items-center justify-center p-6 bg-tertiary-container/10 rounded-xl hover:bg-tertiary-container/20 transition-all text-tertiary font-bold text-center" href="mailto:hello@standrews.edu">
                  <span className="material-symbols-outlined text-3xl mb-2">alternate_email</span>
                  <span className="text-label-md">Email Us</span>
                </a>
              </div>
            </div>
          </div>
        </section>

        <section className="py-section-gap px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
            <div className="space-y-8">
              <h2 className="font-headline-lg text-headline-lg text-primary">School Timings</h2>
              <div className="bg-white rounded-xl shadow-sm border border-outline-variant/30 overflow-hidden">
                <div className="grid grid-cols-2 bg-primary text-on-primary p-4">
                  <div className="font-bold">Category</div>
                  <div className="font-bold text-right">Hours</div>
                </div>
                <div className="divide-y divide-outline-variant/30">
                  <div className="grid grid-cols-2 p-4">
                    <div className="font-medium">Primary School</div>
                    <div className="text-right text-on-surface-variant">8:30 AM - 2:30 PM</div>
                  </div>
                  <div className="grid grid-cols-2 p-4">
                    <div className="font-medium">Pre-Primary (Early Years)</div>
                    <div className="text-right text-on-surface-variant">9:00 AM - 12:30 PM</div>
                  </div>
                  <div className="grid grid-cols-2 p-4">
                    <div className="font-medium">Middle School</div>
                    <div className="text-right text-on-surface-variant">8:00 AM - 3:30 PM</div>
                  </div>
                  <div className="grid grid-cols-2 p-4 bg-secondary-container/10">
                    <div className="font-medium text-secondary">Administrative Office</div>
                    <div className="text-right text-secondary-fixed-dim">8:00 AM - 4:00 PM</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="space-y-8">
              <h2 className="font-headline-lg text-headline-lg text-primary">Common Questions</h2>
              <div className="space-y-4">
                <details className="faq-item group bg-white rounded-xl border border-outline-variant/30 overflow-hidden shadow-sm transition-all" open>
                  <summary className="flex justify-between items-center p-6 cursor-pointer list-none">
                    <span className="font-bold text-on-surface">How do I start the admission process?</span>
                    <span className="faq-icon material-symbols-outlined transition-transform">expand_more</span>
                  </summary>
                  <div className="px-6 pb-6 text-on-surface-variant font-body-md">
                    You can begin by filling out our online inquiry form or visiting our campus for an initial interaction. We'll then schedule a tour and assessment for your child.
                  </div>
                </details>
                <details className="faq-item group bg-white rounded-xl border border-outline-variant/30 overflow-hidden shadow-sm transition-all">
                  <summary className="flex justify-between items-center p-6 cursor-pointer list-none">
                    <span className="font-bold text-on-surface">What are the school fees for the new session?</span>
                    <span className="faq-icon material-symbols-outlined transition-transform">expand_more</span>
                  </summary>
                  <div className="px-6 pb-6 text-on-surface-variant font-body-md">
                    Fee structures vary by grade level. Please contact our accounts office or download our prospectus from the Admissions page for a detailed breakdown.
                  </div>
                </details>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
