'use client';

import { useState, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { z } from 'zod';
import { ScrollReveal } from '@/components/ui/scroll-reveal';
import { Button } from '@/components/ui/button';
import { LabeledInput as Input } from '@/components/ui/labeled-input';
import { LabeledTextarea as Textarea } from '@/components/ui/labeled-textarea';
import { Toast } from '@/components/ui/toast';
import {
  Mail,
  MapPin,
  Send,
  Loader2,
  Clock,
  HeadphonesIcon,
  CheckCircle2,
  HelpCircle,
  MessageSquare,
  ArrowRight,
} from 'lucide-react';
import { COMPANY_INFO } from '@/lib/constants';
import { trackContactForm, trackConversion } from '@/lib/analytics';
import { BreadcrumbSchema } from '@/components/seo/structured-data';
import { LegacyTooltip as Tooltip } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

const contactFormSchema = z.object({
  name: z.string().min(2, '姓名至少需要2个字符'),
  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
  email: z.string().email('请输入有效的邮箱地址'),
  subject: z.string().min(2, '主题至少需要2个字符'),
  message: z.string().min(10, '留言内容至少需要10个字符'),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

interface FormErrors {
  name?: string;
  phone?: string;
  email?: string;
  subject?: string;
  message?: string;
}

const FAQ_ITEMS = [
  {
    q: '你们的服务流程是怎样的？',
    a: '通常分四步：需求沟通 → 方案评估 → 签约启动 → 敏捷交付。首次咨询免费，我们会在 2 个工作日内给出初步方案建议。',
  },
  {
    q: '收费模式是怎样的？',
    a: '根据项目规模和合作模式灵活定价。项目制按里程碑付款，订阅制按月结算，长期陪跑模式可协商年度合作方案。',
  },
  {
    q: '数据安全如何保障？',
    a: '我们严格遵守数据保护规范，签署保密协议，采用加密传输和权限隔离。项目结束后，客户数据按要求彻底清除。',
  },
  {
    q: '项目周期一般多长？',
    a: '小型项目 2-4 周，中型项目 1-3 个月，大型项目按阶段推进。我们会在方案评估阶段给出明确的时间线。',
  },
];

function GrainOverlay() {
  return (
    <div
      className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
      style={{
        backgroundImage:
          "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
      }}
    />
  );
}

function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn('flex items-center gap-5 mb-7', className)}>
      <div className="w-14 h-px bg-brand" />
      <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
        {children}
      </span>
      <div className="w-14 h-px bg-brand" />
    </div>
  );
}

