"use client"

import { Plus, X } from "lucide-react"
import { IconPicker } from "@/components/dashboard/shared/IconPicker"

export interface CTAFeatureItem {
  text: string
}

export interface ProcedureCTAData {
  eyebrow: string
  title: string
  subtitle: string
  features: CTAFeatureItem[]
  buttonIconKey: string
  buttonTitle: string
  buttonSubtitle: string
  buttonLink: string
  formTitle: string
  formSubtitle: string
  formFullNameLabel: string
  formPhoneLabel: string
  formEmailLabel: string
  formProcedureLabel: string
  formMessageLabel: string
  formButtonIconKey: string
  formButtonText: string
  formButtonLink: string
  formEndLabel: string
}

interface Props {
  value: ProcedureCTAData
  onChange: (value: ProcedureCTAData) => void
}

const inputClass =
  "w-full bg-card border border-border rounded-xl px-3 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

export function ProcedureCTA({ value, onChange }: Props) {
  function set<K extends keyof ProcedureCTAData>(key: K, val: ProcedureCTAData[K]) {
    onChange({ ...value, [key]: val })
  }

  function addFeature() {
    set("features", [...value.features, { text: "" }])
  }
  function removeFeature(i: number) {
    set("features", value.features.filter((_, idx) => idx !== i))
  }
  function updateFeature(i: number, val: string) {
    set("features", value.features.map((f, idx) => idx === i ? { text: val } : f))
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Section Headings + Features */}
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-green)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Section Content</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Eyebrow</label><input type="text" value={value.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. Ready to Start?" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Title</label><input type="text" value={value.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Get a Free Consultation" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Subtitle</label><input type="text" value={value.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="e.g. Our team is ready to help" className={inputClass} /></div>
        </div>

        {/* Features */}
        <div className="flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <label className="text-xs font-semibold text-foreground font-sans">Features</label>
            <button type="button" onClick={addFeature} className="flex cursor-pointer items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-semibold font-sans transition-all hover:brightness-105" style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}>
              <Plus className="w-3 h-3" aria-hidden="true" /> Add
            </button>
          </div>
          {value.features.map((f, i) => (
            <div key={i} className="flex items-center gap-2">
              <span className="text-xs font-bold font-sans w-5 text-muted-foreground">{i + 1}.</span>
              <input type="text" value={f.text} onChange={(e) => updateFeature(i, e.target.value)} placeholder={`Feature ${i + 1}`} className="flex-1 bg-muted bg-white border border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]" />
              <button type="button" onClick={() => removeFeature(i)} className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors" aria-label={`Remove feature ${i + 1}`}><X className="w-3.5 h-3.5" aria-hidden="true" /></button>
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-1">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Button Icon</label>
            <IconPicker value={value.buttonIconKey} onChange={(key) => set("buttonIconKey", key)} />
          </div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Button Title</label><input type="text" value={value.buttonTitle} onChange={(e) => set("buttonTitle", e.target.value)} placeholder="e.g. Book Now" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Button Subtitle</label><input type="text" value={value.buttonSubtitle} onChange={(e) => set("buttonSubtitle", e.target.value)} placeholder="e.g. Free consultation" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Button Link</label><input type="text" value={value.buttonLink} onChange={(e) => set("buttonLink", e.target.value)} placeholder="e.g. /contact" className={inputClass} /></div>
        </div>
      </div>

      {/* Form Fields */}
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-navy)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Contact Form</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Form Title</label><input type="text" value={value.formTitle} onChange={(e) => set("formTitle", e.target.value)} placeholder="e.g. Get a Free Quote" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Form Subtitle</label><input type="text" value={value.formSubtitle} onChange={(e) => set("formSubtitle", e.target.value)} placeholder="e.g. Fill in your details" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Full Name Label</label><input type="text" value={value.formFullNameLabel} onChange={(e) => set("formFullNameLabel", e.target.value)} placeholder="e.g. Full Name" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Phone Label</label><input type="text" value={value.formPhoneLabel} onChange={(e) => set("formPhoneLabel", e.target.value)} placeholder="e.g. Phone Number" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Email Label</label><input type="text" value={value.formEmailLabel} onChange={(e) => set("formEmailLabel", e.target.value)} placeholder="e.g. Email Address" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Procedure of Interest Label</label><input type="text" value={value.formProcedureLabel} onChange={(e) => set("formProcedureLabel", e.target.value)} placeholder="e.g. Procedure of Interest" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Message Label</label><input type="text" value={value.formMessageLabel} onChange={(e) => set("formMessageLabel", e.target.value)} placeholder="e.g. Your Message" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">End of Form Label</label><input type="text" value={value.formEndLabel} onChange={(e) => set("formEndLabel", e.target.value)} placeholder="e.g. We'll respond within 24 hours" className={inputClass} /></div>
        </div>

        {/* Form Button */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-1">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Form Button Icon</label>
            <IconPicker value={value.formButtonIconKey} onChange={(key) => set("formButtonIconKey", key)} />
          </div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Form Button Text</label><input type="text" value={value.formButtonText} onChange={(e) => set("formButtonText", e.target.value)} placeholder="e.g. Send Request" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Form Button Link</label><input type="text" value={value.formButtonLink} onChange={(e) => set("formButtonLink", e.target.value)} placeholder="e.g. /api/contact" className={inputClass} /></div>
        </div>
      </div>
    </div>
  )
}