"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { 
  Mail, 
  Phone, 
  MapPin, 
  Send, 
  Instagram, 
  Linkedin, 
  MessageSquare,
  Clock,
  CheckCircle
} from "lucide-react";

import Link from "next/link";

const contactMethods = [
  {
    icon: Mail,
    label: "Email",
    value: "artsplash@sjec.ac.in",
    href: "mailto:artsplash@sjec.ac.in",
    description: "Best for detailed inquiries",
  },
  {
    icon: Phone,
    label: "Phone",
    value: "+91 98765 43210",
    href: "tel:+919876543210",
    description: "Mon-Fri, 10AM-5PM",
  },
  {
    icon: MapPin,
    label: "Location",
    value: "SJEC, Mangalore",
    href: "https://maps.google.com/?q=St+Joseph+Engineering+College+Mangalore",
    description: "Visit us on campus",
  },
];

const socialLinks = [
  {
    icon: Instagram,
    label: "Instagram",
    href: "https://instagram.com/sceptix_sjec",
    username: "@sceptix_sjec",
  },
  {
    icon: Linkedin,
    label: "LinkedIn",
    href: "https://linkedin.com/company/sceptix-sjec",
    username: "Sceptix SJEC",
  },
];

const departments = [
  "General Inquiry",
  "Registration Help",
  "Technical Support",
  "Submission Issues",
  "Voting Questions",
  "Partnership & Sponsorship",
  "Other",
];

