import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Textarea } from '../components/ui/textarea';
import { Checkbox } from '../components/ui/checkbox';
import { Mail, MapPin, Loader2 } from 'lucide-react';
import api from '../utils/api';
import { toast } from 'sonner';

const ContactUs = () => {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    subject: '',
    message: '',
    consent: false
  });
  const [loading, setLoading] = useState(false);

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

  const handleConsentChange = (checked) => {
    setFormData(prev => ({
      ...prev,
      consent: checked
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Validation
    if (!formData.firstName.trim()) {
      toast.error('Please enter your first name');
      return;
    }
    if (!formData.lastName.trim()) {
      toast.error('Please enter your last name');
      return;
    }
    if (!formData.email.trim()) {
      toast.error('Please enter your email');
      return;
    }
    if (!formData.subject.trim()) {
      toast.error('Please enter a subject');
      return;
    }
    if (!formData.message.trim()) {
      toast.error('Please enter your message');
      return;
    }
    if (!formData.consent) {
      toast.error('Please consent to LOAF storing your information');
      return;
    }

    setLoading(true);
    try {
      await api.post('/contact', {
        first_name: formData.firstName,
        last_name: formData.lastName,
        email: formData.email,
        subject: formData.subject,
        message: formData.message
      });

      toast.success('Message sent successfully! We\'ll get back to you soon.');

      // Reset form
      setFormData({
        firstName: '',
        lastName: '',
        email: '',
        subject: '',
        message: '',
        consent: false
      });
    } catch (error) {
      console.error('Failed to send message:', error);
      toast.error(error.response?.data?.detail || 'Failed to send message. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-white">
      <PublicNavbar />

      <main className="bg-gradient-to-b from-[#e8e0f5] to-[#f1eef9] px-6 py-16">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
            {/* Contact Form */}
            <Card className="p-8 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
              <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
                Contact Form
              </h1>

              <form onSubmit={handleSubmit} className="space-y-6">
                {/* First Name & Last Name */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="firstName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                      First Name <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      id="firstName"
                      name="firstName"
                      value={formData.firstName}
                      onChange={handleChange}
                      className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="lastName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                      Last Name <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      id="lastName"
                      name="lastName"
                      value={formData.lastName}
                      onChange={handleChange}
                      className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                      required
                    />
                  </div>
                </div>

                {/* Email */}
                <div>
                  <Label htmlFor="email" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Email <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={handleChange}
                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                    required
                  />
                </div>

                {/* Subject */}
                <div>
                  <Label htmlFor="subject" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Subject <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="subject"
                    name="subject"
                    value={formData.subject}
                    onChange={handleChange}
                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                    required
                  />
                </div>

                {/* Message */}
                <div>
                  <Label htmlFor="message" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Your Message <span className="text-red-500">*</span>
                  </Label>
                  <Textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                    required
                  />
                </div>

                {/* Consent Checkbox */}
                <div className="flex items-start gap-3">
                  <Checkbox
                    id="consent"
                    checked={formData.consent}
                    onCheckedChange={handleConsentChange}
                    className="mt-1 border-2 border-[#ddd8eb] data-[state=checked]:bg-[#664fa3] data-[state=checked]:border-[#664fa3]"
                  />
                  <Label htmlFor="consent" className="text-[#48286e] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
                  </Label>
                </div>

                {/* Submit Button */}
                <Button
                  type="submit"
                  disabled={loading}
                  className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
                  style={{ fontFamily: "'Inter', sans-serif" }}
                >
                  {loading ? (
                    <>
                      <Loader2 className="h-5 w-5 animate-spin mr-2" />
                      Sending...
                    </>
                  ) : (
                    'Submit'
                  )}
                </Button>
              </form>
            </Card>

            {/* Contact Information */}
            <div className="space-y-6">
              {/* Message Card */}
              <Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white">
                <p className="text-xl leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  If you have questions, or are interested in joining, we would love hearing from you.
                </p>
              </Card>

              {/* Email Card */}
              <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0">
                    <Mail className="h-6 w-6 text-[#664fa3]" />
                  </div>
                  <div>
                    <a
                      href="mailto:info@loaftx.org"
                      className="text-[#664fa3] text-xl font-semibold hover:text-[#48286e] transition-colors"
                      style={{ fontFamily: "'Inter', sans-serif" }}
                    >
                      info@loaftx.org
                    </a>
                  </div>
                </div>
              </Card>

              {/* Address Card */}
              <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0">
                    <MapPin className="h-6 w-6 text-[#664fa3]" />
                  </div>
                  <div>
                    <p className="text-[#48286e] text-lg font-semibold mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                      LOAF
                    </p>
                    <p className="text-[#664fa3] text-base leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                      P.O. Box 7207<br />
                      Houston, Texas 77248-7207
                    </p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </main>

      <PublicFooter />
    </div>
  );
};

export default ContactUs;