import { useState } from "react"
import { AnimatePresence, motion } from "motion/react"
import { Building, CheckCircle2, Loader2, Mail, Phone, Send } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input, Textarea } from "@/components/ui/input"
import { Section } from "@/components/ui/section"
import { SectionHeading } from "@/components/ui/section-heading"
import { Typography } from "@/components/ui/typography"
import { EASE_OUT_EXPO } from "@/lib/motion"
import type { LucideIcon } from "lucide-react"

const EMPTY_FORM = {
  companyName: '',
  contactName: '',
  email: '',
  phone: '',
  message: '',
}

/** 도입 문의 폼. 백엔드 미연결 — 제출은 데모 처리(1.2초 후 성공 화면). */
export function Contact() {
  const [formData, setFormData] = useState(EMPTY_FORM)
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success'>('idle')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.companyName || !formData.contactName || !formData.email || !formData.phone) {
      return
    }

    setStatus('submitting')
    setTimeout(() => setStatus('success'), 1200)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const submitting = status === 'submitting'

  return (
    <Section
      id="contact-section"
      bordered
      decor={
        <>
          <div className="absolute top-[20%] right-[10%] w-72 h-72 bg-primary/5 blur-[100px] rounded-full pointer-events-none" />
          <div className="absolute bottom-[10%] left-[5%] w-96 h-96 bg-primary/3 blur-[120px] rounded-full pointer-events-none" />
        </>
      }
    >
      <SectionHeading
        align="center"
        className="mb-16"
        eyebrow="GET IN TOUCH"
        title="도입 문의 및 컨택하기"
        description="사내 ERP 연동부터 우리 기업에 맞춘 흥정 시나리오 구성까지, negotium의 구매 혁신 컨설턴트가 상세히 안내해 드립니다."
        descriptionClassName="max-w-xl"
      />

      <div className="max-w-2xl mx-auto">
        <AnimatePresence mode="wait">
          {status !== 'success' ? (
            <motion.form
              key="contact-form"
              onSubmit={handleSubmit}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5, ease: EASE_OUT_EXPO }}
              className="space-y-6"
            >
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <FormField label="회사명" icon={Building} required>
                  <Input
                    type="text"
                    name="companyName"
                    required
                    placeholder="예: (주)한빛유통"
                    value={formData.companyName}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>

                <FormField label="담당자 성함 / 직책" required>
                  <Input
                    type="text"
                    name="contactName"
                    required
                    placeholder="예: 홍길동 팀장"
                    value={formData.contactName}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <FormField label="이메일 주소" icon={Mail} required>
                  <Input
                    type="email"
                    name="email"
                    required
                    placeholder="example@company.com"
                    value={formData.email}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>

                <FormField label="연락처" icon={Phone} required>
                  <Input
                    type="tel"
                    name="phone"
                    required
                    placeholder="010-0000-0000"
                    value={formData.phone}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>
              </div>

              <FormField label="상세 문의 및 요구사항">
                <Textarea
                  name="message"
                  rows={4}
                  placeholder="현재 겪고 계신 구매 조율 상의 번거로움이나, 자동화를 원하시는 구체적인 부자재 품목 정보를 남겨주시면 더욱 맞춤화된 상담이 가능합니다."
                  value={formData.message}
                  onChange={handleChange}
                  disabled={submitting}
                />
              </FormField>

              <Typography variant="caption" className="font-medium">
                * 제출 시 입력하신 정보는 문의 사항 응답 및 도입 검토 목적에 한하여 사용되며, 관련 법령에 의거하여 안전하게
                보호됩니다.
              </Typography>

              <div className="pt-2">
                <Button type="submit" disabled={submitting} className="w-full shadow-sm hover:shadow-md">
                  {submitting ? (
                    <>
                      <Loader2 className="w-5 h-5 animate-spin" />
                      <span>신청서 전송 중...</span>
                    </>
                  ) : (
                    <>
                      <Send className="w-5 h-5" />
                      <span>도입 문의 및 상담 신청하기</span>
                    </>
                  )}
                </Button>
              </div>
            </motion.form>
          ) : (
            <motion.div
              key="success-message"
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.6, ease: EASE_OUT_EXPO }}
              className="text-center py-16 px-6 bg-primary/5 rounded-[32px] text-ink break-keep"
            >
              <div className="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
                <CheckCircle2 className="w-8 h-8" />
              </div>
              <h3 className="text-2xl font-extrabold text-ink mb-3">도입 문의 신청이 접수되었습니다</h3>
              <p className="text-ink-soft font-semibold text-[15px] leading-relaxed max-w-md mx-auto mb-8">
                작성해주신 담당자 정보({formData.contactName} 님)를 통해 24시간 이내에 전담 혁신 컨설턴트가 유선 혹은 이메일로
                연락을 드리겠습니다.
              </p>
              <Button
                type="button"
                size="md"
                onClick={() => {
                  setFormData(EMPTY_FORM)
                  setStatus('idle')
                }}
              >
                새로 문의하기
              </Button>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </Section>
  )
}

function FormField({
  label,
  icon: Icon,
  required = false,
  children,
}: {
  label: string
  icon?: LucideIcon
  required?: boolean
  children: React.ReactNode
}) {
  return (
    <div className="space-y-2">
      <label className="text-xs font-bold text-ink-soft flex items-center gap-1.5">
        {Icon && <Icon className="w-3.5 h-3.5 text-ink-muted" />}
        {label} {required && <span className="text-primary">*</span>}
      </label>
      {children}
    </div>
  )
}