'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, ArrowRight } from 'lucide-react'
import Link from 'next/link'

const contactMethods = [
  {
    icon: Mail,
    title: 'Secure Comms',
    description: 'Support, partnerships, and product intel.',
    value: 'hello@pounce.ch',
    href: 'mailto:hello@pounce.ch',
  },
  {
    icon: MessageSquare,
    title: 'Support Desk',
    description: 'Email support. Mon–Fri, 0900–1800 CET.',
    value: 'Send ticket',
    href: 'mailto:hello@pounce.ch?subject=Support',
  },
  {
    icon: Clock,
    title: 'Response Time',
    description: 'Typical response window.',
    value: '< 24 Hours',
    href: null,
  },
]

const faqs = [
  {
    q: 'Forgot credentials?',
    a: 'Use the "Forgot Password" protocol on the login screen. Reset link dispatched instantly.',
  },
  {
    q: 'Upgrade mid-cycle?',
    a: 'Affirmative. Pro-rated charges apply. Features unlock immediately upon transaction.',
  },
  {
    q: 'Refund policy?',
    a: '14-day money-back guarantee. No questions asked. Risk-free deployment.',
  },
]

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 || 'Transmission failed. Retry.')
    }
  }

  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Background Atmosphere */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div 
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
            backgroundSize: '160px 160px',
          }}
        />
        <div className="absolute top-0 left-1/3 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-[120px]" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-40 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-6xl mx-auto">
          {/* Hero */}
          <div className="text-center mb-20 animate-fade-in">
            <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block flex items-center justify-center gap-2">
               <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
               Communication Uplink
            </span>
            <h1 className="font-display text-[3.5rem] sm:text-[5rem] leading-[0.9] tracking-[-0.04em] text-white mb-6">
              Establish Contact.
            </h1>
            <p className="text-lg text-white/50 max-w-xl mx-auto font-light">
              Support request, bug report, or partnership intel. We&apos;ll respond fast.
            </p>
          </div>

          {/* Contact Methods */}
          <div className="grid sm:grid-cols-3 gap-6 mb-20 animate-slide-up">
            {contactMethods.map((method) => (
              <div
                key={method.title}
                className="p-8 bg-[#050505] border border-white/10 hover:border-accent/30 transition-all group"
              >
                <div className="w-12 h-12 bg-white/5 flex items-center justify-center mb-6 group-hover:bg-accent/10 transition-colors">
                  <method.icon className="w-6 h-6 text-white/60 group-hover:text-accent transition-colors" />
                </div>
                <h3 className="font-display text-xl text-white mb-2">{method.title}</h3>
                <p className="text-xs font-mono text-white/40 mb-4">{method.description}</p>
                {method.href ? (
                  <a
                    href={method.href}
                    className="text-xs font-bold uppercase tracking-widest text-white hover:text-accent transition-colors flex items-center gap-2"
                  >
                    {method.value} <ArrowRight className="w-3 h-3" />
                  </a>
                ) : (
                  <span className="text-xs font-bold uppercase tracking-widest text-accent">{method.value}</span>
                )}
              </div>
            ))}
          </div>

          <div className="grid lg:grid-cols-2 gap-16 lg:gap-24">
            {/* Contact Form - Tech Style */}
            <div className="animate-slide-up bg-[#050505] border border-white/10 p-8 sm:p-10 relative">
              {/* Tech Corners */}
              <div className="absolute -top-px -left-px w-4 h-4 border-t border-l border-white/40" />
              <div className="absolute -top-px -right-px w-4 h-4 border-t border-r border-white/40" />
              <div className="absolute -bottom-px -left-px w-4 h-4 border-b border-l border-white/40" />
              <div className="absolute -bottom-px -right-px w-4 h-4 border-b border-r border-white/40" />

              <h2 className="font-display text-2xl text-white mb-8">Transmission Form</h2>
              
              {formState === 'success' ? (
                <div className="p-10 bg-accent/5 border border-accent/20 text-center">
                  <div className="w-16 h-16 bg-accent/10 flex items-center justify-center mx-auto mb-6 rounded-full">
                    <CheckCircle className="w-8 h-8 text-accent" />
                  </div>
                  <h3 className="font-display text-xl text-white mb-2">Message Received</h3>
                  <p className="text-xs font-mono text-white/60">
                    Your transmission has been logged. Our operators will respond within 4 hours.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  {formState === 'error' && error && (
                    <div className="p-4 bg-red-500/10 border border-red-500/20 flex items-center gap-3">
                      <AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0" />
                      <p className="text-xs font-mono text-red-500">{error}</p>
                    </div>
                  )}
                  <div className="grid sm:grid-cols-2 gap-6">
                    <div className="group">
                      <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest mb-2 block group-focus-within:text-white/70">Codename</label>
                      <input
                        type="text"
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        required
                        className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-sm placeholder:text-white/20 focus:outline-none focus:border-accent transition-all rounded-none"
                        placeholder="AGENT SMITH"
                      />
                    </div>
                    <div className="group">
                      <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest mb-2 block group-focus-within:text-white/70">Comms ID</label>
                      <input
                        type="email"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        required
                        className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-sm placeholder:text-white/20 focus:outline-none focus:border-accent transition-all rounded-none"
                        placeholder="NAME@DOMAIN.COM"
                      />
                    </div>
                  </div>
                  <div className="group">
                    <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest mb-2 block group-focus-within:text-white/70">Subject</label>
                    <select
                      value={formData.subject}
                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      required
                      className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-sm focus:outline-none focus:border-accent transition-all rounded-none appearance-none"
                    >
                      <option value="">SELECT PROTOCOL</option>
                      <option value="support">Technical Support</option>
                      <option value="billing">Billing Inquiry</option>
                      <option value="sales">Sales / Enterprise</option>
                      <option value="partnership">Partnership</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  <div className="group">
                    <label className="text-[10px] font-mono text-white/40 uppercase tracking-widest mb-2 block group-focus-within:text-white/70">Message</label>
                    <textarea
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      required
                      rows={5}
                      className="w-full bg-[#0A0A0A] border border-white/10 px-4 py-3 text-white font-mono text-sm placeholder:text-white/20 focus:outline-none focus:border-accent transition-all rounded-none resize-none"
                      placeholder="INITIATE TRANSMISSION..."
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={formState === 'loading'}
                    className="w-full py-4 bg-white text-black text-xs font-bold uppercase tracking-[0.2em] hover:bg-accent transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                    style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
                  >
                    {formState === 'loading' ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      <>
                        Send Transmission
                        <Send className="w-4 h-4" />
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>

            {/* FAQ & Info */}
            <div className="space-y-12 animate-slide-up" style={{ animationDelay: '100ms' }}>
              {/* Quick FAQs */}
              <div>
                <h2 className="font-display text-2xl text-white mb-8">Standard Procedures</h2>
                <div className="space-y-4">
                  {faqs.map((faq) => (
                    <div
                      key={faq.q}
                      className="p-6 border border-white/10 bg-[#050505]"
                    >
                      <h3 className="font-display text-lg text-white mb-2">{faq.q}</h3>
                      <p className="text-xs font-mono text-white/50 leading-relaxed">{faq.a}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Office Info */}
              <div className="p-8 border border-white/10 bg-[#050505] relative">
                <div className="absolute top-0 left-0 p-2 bg-white/5 border-r border-b border-white/10">
                    <Building className="w-4 h-4 text-white/40" />
                </div>
                <h3 className="font-display text-xl text-white mb-6 mt-2">HQ Coordinates</h3>
                <div className="space-y-4 text-sm font-mono text-white/60">
                  <div className="flex items-start gap-4">
                    <MapPin className="w-4 h-4 text-accent mt-1" />
                    <div>
                      <p className="text-white font-bold">Gugger Digital Services</p>
                      <p>Bahnhofstrasse 100</p>
                      <p>8001 Zurich, Switzerland</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <Mail className="w-4 h-4 text-accent mt-1" />
                    <div>
                      <a
                        href="mailto:hello@pounce.ch"
                        className="text-white hover:text-accent transition-colors"
                      >
                        hello@pounce.ch
                      </a>
                      <p>General Inquiries</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}