import { useState, useEffect } from 'react';
import { Mail, Phone, MapPin, Clock, Send, CheckCircle2, MessageSquare, Building2, User, Globe, type LucideIcon } from 'lucide-react';
import PageHero from '@/components/PageHero';
import { Reveal, StaggerContainer, StaggerItem } from '@/components/ui/Animation';
import { supabase } from '@/lib/supabase';
import { services } from '@/data/content';

const budgets = ['Under $5K', '$5K – $15K', '$15K – $50K', '$50K+', 'Not sure yet'];
const contactTimes = ['Morning (9–12)', 'Afternoon (12–17)', 'Evening (17–20)', 'Anytime'];

const contactInfo = [
  { icon: Mail, label: 'Email', value: 'hello@queneva.com', href: 'mailto:hello@queneva.com' },
  { icon: Phone, label: 'Phone', value: '+91 90000 00000', href: 'tel:+919000000000' },
  { icon: MessageSquare, label: 'WhatsApp', value: '+91 90000 00000', href: 'https://wa.me/919000000000' },
  { icon: MapPin, label: 'Address', value: 'Pune, Maharashtra, India', href: '#' },
];

const hours = [
  { day: 'Monday – Friday', time: '9:00 AM – 7:00 PM IST' },
  { day: 'Saturday', time: '10:00 AM – 4:00 PM IST' },
  { day: 'Sunday', time: 'Closed' },
];