export default function ContactPage() {
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    department: "",
    subject: "",
    message: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormState((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500));
    
    setIsSubmitting(false);
    setIsSubmitted(true);
  };

  if (isSubmitted) {
    return (
      <main className="min-h-screen bg-black pt-32 pb-20 flex items-center">
        <div className="max-w-xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.5 }}
          >
            <div className="w-20 h-20 rounded-full bg-lime-400 flex items-center justify-center mx-auto mb-6">
              <CheckCircle className="w-10 h-10 text-black" />
            </div>
            <h1 className="text-3xl sm:text-4xl font-black text-white mb-4">
              Message Sent!
            </h1>
            <p className="text-zinc-400 text-lg mb-8">
              Thank you for reaching out. We'll get back to you within 24-48 hours.
            </p>
            <Link
              href="/"
              className="inline-flex items-center justify-center bg-zinc-900 border border-zinc-800 text-white px-6 py-3 rounded-xl font-semibold hover:border-zinc-700 transition-colors"
            >
              Back to Home
            </Link>
          </motion.div>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-black pt-32 pb-20">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
            CONTACT
          </span>
          <h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white mb-4">
            Get in <span className="text-lime-400">Touch</span>
          </h1>
          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
            Have a question about ArtSplash? We're here to help. Reach out to us 
            through any of the channels below.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-5 gap-8 lg:gap-12">
          {/* Contact Info Column */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="lg:col-span-2 space-y-6"
          >
            {/* Contact Methods */}
            <div className="space-y-4">
              {contactMethods.map((method, index) => (
                <a
                  key={method.label}
                  href={method.href}
                  target={method.label === "Location" ? "_blank" : undefined}
                  rel={method.label === "Location" ? "noopener noreferrer" : undefined}
                  className="block bg-zinc-900 border border-zinc-800 rounded-xl p-5 hover:border-zinc-700 transition-colors group"
                >
                  <div className="flex items-start gap-4">
                    <div className="p-3 bg-lime-400/10 rounded-lg group-hover:bg-lime-400/20 transition-colors">
                      <method.icon className="w-6 h-6 text-lime-400" />
                    </div>
                    <div>
                      <p className="text-zinc-500 text-sm mb-1">{method.label}</p>
                      <p className="text-white font-semibold">{method.value}</p>
                      <p className="text-zinc-500 text-sm mt-1">{method.description}</p>
                    </div>
                  </div>
                </a>
              ))}
            </div>

            {/* Response Time */}
            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
              <div className="flex items-center gap-3 mb-3">
                <div className="p-2 bg-lime-400/10 rounded-lg">
                  <Clock className="w-5 h-5 text-lime-400" />
                </div>
                <h3 className="text-white font-semibold">Response Time</h3>
              </div>
              <p className="text-zinc-400 text-sm">
                We typically respond within <span className="text-lime-400 font-semibold">24-48 hours</span> on 
                business days. For urgent issues during the competition, we'll prioritize your query.
              </p>
            </div>

            {/* Social Links */}
            <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
              <h3 className="text-white font-semibold mb-4">Follow Us</h3>
              <div className="flex gap-3">
                {socialLinks.map((social) => (
                  <a
                    key={social.label}
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-2 bg-zinc-800 text-zinc-300 px-4 py-3 rounded-xl hover:bg-zinc-700 hover:text-white transition-colors"
                  >
                    <social.icon className="w-5 h-5" />
                    <span className="text-sm font-medium">{social.username}</span>
                  </a>
                ))}
              </div>
            </div>
          </motion.div>

          {/* Contact Form */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="lg:col-span-3"
          >
            <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 sm:p-8">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-2 bg-lime-400/10 rounded-lg">
                  <MessageSquare className="w-5 h-5 text-lime-400" />
                </div>
                <h2 className="text-xl font-bold text-white">Send us a Message</h2>
              </div>

              <form onSubmit={handleSubmit} className="space-y-5">
                {/* Name & Email Row */}
                <div className="grid sm:grid-cols-2 gap-5">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-zinc-300 mb-2">
                      Your Name <span className="text-lime-400">*</span>
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formState.name}
                      onChange={handleChange}
                      required
                      placeholder="John Doe"
                      className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-zinc-300 mb-2">
                      Email Address <span className="text-lime-400">*</span>
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formState.email}
                      onChange={handleChange}
                      required
                      placeholder="john@example.com"
                      className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
                    />
                  </div>
                </div>

                {/* Department & Subject Row */}
                <div className="grid sm:grid-cols-2 gap-5">
                  <div>
                    <label htmlFor="department" className="block text-sm font-medium text-zinc-300 mb-2">
                      Topic <span className="text-lime-400">*</span>
                    </label>
                    <div className="relative">
                      <select
                        id="department"
                        name="department"
                        value={formState.department}
                        onChange={handleChange}
                        required
                        className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white appearance-none focus:outline-none focus:border-lime-400 transition-colors cursor-pointer"
                      >
                        <option value="">Select a topic</option>
                        {departments.map((dept) => (
                          <option key={dept} value={dept}>{dept}</option>
                        ))}
                      </select>
                      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                        <svg className="w-5 h-5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div>
                    <label htmlFor="subject" className="block text-sm font-medium text-zinc-300 mb-2">
                      Subject <span className="text-lime-400">*</span>
                    </label>
                    <input
                      type="text"
                      id="subject"
                      name="subject"
                      value={formState.subject}
                      onChange={handleChange}
                      required
                      placeholder="Brief subject"
                      className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
                    />
                  </div>
                </div>

                {/* Message */}
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-zinc-300 mb-2">
                    Your Message <span className="text-lime-400">*</span>
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    value={formState.message}
                    onChange={handleChange}
                    required
                    rows={5}
                    maxLength={1000}
                    placeholder="Describe your question or issue in detail..."
                    className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors resize-none"
                  />
                  <p className="text-zinc-500 text-sm mt-2">
                    {formState.message.length}/1000 characters
                  </p>
                </div>

                {/* Submit Button */}
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-xl font-bold transition-all ${
                    isSubmitting
                      ? "bg-zinc-700 text-zinc-400 cursor-not-allowed"
                      : "bg-lime-400 text-black hover:bg-lime-300"
                  }`}
                >
                  {isSubmitting ? (
                    <>
                      <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                      Sending...
                    </>
                  ) : (
                    <>
                      <Send className="w-5 h-5" />
                      Send Message
                    </>
                  )}
                </button>
              </form>
            </div>
          </motion.div>
        </div>
      </div>
    </main>
  );
}