function ContactFormContent() {
  const searchParams = useSearchParams();
  const isSuccessFromRedirect = searchParams.get('success') === 'true';
  const [showToast, setShowToast] = useState(isSuccessFromRedirect);
  const [toastMessage, setToastMessage] = useState(
    isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
  );
  const [toastType, setToastType] = useState<'success' | 'error'>(
    isSuccessFromRedirect ? 'success' : 'success'
  );
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(isSuccessFromRedirect);
  const [formData, setFormData] = useState<ContactFormData>({
    name: '',
    phone: '',
    email: '',
    subject: '',
    message: '',
  });
  const [errors, setErrors] = useState<FormErrors>({});

  const validateField = (field: keyof ContactFormData, value: string) => {
    try {
      contactFormSchema.shape[field].parse(value);
      setErrors((prev) => ({ ...prev, [field]: undefined }));
    } catch (error) {
      if (error instanceof z.ZodError) {
        const fieldError = error.issues[0];
        if (fieldError) {
          setErrors((prev) => ({ ...prev, [field]: fieldError.message }));
        }
      }
    }
  };

  const handleChange = (field: keyof ContactFormData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) {
      validateField(field, value);
    }
  };

  const handleBlur = (field: keyof ContactFormData, value: string) => {
    validateField(field, value);
  };

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const result = contactFormSchema.safeParse(formData);

    if (!result.success) {
      const fieldErrors: FormErrors = {};
      result.error.issues.forEach((issue) => {
        const field = issue.path[0] as keyof ContactFormData;
        fieldErrors[field] = issue.message;
      });
      setErrors(fieldErrors);
      setToastMessage(`请检查表单：${Object.keys(fieldErrors).length} 项内容需要修正`);
      setToastType('error');
      setShowToast(true);
      const firstErrorField = document.querySelector('[data-testid*="-input"][aria-invalid="true"]') as HTMLElement;
      firstErrorField?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      firstErrorField?.focus();
      return;
    }

    setIsSubmitting(true);

    try {
      const formBody = new URLSearchParams();
      formBody.append('name', formData.name);
      formBody.append('phone', formData.phone);
      formBody.append('email', formData.email);
      formBody.append('subject', formData.subject);
      formBody.append('message', formData.message);

      const response = await fetch('/api/contact', {
        method: 'POST',
        body: formBody,
      });

      const data = await response.json();

      if (response.ok && (data.success === 'true' || data.success === true)) {
        trackContactForm({
          name: formData.name,
          email: formData.email,
          company: formData.subject,
        });
        trackConversion('contact_form_submission');
        setToastMessage('表单提交成功！我们会尽快与您联系。');
        setToastType('success');
        setShowToast(true);
        setIsSubmitted(true);
        setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
        setErrors({});
      } else {
        const errorMsg = data.message || '提交失败，请稍后重试或直接发送邮件联系我们。';
        if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) {
          setToastMessage('表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ' + COMPANY_INFO.email);
        } else {
          setToastMessage(errorMsg);
        }
        setToastType('error');
        setShowToast(true);
      }
    } catch {
      setToastMessage('网络错误，请稍后重试。');
      setToastType('error');
      setShowToast(true);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <div className="min-h-screen bg-ink text-white overflow-x-hidden">
      <BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
      {showToast && (
        <Toast
          message={toastMessage}
          type={toastType}
          duration={toastType === 'error' ? 0 : undefined}
          onClose={() => setShowToast(false)}
        />
      )}

      {/* Hero Section */}
      <section className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
        <GrainOverlay />

        <div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal>
            <SectionLabel>Contact Us</SectionLabel>
          </ScrollReveal>

          <ScrollReveal delay={0.1}>
            <p className="text-lg text-white/60 mb-4">
              工作日 2 小时内快速响应，首次咨询免费
            </p>
          </ScrollReveal>

          <ScrollReveal delay={0.2}>
            <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
              随时欢迎
              <span className="block mt-2 text-brand">聊一聊</span>
            </h1>
          </ScrollReveal>

          <ScrollReveal delay={0.3}>
            <p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
              无论是一个明确的项目需求，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。没有任何销售压力。
            </p>
          </ScrollReveal>
        </div>
      </section>

      {/* Form + Info Section */}
      <section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
        <GrainOverlay />

        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
            {/* Left: Contact Info */}
            <ScrollReveal className="lg:col-span-2 space-y-8">
              <div>
                <h2 className="text-xl font-semibold text-white mb-8">联系方式</h2>
                <div className="space-y-6" data-testid="contact-info">
                  <div className="flex items-start gap-4 group" data-testid="email-info">
                    <div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
                      <Mail className="w-5 h-5 text-brand" />
                    </div>
                    <div>
                      <p className="text-sm text-white/50 mb-1">邮箱</p>
                      <a
                        href={`mailto:${COMPANY_INFO.email}`}
                        className="text-white hover:text-brand transition-colors duration-300"
                        data-testid="email-link"
                      >
                        {COMPANY_INFO.email}
                      </a>
                    </div>
                  </div>

                  <div className="flex items-start gap-4 group" data-testid="address-info">
                    <div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
                      <MapPin className="w-5 h-5 text-brand" />
                    </div>
                    <div>
                      <p className="text-sm text-white/50 mb-1">地址</p>
                      <p className="text-white" data-testid="address-text">
                        {COMPANY_INFO.address}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="border border-white/10 bg-ink p-8" data-testid="work-hours-card">
                <div className="flex items-center gap-3 mb-4">
                  <Clock className="w-5 h-5 text-brand" />
                  <h2 className="text-base font-semibold text-white">工作时间</h2>
                </div>
                <div className="flex justify-between" data-testid="work-hours-row">
                  <span className="text-white/60">周一至周五</span>
                  <span className="text-brand font-medium">9:00 - 18:00</span>
                </div>
              </div>

              <div className="border border-white/10 bg-ink p-8">
                <div className="flex items-center gap-3 mb-4">
                  <HeadphonesIcon className="w-5 h-5 text-brand" />
                  <h2 className="text-base font-semibold text-white">我们的承诺</h2>
                </div>
                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
                    <p className="text-white/60">工作日 2 小时内快速响应您的咨询</p>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
                    <p className="text-white/60">提供免费的业务咨询和方案评估服务</p>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
                    <p className="text-white/60">根据您的需求量身定制最优解决方案</p>
                  </div>
                </div>
              </div>
            </ScrollReveal>

            {/* Right: Form */}
            <ScrollReveal delay={0.1} className="lg:col-span-3">
              <div className="border border-white/10 bg-ink p-8 lg:p-10 h-full relative overflow-hidden">
                <div className="absolute top-0 left-0 right-0 h-1 bg-brand" />

                <h2 className="text-xl font-semibold text-white mb-8">发送消息</h2>

                {isSubmitted ? (
                  <div className="text-center py-16">
                    <div className="w-20 h-20 bg-brand rounded-full flex items-center justify-center mx-auto mb-6">
                      <CheckCircle2 className="w-10 h-10 text-white" />
                    </div>
                    <h4 className="text-2xl font-semibold text-white mb-3">消息已发送</h4>
                    <p className="text-white/60">感谢您的留言，我们会尽快与您联系！</p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6" noValidate>
                    <input
                      type="text"
                      name="website"
                      style={{ display: 'none' }}
                      tabIndex={-1}
                      autoComplete="off"
                      aria-hidden="true"
                    />
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                      <div className="relative">
                        <Input
                          name="name"
                          data-testid="name-input"
                          label={
                            <span className="flex items-center gap-1.5">
                              姓名
                              <Tooltip content="用于正式沟通和方案报价">
                                <HelpCircle className="w-3.5 h-3.5 text-white/40 hover:text-brand cursor-help" />
                              </Tooltip>
                            </span>
                          }
                          id="name"
                          placeholder="请输入您的姓名"
                          required
                          value={formData.name}
                          onChange={(e) => handleChange('name', e.target.value)}
                          onBlur={(e) => handleBlur('name', e.target.value)}
                          error={errors.name}
                          className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
                        />
                      </div>
                      <div className="relative">
                        <Input
                          name="phone"
                          data-testid="phone-input"
                          label={
                            <span className="flex items-center gap-1.5">
                              电话
                              <Tooltip content="接收项目进度通知和验证码，仅用于业务联系">
                                <HelpCircle className="w-3.5 h-3.5 text-white/40 hover:text-brand cursor-help" />
                              </Tooltip>
                            </span>
                          }
                          id="phone"
                          type="tel"
                          placeholder="请输入11位手机号"
                          required
                          value={formData.phone}
                          onChange={(e) => handleChange('phone', e.target.value)}
                          onBlur={(e) => handleBlur('phone', e.target.value)}
                          error={errors.phone}
                          className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
                        />
                      </div>
                    </div>
                    <Input
                      name="email"
                      data-testid="email-input"
                      label="邮箱"
                      id="email"
                      type="email"
                      placeholder="请输入您的邮箱"
                      required
                      value={formData.email}
                      onChange={(e) => handleChange('email', e.target.value)}
                      onBlur={(e) => handleBlur('email', e.target.value)}
                      error={errors.email}
                      className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
                    />
                    <Input
                      name="subject"
                      data-testid="subject-input"
                      label="主题"
                      id="subject"
                      placeholder="请输入消息主题"
                      required
                      value={formData.subject}
                      onChange={(e) => handleChange('subject', e.target.value)}
                      onBlur={(e) => handleBlur('subject', e.target.value)}
                      error={errors.subject}
                      className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
                    />
                    <Textarea
                      name="message"
                      data-testid="message-input"
                      label="留言内容"
                      id="message"
                      placeholder="请输入您想咨询的内容"
                      rows={5}
                      required
                      value={formData.message}
                      onChange={(e) => handleChange('message', e.target.value)}
                      onBlur={(e) => handleBlur('message', e.target.value)}
                      error={errors.message}
                      className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
                    />
                    <Button
                      type="submit"
                      data-testid="submit-button"
                      size="xl"
                      className="w-full h-14 disabled:opacity-70"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? (
                        <span className="flex items-center justify-center gap-2">
                          <Loader2 className="h-5 w-5 animate-spin" />
                          <span>发送中...</span>
                        </span>
                      ) : (
                        <>
                          <Send className="mr-2 h-5 w-5" />
                          发送消息
                        </>
                      )}
                    </Button>
                  </form>
                )}
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="relative py-24 lg:py-32 overflow-hidden bg-ink">
        <GrainOverlay />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal className="mb-16">
            <SectionLabel>FAQ</SectionLabel>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
              您可能想
              <span className="text-brand">了解的</span>
            </h2>
          </ScrollReveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
            {FAQ_ITEMS.map((faq, idx) => (
              <ScrollReveal key={faq.q} delay={idx * 0.08}>
                <div className="border border-white/10 bg-ink-light p-8 h-full hover:border-brand/30 transition-colors duration-300">
                  <div className="flex items-start gap-4">
                    <MessageSquare className="w-6 h-6 text-brand shrink-0 mt-0.5" strokeWidth={1.8} />
                    <div>
                      <h3 className="text-base font-semibold text-white mb-3">{faq.q}</h3>
                      <p className="text-sm text-white/60 leading-relaxed">{faq.a}</p>
                    </div>
                  </div>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
        <GrainOverlay />

        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />

        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
        </div>

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal className="max-w-3xl mx-auto text-center">
            <SectionLabel className="justify-center">
              <div className="flex items-center gap-5">
                <div className="w-14 h-px bg-brand" />
                <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
                  Get in Touch
                </span>
                <div className="w-14 h-px bg-brand" />
              </div>
            </SectionLabel>

            <h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
              还是想直接聊？
            </h2>

            <p className="text-lg md:text-xl text-white/60 leading-relaxed mb-12">
              表单填起来太麻烦？直接发邮件到 {COMPANY_INFO.email}，我们同样会快速回复。
            </p>

            <div className="flex flex-wrap gap-6 justify-center">
              <Button size="xl" asChild>
                <a href={`mailto:${COMPANY_INFO.email}`}>
                  发送邮件
                  <ArrowRight className="w-5 h-5 ml-2" />
                </a>
              </Button>
              <Button size="xl" variant="outline" asChild>
                <a href="/">回到首页</a>
              </Button>
            </div>
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}

export default function ContactContentV1() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-ink flex items-center justify-center">
          <div className="animate-pulse text-white/50">加载中...</div>
        </div>
      }
    >
      <ContactFormContent />
    </Suspense>
  );
}