'use client';

import { useState } from 'react';
import { AnimatedSection } from '@/components/animated-section';
import { Phone, Mail, MessageCircle, Clock, MapPin, Send, CheckCircle, AlertCircle } from 'lucide-react';
import { toast } from 'sonner';

export function ContactContent() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    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 ?? {};
    setFormData((prev: any) => ({ ...(prev ?? {}), [name ?? '']: value ?? '' }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e?.preventDefault?.();
    setIsSubmitting(true);

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      const result = await res?.json?.();

      if (res?.ok && result?.success) {
        setIsSubmitted(true);
        toast?.success?.('Message sent successfully! We will be in touch soon.');
        setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
      } else {
        toast?.error?.(result?.message ?? 'Something went wrong. Please try again.');
      }
    } catch (err: any) {
      console.error('Contact form error:', err);
      toast?.error?.('Failed to send message. Please try again later.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="pt-20 md:pt-24">
      {/* Hero */}
      <section className="py-16 md:py-24 bg-navy">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6 text-center">
          <AnimatedSection>
            <h1 className="font-display text-4xl md:text-5xl font-bold text-white tracking-tight mb-4">
              Get In <span className="text-gold">Touch</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              We are here to answer your questions and guide you towards the right investment opportunities.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Contact Info + Form */}
      <section className="py-16 md:py-24">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <div className="grid md:grid-cols-5 gap-8">
            {/* Contact Details */}
            <div className="md:col-span-2">
              <AnimatedSection direction="left">
                <div className="space-y-6">
                  <div>
                    <h2 className="font-display text-2xl font-bold tracking-tight mb-2">
                      Contact <span className="text-gold">Details</span>
                    </h2>
                    <p className="text-muted-foreground text-sm">Reach out through any of the channels below.</p>
                  </div>

                  <div className="space-y-4">
                    <a href="tel:07847587241" className="flex items-start gap-4 group">
                      <div className="w-10 h-10 bg-gold/15 rounded-full flex items-center justify-center flex-shrink-0 group-hover:bg-gold/25 transition-colors">
                        <Phone className="w-5 h-5 text-gold" />
                      </div>
                      <div>
                        <p className="font-medium text-sm">Phone</p>
                        <p className="text-muted-foreground text-sm">07847 587241</p>
                      </div>
                    </a>

                    <a href="mailto:info@TradeTheMarkets.co.uk" className="flex items-start gap-4 group">
                      <div className="w-10 h-10 bg-gold/15 rounded-full flex items-center justify-center flex-shrink-0 group-hover:bg-gold/25 transition-colors">
                        <Mail className="w-5 h-5 text-gold" />
                      </div>
                      <div>
                        <p className="font-medium text-sm">Email</p>
                        <p className="text-muted-foreground text-sm">info@TradeTheMarkets.co.uk</p>
                      </div>
                    </a>

                    <a href="https://wa.me/447847587241" target="_blank" rel="noopener noreferrer" className="flex items-start gap-4 group">
                      <div className="w-10 h-10 bg-gold/15 rounded-full flex items-center justify-center flex-shrink-0 group-hover:bg-gold/25 transition-colors">
                        <MessageCircle className="w-5 h-5 text-gold" />
                      </div>
                      <div>
                        <p className="font-medium text-sm">WhatsApp</p>
                        <p className="text-muted-foreground text-sm">+44 7847 587241</p>
                      </div>
                    </a>

                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 bg-gold/15 rounded-full flex items-center justify-center flex-shrink-0">
                        <Clock className="w-5 h-5 text-gold" />
                      </div>
                      <div>
                        <p className="font-medium text-sm">Business Hours</p>
                        <p className="text-muted-foreground text-sm">Mon - Fri: 9:00 AM - 6:00 PM</p>
                        <p className="text-muted-foreground text-sm">Sat: 09:00 AM - 1:00 PM</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 bg-gold/15 rounded-full flex items-center justify-center flex-shrink-0">
                        <MapPin className="w-5 h-5 text-gold" />
                      </div>
                      <div>
                        <p className="font-medium text-sm">Website</p>
                        <p className="text-muted-foreground text-sm">TradeTheMarkets.co.uk</p>
                      </div>
                    </div>
                  </div>
                </div>
              </AnimatedSection>
            </div>

            {/* Form */}
            <div className="md:col-span-3">
              <AnimatedSection direction="right" delay={0.2}>
                <div className="bg-card rounded-lg p-6 md:p-8" style={{ boxShadow: 'var(--shadow-lg)' }}>
                  {isSubmitted ?
                  <div className="text-center py-12">
                      <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
                      <h3 className="font-display text-2xl font-bold mb-2">Message Sent!</h3>
                      <p className="text-muted-foreground mb-6">Thank you for your enquiry. Our team will respond within 24 hours.</p>
                      <button
                      onClick={() => setIsSubmitted(false)}
                      className="bg-gold hover:bg-gold-light text-navy font-semibold px-6 py-3 rounded-md transition-all">
                      
                        Send Another Message
                      </button>
                    </div> :

                  <form onSubmit={handleSubmit} className="space-y-5">
                      <h3 className="font-display text-xl font-bold mb-1">Send Us a <span className="text-gold">Message</span></h3>
                      <p className="text-muted-foreground text-sm mb-4">Fill in the form and our team will get back to you shortly.</p>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium mb-1.5">Full Name *</label>
                          <input
                          type="text"
                          name="name"
                          required
                          value={formData?.name ?? ''}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-md bg-background border border-input text-sm focus:ring-2 focus:ring-gold/50 focus:border-gold outline-none transition-all"
                          placeholder="Your full name" />
                        
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-1.5">Email *</label>
                          <input
                          type="email"
                          name="email"
                          required
                          value={formData?.email ?? ''}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-md bg-background border border-input text-sm focus:ring-2 focus:ring-gold/50 focus:border-gold outline-none transition-all"
                          placeholder="your@email.com" />
                        
                        </div>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium mb-1.5">Phone</label>
                          <input
                          type="tel"
                          name="phone"
                          value={formData?.phone ?? ''}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-md bg-background border border-input text-sm focus:ring-2 focus:ring-gold/50 focus:border-gold outline-none transition-all"
                          placeholder="Your phone number" />
                        
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-1.5">Subject *</label>
                          <select
                          name="subject"
                          required
                          value={formData?.subject ?? ''}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-md bg-background border border-input text-sm focus:ring-2 focus:ring-gold/50 focus:border-gold outline-none transition-all">
                          
                            <option value="">Select a topic</option>
                            <option value="General Enquiry">General Enquiry</option>
                            <option value="Investment Information">Investment Information</option>
                            <option value="Portfolio Review">Portfolio Review</option>
                            <option value="Partnership">Partnership</option>
                            <option value="Other">Other</option>
                          </select>
                        </div>
                      </div>

                      <div>
                        <label className="block text-sm font-medium mb-1.5">Message *</label>
                        <textarea
                        name="message"
                        required
                        rows={5}
                        value={formData?.message ?? ''}
                        onChange={handleChange}
                        className="w-full px-4 py-3 rounded-md bg-background border border-input text-sm focus:ring-2 focus:ring-gold/50 focus:border-gold outline-none transition-all resize-none"
                        placeholder="Tell us about your investment goals..." />
                      
                      </div>

                      <div className="flex items-start gap-2 text-xs text-muted-foreground">
                        <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
                        <p>Your information is securely stored and will only be used to respond to your enquiry.</p>
                      </div>

                      <button
                      type="submit"
                      disabled={isSubmitting}
                      className="w-full flex items-center justify-center gap-2 bg-gold hover:bg-gold-light disabled:opacity-50 disabled:cursor-not-allowed text-navy font-semibold px-6 py-4 rounded-md transition-all duration-300 text-base">
                      
                        {isSubmitting ?
                      <span>Sending...</span> :

                      <>
                            <Send className="w-5 h-5" />
                            Send Message
                          </>
                      }
                      </button>
                    </form>
                  }
                </div>
              </AnimatedSection>
            </div>
          </div>
        </div>
      </section>
    </div>);

}