'use client';

import { Suspense, useState } from 'react';
import { useSearchParams } from 'next/navigation';

function ContactForm() {
  const searchParams = useSearchParams();
  const artworkEnquiry = searchParams.get('artwork');

  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    subject: artworkEnquiry ? 'purchase' : '',
    message: artworkEnquiry ? `I am interested in the artwork "${artworkEnquiry}".` : '',
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: Implement form submission (e.g., via API route or email service)
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="text-center px-4 py-20">
          <h1 className="font-serif text-3xl">Thank You</h1>
          <p className="mt-4 text-gray-600">
            Your message has been sent. I&apos;ll be in touch soon.
          </p>
          <a href="/" className="mt-8 inline-block text-sm underline underline-offset-4 hover:no-underline">
            Return Home
          </a>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white pt-24">
      {/* Header */}
      <div className="border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <h1 className="font-serif text-4xl md:text-5xl">Contact</h1>
          <p className="mt-4 text-gray-600">
            I&apos;d love to hear from you
          </p>
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-4 py-12">
        <div className="grid gap-16 lg:grid-cols-2">
          {/* Contact Form */}
          <div>
            <h2 className="text-lg font-medium uppercase tracking-wider mb-6">
              Send a Message
            </h2>

            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid gap-6 sm:grid-cols-2">
                <div>
                  <label htmlFor="firstName" className="block text-sm text-gray-600 mb-2">
                    First Name
                  </label>
                  <input
                    type="text"
                    id="firstName"
                    required
                    value={formData.firstName}
                    onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
                    className="w-full border border-gray-300 px-4 py-3 text-sm focus:border-gray-900 focus:outline-none"
                  />
                </div>
                <div>
                  <label htmlFor="lastName" className="block text-sm text-gray-600 mb-2">
                    Last Name
                  </label>
                  <input
                    type="text"
                    id="lastName"
                    required
                    value={formData.lastName}
                    onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
                    className="w-full border border-gray-300 px-4 py-3 text-sm focus:border-gray-900 focus:outline-none"
                  />
                </div>
              </div>

              <div>
                <label htmlFor="email" className="block text-sm text-gray-600 mb-2">
                  Email
                </label>
                <input
                  type="email"
                  id="email"
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="w-full border border-gray-300 px-4 py-3 text-sm focus:border-gray-900 focus:outline-none"
                />
              </div>

              <div>
                <label htmlFor="subject" className="block text-sm text-gray-600 mb-2">
                  Subject
                </label>
                <select
                  id="subject"
                  required
                  value={formData.subject}
                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                  className="w-full border border-gray-300 px-4 py-3 text-sm focus:border-gray-900 focus:outline-none bg-white"
                >
                  <option value="">Select a subject</option>
                  <option value="purchase">Artwork Enquiry</option>
                  <option value="commission">Commission Request</option>
                  <option value="session">Sessions / Workshops</option>
                  <option value="iyos">In Your Own Skin</option>
                  <option value="press">Press / Media</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div>
                <label htmlFor="message" className="block text-sm text-gray-600 mb-2">
                  Message
                </label>
                <textarea
                  id="message"
                  rows={6}
                  required
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  className="w-full border border-gray-300 px-4 py-3 text-sm focus:border-gray-900 focus:outline-none resize-none"
                />
              </div>

              <button type="submit" className="w-full btn btn-primary py-4">
                Send Message
              </button>
            </form>
          </div>

          {/* Contact Info */}
          <div className="lg:pl-8">
            <h2 className="text-lg font-medium uppercase tracking-wider mb-6">
              Get in Touch
            </h2>

            <div className="space-y-8">
              <div>
                <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Email</h3>
                <a
                  href="mailto:post@ktrenshaw.com"
                  className="mt-2 block text-gray-900 hover:underline"
                >
                  post@ktrenshaw.com
                </a>
              </div>

              <div>
                <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Studio</h3>
                <p className="mt-2 text-gray-900">By appointment only</p>
              </div>

              <div>
                <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Response Time</h3>
                <p className="mt-2 text-gray-900">Usually within 2-3 business days</p>
              </div>
            </div>

            {/* Social */}
            <div className="mt-12 pt-8 border-t border-gray-200">
              <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Follow</h3>
              <div className="mt-4 flex gap-4">
                <a
                  href="https://instagram.com/katheryn_trenshaw"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-600 hover:text-gray-900"
                >
                  Instagram
                </a>
                <a
                  href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-600 hover:text-gray-900"
                >
                  YouTube
                </a>
                <a
                  href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-600 hover:text-gray-900"
                >
                  Facebook
                </a>
              </div>
            </div>

            {/* Commission note */}
            <div className="mt-12 p-6 bg-gray-50">
              <h3 className="font-serif text-lg">Interested in a Commission?</h3>
              <p className="mt-2 text-sm text-gray-600">
                Commission work is available for private collectors and businesses.
                Each commission is a unique collaboration. Please include details
                about your vision, preferred size, and any specific requirements.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function ContactPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="animate-pulse text-gray-400">Loading...</div>
      </div>
    }>
      <ContactForm />
    </Suspense>
  );
}
