"use client"

import * as React from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { getIcon } from "@/components/marketing/custom-research/icons"
import { Send, ShieldCheck } from "lucide-react"

interface AsidePoint {
  text: string
  icon: string
}

interface FormField {
  label: string
  required?: boolean
  placeholder?: string
  options?: string[]
}

interface BriefingFormData {
  asideBadge: string
  asideTitle: string
  asideDescription: string
  asidePoints: AsidePoint[]
  formFields: {
    fullName: FormField
    workEmail: FormField
    company: FormField
    jobTitle: FormField
    industry: FormField
    typeOfResearch: FormField
    timeline: FormField
    indicativeBudget: FormField
    objective: FormField
    consent: string
    submitText: string
  }
}

interface ScopingFormProps {
  data: BriefingFormData
}

export function ScopingForm({ data }: ScopingFormProps) {
  const [isSubmitted, setIsSubmitted] = React.useState(false)
  const [formData, setFormData] = React.useState({
    fullName: "",
    email: "",
    company: "",
    jobTitle: "",
    industry: "",
    researchType: "",
    timeline: "",
    budget: "",
    objective: "",
    agree: false,
  })

  const scrollToForm = () => {
    const el = document.getElementById("brief-form")
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 70
      window.scrollTo({ top: y, behavior: "smooth" })
    }
  }

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitted(true)
    setTimeout(() => {
      scrollToForm()
    }, 50)
  }

  const fields = data.formFields

  return (
    <section id="brief-form" className="bg-ink text-white py-16 scroll-mt-[70px] relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.4] bg-[radial-gradient(circle,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:26px_26px]"></div>
      <div className="container-content relative">
        <div className="grid grid-cols-1 lg:grid-cols-[380px_1fr] gap-12 items-start">
          {/* Aside */}
          <div className="space-y-4">
            <div className="text-[11px] font-bold tracking-widest uppercase text-accent-gold">
              {data.asideBadge}
            </div>
            <h2 className="font-display text-3xl tracking-tight text-white leading-tight">
              {data.asideTitle}
            </h2>
            <p className="text-[14.5px] leading-relaxed text-white/60 font-light">
              {data.asideDescription}
            </p>
            <div className="flex flex-col gap-3.5 pt-2">
              {data.asidePoints.map((item, idx) => {
                const Icon = getIcon(item.icon)
                return (
                  <div key={idx} className="flex items-center gap-3 text-[13.5px] text-white/80">
                    <Icon className="size-4.5 text-accent-gold shrink-0" />
                    {item.text}
                  </div>
                )
              })}
            </div>
          </div>

          {/* Form Card */}
          <div className="bg-white rounded-lg p-7 md:p-7.5 text-ink">
            <AnimatePresence mode="wait">
              {!isSubmitted ? (
                <motion.form
                  key="form"
                  onSubmit={handleFormSubmit}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="space-y-3.5"
                >
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                    <div>
                      <Label htmlFor="full-name" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.fullName.label} {fields.fullName.required && <span className="text-[#C0392B]">*</span>}
                      </Label>
                      <Input
                        id="full-name"
                        type="text"
                        placeholder={fields.fullName.placeholder}
                        value={formData.fullName}
                        onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                        className="w-full border border-border-gray rounded-sm px-3.5 py-[11px] text-sm text-ink placeholder-[#9A968E] bg-white h-auto shadow-none"
                        required={fields.fullName.required}
                      />
                    </div>
                    <div>
                      <Label htmlFor="work-email" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.workEmail.label} {fields.workEmail.required && <span className="text-[#C0392B]">*</span>}
                      </Label>
                      <Input
                        id="work-email"
                        type="email"
                        placeholder={fields.workEmail.placeholder}
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        className="w-full border border-border-gray rounded-sm px-3.5 py-[11px] text-sm text-ink placeholder-[#9A968E] bg-white h-auto shadow-none"
                        required={fields.workEmail.required}
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                    <div>
                      <Label htmlFor="company-name" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.company.label} {fields.company.required && <span className="text-[#C0392B]">*</span>}
                      </Label>
                      <Input
                        id="company-name"
                        type="text"
                        placeholder={fields.company.placeholder}
                        value={formData.company}
                        onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                        className="w-full border border-border-gray rounded-sm px-3.5 py-[11px] text-sm text-ink placeholder-[#9A968E] bg-white h-auto shadow-none"
                        required={fields.company.required}
                      />
                    </div>
                    <div>
                      <Label htmlFor="job-title" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.jobTitle.label}
                      </Label>
                      <Input
                        id="job-title"
                        type="text"
                        placeholder={fields.jobTitle.placeholder}
                        value={formData.jobTitle}
                        onChange={(e) => setFormData({ ...formData, jobTitle: e.target.value })}
                        className="w-full border border-border-gray rounded-sm px-3.5 py-[11px] text-sm text-ink placeholder-[#9A968E] bg-white h-auto shadow-none"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                    <div>
                      <Label htmlFor="industry-select" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.industry.label}
                      </Label>
                      <NativeSelect
                        id="industry-select"
                        value={formData.industry}
                        onChange={(e) => setFormData({ ...formData, industry: e.target.value })}
                        className="w-full [&>select]:h-[42px] [&>select]:rounded-sm [&>select]:border-border-gray [&>select]:bg-white [&>select]:px-3 [&>select]:py-[11px] [&>select]:text-ink [&>select]:cursor-pointer [&>select]:w-full"
                      >
                        {fields.industry.options?.map((opt, oIdx) => (
                          <NativeSelectOption key={oIdx} value={oIdx === 0 ? "" : opt}>
                            {opt}
                          </NativeSelectOption>
                        ))}
                      </NativeSelect>
                    </div>
                    <div>
                      <Label htmlFor="research-select" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.typeOfResearch.label}
                      </Label>
                      <NativeSelect
                        id="research-select"
                        value={formData.researchType}
                        onChange={(e) => setFormData({ ...formData, researchType: e.target.value })}
                        className="w-full [&>select]:h-[42px] [&>select]:rounded-sm [&>select]:border-border-gray [&>select]:bg-white [&>select]:px-3 [&>select]:py-[11px] [&>select]:text-ink [&>select]:cursor-pointer [&>select]:w-full"
                      >
                        {fields.typeOfResearch.options?.map((opt, oIdx) => (
                          <NativeSelectOption key={oIdx} value={oIdx === 0 ? "" : opt}>
                            {opt}
                          </NativeSelectOption>
                        ))}
                      </NativeSelect>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                    <div>
                      <Label htmlFor="timeline-select" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.timeline.label}
                      </Label>
                      <NativeSelect
                        id="timeline-select"
                        value={formData.timeline}
                        onChange={(e) => setFormData({ ...formData, timeline: e.target.value })}
                        className="w-full [&>select]:h-[42px] [&>select]:rounded-sm [&>select]:border-border-gray [&>select]:bg-white [&>select]:px-3 [&>select]:py-[11px] [&>select]:text-ink [&>select]:cursor-pointer [&>select]:w-full"
                      >
                        {fields.timeline.options?.map((opt, oIdx) => (
                          <NativeSelectOption key={oIdx} value={oIdx === 0 ? "" : opt}>
                            {opt}
                          </NativeSelectOption>
                        ))}
                      </NativeSelect>
                    </div>
                    <div>
                      <Label htmlFor="budget-select" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                        {fields.indicativeBudget.label}
                      </Label>
                      <NativeSelect
                        id="budget-select"
                        value={formData.budget}
                        onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
                        className="w-full [&>select]:h-[42px] [&>select]:rounded-sm [&>select]:border-border-gray [&>select]:bg-white [&>select]:px-3 [&>select]:py-[11px] [&>select]:text-ink [&>select]:cursor-pointer [&>select]:w-full"
                      >
                        {fields.indicativeBudget.options?.map((opt, oIdx) => (
                          <NativeSelectOption key={oIdx} value={oIdx === 0 ? "" : opt}>
                            {opt}
                          </NativeSelectOption>
                        ))}
                      </NativeSelect>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="research-objective" className="block text-xs font-semibold text-[#46433E] mb-1.5">
                      {fields.objective.label} {fields.objective.required && <span className="text-[#C0392B]">*</span>}
                    </Label>
                    <Textarea
                      id="research-objective"
                      rows={4}
                      placeholder={fields.objective.placeholder}
                      value={formData.objective}
                      onChange={(e) => setFormData({ ...formData, objective: e.target.value })}
                      className="w-full border border-border-gray rounded-sm px-3.5 py-[11px] text-sm text-ink placeholder-[#9A968E] bg-white resize-none outline-none font-sans min-h-[100px]"
                      required={fields.objective.required}
                    />
                  </div>

                  <div className="flex items-start gap-2.5 pt-1">
                    <Checkbox
                      id="agree-checkbox"
                      checked={formData.agree}
                      onCheckedChange={(checked) => setFormData({ ...formData, agree: checked === true })}
                      className="mt-1 shrink-0 border-border-gray data-[checked]:border-navy data-[checked]:bg-navy"
                      required
                    />
                    <Label
                      htmlFor="agree-checkbox"
                      className="text-[12px] text-muted-gray leading-normal font-light cursor-pointer"
                    >
                      {fields.consent}
                    </Label>
                  </div>

                  <Button
                    type="submit"
                    className="w-full bg-gold text-navy hover:bg-gold/90 border-none rounded-sm py-4 text-base font-bold flex items-center justify-center gap-2 cursor-pointer h-auto shadow-none"
                  >
                    <Send className="size-4.5" />
                    {fields.submitText}
                  </Button>
                </motion.form>
              ) : (
                <motion.div
                  key="success"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0 }}
                  className="text-center py-10 px-5"
                >
                  <div className="size-16 rounded-full bg-[#EAF4EE] flex items-center justify-center mx-auto mb-4.5">
                    <ShieldCheck className="size-8 text-green" />
                  </div>
                  <h3 className="font-display text-2xl text-ink mb-2.5">
                    Brief received — thank you
                  </h3>
                  <p className="text-sm text-muted-gray leading-relaxed font-light max-w-[380px] mx-auto">
                    A specialist analyst will review your request and reply within one business day with suggested scope and an indicative timeline. Check your inbox for a confirmation.
                  </p>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>
    </section>
  )
}