export default function Contact() {
  const [form, setForm] = useState({
    full_name: '', company_name: '', email: '', phone: '', city: '', country: '',
    service_required: '', budget: '', message: '', preferred_contact_time: '',
  });
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
  const [error, setError] = useState('');
  const [leadId, setLeadId] = useState('');
  const [ip, setIp] = useState('');

  useEffect(() => {
    // Best-effort IP capture (non-blocking; fails silently)
    fetch('https://api.ipify.org?format=json')
      .then((r) => r.json())
      .then((d) => setIp(d.ip || ''))
      .catch(() => setIp('unknown'));
  }, []);

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('submitting');
    setError('');

    try {
      // Generate a readable lead ID client-side (DB also has a unique constraint)
      const newLeadId = `LEAD-${Date.now().toString().slice(-6)}`;

      const payload = {
        lead_id: newLeadId,
        full_name: form.full_name,
        company_name: form.company_name || null,
        email: form.email,
        phone: form.phone || null,
        city: form.city || null,
        country: form.country || null,
        service_required: form.service_required || null,
        budget: form.budget || null,
        message: form.message || null,
        preferred_contact_time: form.preferred_contact_time || null,
        status: 'new' as const,
        priority: 'medium' as const,
        ip_address: ip || null,
        user_agent: navigator.userAgent || null,
      };

      const { error: insertError } = await supabase.from('leads').insert(payload);

      if (insertError) {
        if (insertError.code === '23505') {
          throw new Error('A submission with this email may already be in progress. Please refresh and try again.');
        }
        throw insertError;
      }

      setLeadId(newLeadId);
      setStatus('success');
      setForm({
        full_name: '', company_name: '', email: '', phone: '', city: '', country: '',
        service_required: '', budget: '', message: '', preferred_contact_time: '',
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong. Please email us directly at hello@queneva.com.');
      setStatus('error');
    }
  };

  if (status === 'success') {
    return (
      <div>
        <PageHero
          eyebrow="Contact"
          title={<>Thank you — we’ll be in <span className="gradient-text">touch soon</span></>}
          subtitle="Your message has reached our team. We’ll review it and respond within one business day."
          crumbs={[{ label: 'Home', to: '/' }, { label: 'Contact' }]}
        />
        <section className="container-wide section-padding py-16">
          <Reveal>
            <div className="mx-auto max-w-xl glass rounded-3xl p-10 text-center">
              <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-accent-500/15">
                <CheckCircle2 size={36} className="text-accent-500" />
              </div>
              <h2 className="mt-5 text-2xl font-bold">Submission received</h2>
              <p className="mt-3 text-sm text-primary-400 dark:text-gray-400">
                We’ve created a lead record for your inquiry. A confirmation email is on its way to you.
              </p>
              <div className="mt-6 rounded-2xl bg-secondary-500/10 p-4">
                <p className="text-xs uppercase tracking-wider text-primary-400 dark:text-gray-500">Your reference ID</p>
                <p className="mt-1 text-lg font-bold text-secondary-600 dark:text-accent-400">{leadId}</p>
              </div>
              <p className="mt-6 text-xs text-primary-400 dark:text-gray-500">
                Keep this ID handy — include it in any follow-up communication for faster service.
              </p>
              <button
                onClick={() => { setStatus('idle'); setLeadId(''); }}
                className="btn-secondary mt-6"
              >
                Send another message
              </button>
            </div>
          </Reveal>
        </section>
      </div>
    );
  }

  return (
    <div>
      <PageHero
        eyebrow="Contact"
        title={<>Let’s start a <span className="gradient-text">conversation</span></>}
        subtitle="Tell us about your project, your goals, or just say hello. We respond to every inquiry within one business day."
        crumbs={[{ label: 'Home', to: '/' }, { label: 'Contact' }]}
      />

      <section className="container-wide section-padding py-12">
        <div className="grid gap-10 lg:grid-cols-12">
          {/* Form */}
          <Reveal className="lg:col-span-7">
            <form onSubmit={handleSubmit} className="glass space-y-5 rounded-3xl p-8">
              <div className="grid gap-5 sm:grid-cols-2">
                <FormField icon={User} label="Full name" name="full_name" value={form.full_name} onChange={handleChange} required />
                <FormField icon={Building2} label="Company name" name="company_name" value={form.company_name} onChange={handleChange} />
              </div>
              <div className="grid gap-5 sm:grid-cols-2">
                <FormField icon={Mail} label="Email" name="email" type="email" value={form.email} onChange={handleChange} required />
                <FormField icon={Phone} label="Phone number" name="phone" type="tel" value={form.phone} onChange={handleChange} />
              </div>
              <div className="grid gap-5 sm:grid-cols-2">
                <FormField icon={MapPin} label="City" name="city" value={form.city} onChange={handleChange} />
                <FormField icon={Globe} label="Country" name="country" value={form.country} onChange={handleChange} />
              </div>
              <div className="grid gap-5 sm:grid-cols-2">
                <div>
                  <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Service required</label>
                  <select
                    name="service_required"
                    value={form.service_required}
                    onChange={handleChange}
                    className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                  >
                    <option value="">Select a service</option>
                    {services.map((s) => <option key={s.slug} value={s.title}>{s.title}</option>)}
                    <option value="Other">Other / Not sure</option>
                  </select>
                </div>
                <div>
                  <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Budget</label>
                  <select
                    name="budget"
                    value={form.budget}
                    onChange={handleChange}
                    className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                  >
                    <option value="">Select a range</option>
                    {budgets.map((b) => <option key={b} value={b}>{b}</option>)}
                  </select>
                </div>
              </div>
              <div>
                <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Preferred contact time</label>
                <div className="flex flex-wrap gap-2">
                  {contactTimes.map((t) => (
                    <button
                      key={t}
                      type="button"
                      onClick={() => setForm((f) => ({ ...f, preferred_contact_time: t }))}
                      className={`rounded-full px-4 py-2 text-xs font-medium transition-all ${
                        form.preferred_contact_time === t
                          ? 'bg-secondary-500 text-white'
                          : 'glass text-primary-600 hover:scale-105 dark:text-gray-300'
                      }`}
                    >
                      {t}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Message</label>
                <textarea
                  name="message"
                  value={form.message}
                  onChange={handleChange}
                  required
                  rows={5}
                  placeholder="Tell us about your project, timeline, and goals…"
                  className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                />
              </div>
              {status === 'error' && (
                <div className="rounded-xl bg-red-500/10 p-4 text-sm text-red-600 dark:text-red-400">{error}</div>
              )}
              <button type="submit" disabled={status === 'submitting'} className="btn-primary w-full disabled:opacity-60">
                {status === 'submitting' ? 'Sending…' : <>Send message <Send size={16} /></>}
              </button>
              <p className="text-center text-xs text-primary-400 dark:text-gray-500">
                By submitting, you agree to be contacted about your inquiry. We never share your data.
              </p>
            </form>
          </Reveal>

          {/* Info sidebar */}
          <div className="space-y-6 lg:col-span-5">
            <Reveal delay={0.1}>
              <div className="glass rounded-3xl p-7">
                <h3 className="text-lg font-bold">Contact details</h3>
                <div className="mt-5 space-y-4">
                  {contactInfo.map((c) => (
                    <a key={c.label} href={c.href} className="flex items-center gap-4 group">
                      <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-secondary-500/10 text-secondary-500 transition-all group-hover:bg-secondary-500 group-hover:text-white dark:text-accent-400 dark:group-hover:bg-accent-500">
                        <c.icon size={18} />
                      </div>
                      <div>
                        <p className="text-xs text-primary-400 dark:text-gray-500">{c.label}</p>
                        <p className="text-sm font-semibold text-primary-600 dark:text-gray-200">{c.value}</p>
                      </div>
                    </a>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={0.2}>
              <div className="glass rounded-3xl p-7">
                <div className="flex items-center gap-2">
                  <Clock size={18} className="text-secondary-500 dark:text-accent-400" />
                  <h3 className="text-lg font-bold">Business hours</h3>
                </div>
                <ul className="mt-5 space-y-3">
                  {hours.map((h) => (
                    <li key={h.day} className="flex items-center justify-between text-sm">
                      <span className="text-primary-500 dark:text-gray-300">{h.day}</span>
                      <span className={`font-medium ${h.time === 'Closed' ? 'text-red-400' : 'text-primary-600 dark:text-gray-200'}`}>{h.time}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>

            <Reveal delay={0.3}>
              <div className="overflow-hidden rounded-3xl glass">
                <iframe
                  title="Queneva location"
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d242117.62852461526!2d73.698044!3d18.524871!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2bf2e67461101%3A0x828d43bf9d921184!2sPune%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1700000000000"
                  width="100%"
                  height="220"
                  style={{ border: 0 }}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

function FormField({ icon: Icon, label, name, value, onChange, type = 'text', required }: {
  icon: LucideIcon;
  label: string; name: string; value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  type?: string; required?: boolean;
}) {
  return (
    <div>
      <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">{label}{required && ' *'}</label>
      <div className="relative">
        <Icon size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-primary-300 dark:text-gray-500" />
        <input
          type={type}
          name={name}
          value={value}
          onChange={onChange}
          required={required}
          className="w-full rounded-xl glass py-3 pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
        />
      </div>
    </div>
  );
}