'use client'

import { useState } from 'react'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { api } from '@/lib/api'
import { Mail, MessageSquare, Clock, Send, Loader2, CheckCircle, MapPin, Building, AlertCircle } from 'lucide-react'
import Link from 'next/link'

const contactMethods = [
  {
    icon: Mail,
    title: 'Email',
    description: 'Questions? Ideas? Issues?',
    value: 'hello@pounce.ch',
    href: 'mailto:hello@pounce.ch',
  },
  {
    icon: MessageSquare,
    title: 'Live Chat',
    description: 'Mon-Fri, 9am-6pm CET',
    value: 'Start a conversation',
    href: '#',
  },
  {
    icon: Clock,
    title: 'Response Time',
    description: 'We reply fast.',
    value: '< 24 hours',
    href: null,
  },
]

const faqs = [
  {
    q: 'Forgot my password?',
    a: 'Hit "Forgot Password" on login. Check your email. Done.',
  },
  {
    q: 'Can I upgrade mid-cycle?',
    a: 'Yes. Pay the difference. New features unlock instantly.',
  },
  {
    q: 'Refunds?',
    a: '14-day money-back. No questions. No hassle.',
  },
]

export default function ContactPage() {
  const [formState, setFormState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
  const [error, setError] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: '',
  })

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setFormState('loading')
    setError(null)
    
    try {
      await api.submitContact(
        formData.name,
        formData.email,
        formData.subject,
        formData.message
      )
      setFormState('success')
      
      // Reset after showing success
      setTimeout(() => {
        setFormState('idle')
        setFormData({ name: '', email: '', subject: '', message: '' })
      }, 5000)
    } catch (err: any) {
      setFormState('error')
      setError(err.message || 'Failed to send message. Please try again.')
    }
  }

  return (
    <div className="min-h-screen bg-background relative flex flex-col">
      {/* Ambient glow */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 left-1/3 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-5xl mx-auto">
          {/* Hero */}
          <div className="text-center mb-12 sm:mb-16 animate-fade-in">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
              <Mail className="w-4 h-4 text-accent" />
              <span className="text-ui-sm text-foreground-muted">Get in Touch</span>
            </div>
            <h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
              Let&apos;s Talk
            </h1>
            <p className="text-body-lg text-foreground-muted max-w-xl mx-auto">
              Question? Idea? Problem? We&apos;re listening.
            </p>
          </div>

          {/* Contact Methods */}
          <div className="grid sm:grid-cols-3 gap-4 mb-12 animate-slide-up">
            {contactMethods.map((method) => (
              <div
                key={method.title}
                className="p-6 bg-background-secondary/50 border border-border rounded-xl"
              >
                <div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4">
                  <method.icon className="w-5 h-5 text-accent" />
                </div>
                <h3 className="text-body font-medium text-foreground mb-1">{method.title}</h3>
                <p className="text-body-sm text-foreground-muted mb-3">{method.description}</p>
                {method.href ? (
                  <a
                    href={method.href}
                    className="text-body-sm text-accent hover:text-accent-hover transition-colors"
                  >
                    {method.value}
                  </a>
                ) : (
                  <span className="text-body-sm text-foreground font-medium">{method.value}</span>
                )}
              </div>
            ))}
          </div>

          <div className="grid lg:grid-cols-2 gap-8 lg:gap-12">
            {/* Contact Form */}
            <div className="animate-slide-up">
              <h2 className="text-heading-sm font-medium text-foreground mb-6">Send us a message</h2>
              
              {formState === 'success' ? (
                <div className="p-8 bg-accent-muted border border-accent/20 rounded-2xl text-center">
                  <div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <CheckCircle className="w-6 h-6 text-accent" />
                  </div>
                  <h3 className="text-body-lg font-medium text-foreground mb-2">Message Sent!</h3>
                  <p className="text-body-sm text-foreground-muted">
                    We've sent you a confirmation email. We'll get back to you within 24 hours.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  {formState === 'error' && error && (
                    <div className="p-4 bg-danger/10 border border-danger/20 rounded-xl flex items-center gap-3">
                      <AlertCircle className="w-5 h-5 text-danger flex-shrink-0" />
                      <p className="text-body-sm text-danger">{error}</p>
                    </div>
                  )}
                  <div className="grid sm:grid-cols-2 gap-4">
                    <div>
                      <label className="text-ui-sm text-foreground-muted mb-2 block">Name</label>
                      <input
                        type="text"
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        required
                        className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
                        placeholder="Your name"
                      />
                    </div>
                    <div>
                      <label className="text-ui-sm text-foreground-muted mb-2 block">Email</label>
                      <input
                        type="email"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        required
                        className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
                        placeholder="you@example.com"
                      />
                    </div>
                  </div>
                  <div>
                    <label className="text-ui-sm text-foreground-muted mb-2 block">Subject</label>
                    <select
                      value={formData.subject}
                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      required
                      className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
                    >
                      <option value="">Select a topic</option>
                      <option value="support">Technical Support</option>
                      <option value="billing">Billing Question</option>
                      <option value="sales">Sales Inquiry</option>
                      <option value="partnership">Partnership</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  <div>
                    <label className="text-ui-sm text-foreground-muted mb-2 block">Message</label>
                    <textarea
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      required
                      rows={5}
                      className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all resize-none"
                      placeholder="How can we help?"
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={formState === 'loading'}
                    className="w-full py-3.5 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 disabled:opacity-50 transition-all flex items-center justify-center gap-2"
                  >
                    {formState === 'loading' ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <>
                        Send Message
                        <Send className="w-4 h-4" />
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>

            {/* FAQ & Info */}
            <div className="space-y-8 animate-slide-up" style={{ animationDelay: '100ms' }}>
              {/* Quick FAQs */}
              <div>
                <h2 className="text-heading-sm font-medium text-foreground mb-6">Quick Answers</h2>
                <div className="space-y-3">
                  {faqs.map((faq) => (
                    <div
                      key={faq.q}
                      className="p-5 bg-background-secondary/50 border border-border rounded-xl"
                    >
                      <h3 className="text-body-sm font-medium text-foreground mb-2">{faq.q}</h3>
                      <p className="text-body-sm text-foreground-muted">{faq.a}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Office Info */}
              <div className="p-6 bg-background-secondary/30 border border-border rounded-xl">
                <h3 className="text-body font-medium text-foreground mb-4 flex items-center gap-2">
                  <Building className="w-4 h-4 text-accent" />
                  Company Info
                </h3>
                <div className="space-y-3 text-body-sm">
                  <div className="flex items-start gap-3">
                    <MapPin className="w-4 h-4 text-foreground-subtle mt-0.5" />
                    <div>
                      <p className="text-foreground">pounce AG</p>
                      <p className="text-foreground-muted">Zurich, Switzerland</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Mail className="w-4 h-4 text-foreground-subtle mt-0.5" />
                    <div>
                      <p className="text-foreground">support@pounce.dev</p>
                      <p className="text-foreground-muted">General inquiries</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}

