"use client"

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

export interface HospitalCTAData {
  eyebrow: string
  title: string
  subtitle: string
  features: string[]
  buttonIcon: string
  buttonText: string
  buttonLink: string
  formTitle: string
  fullNameLabel: string
  phoneLabel: string
  emailLabel: string
  procedureLabel: string
  procedures: string[]
  messageLabel: string
  formButtonIcon: string
  formButtonText: string
  formButtonLink: string
  endOfFormLabel: string
}

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

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

const listFieldClass =
  "w-full 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]"

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

  function updateFeature(idx: number, val: string) {
    const updated = value.features.map((f, i) => (i === idx ? val : f))
    set("features", updated)
  }

  function addFeature() { set("features", [...value.features, ""]) }
  function removeFeature(idx: number) { set("features", value.features.filter((_, i) => i !== idx)) }

  function updateProcedure(idx: number, val: string) {
    const updated = value.procedures.map((p, i) => (i === idx ? val : p))
    set("procedures", updated)
  }

  function addProcedure() { set("procedures", [...value.procedures, ""]) }
  function removeProcedure(idx: number) { set("procedures", value.procedures.filter((_, i) => i !== idx)) }

  return (
    <div className="flex flex-col gap-5">
      {/* Section headings */}
      <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 Headings</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. Get Started" 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. Ready to Begin Your Journey?" 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 here to help you" className={inputClass} />
          </div>
        </div>
      </div>

      {/* CTA Button & Features */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/20">
          <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">CTA Button</p>
          <div className="grid grid-cols-3 gap-3">
            <IconPicker value={value.buttonIcon} onChange={(k) => set("buttonIcon", k)} />
            <input type="text" value={value.buttonText} onChange={(e) => set("buttonText", e.target.value)} placeholder="Button text" className={inputClass} />
            <input type="text" value={value.buttonLink} onChange={(e) => set("buttonLink", e.target.value)} placeholder="Button link" className={inputClass} />
          </div>
        </div>

        <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/20">
          <div className="flex items-center justify-between gap-3 flex-wrap">
            <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Features List ({value.features.length})</p>
            <button
              type="button"
              onClick={addFeature}
              className="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold font-sans transition-all hover:brightness-105 active:scale-[0.98]"
              style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
            >
              <Plus className="w-3.5 h-3.5" aria-hidden="true" /> Add Feature
            </button>
          </div>
          {value.features.length === 0 ? (
            <div
              className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
              style={{ borderColor: "var(--border)" }}
            >
              <p className="text-xs text-muted-foreground font-sans">No features yet.</p>
              <button type="button" onClick={addFeature} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>
                Add your first feature
              </button>
            </div>
          ) : (
            <div className="flex flex-col gap-2">
              {value.features.map((feat, idx) => (
                <div key={idx} className="flex items-center gap-2 p-3 rounded-xl border border-border bg-card">
                  <span
                    className="text-[10px] font-bold font-sans px-2 py-0.5 rounded-md shrink-0"
                    style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                  >
                    {idx + 1}
                  </span>
                  <input
                    type="text"
                    value={feat}
                    onChange={(e) => updateFeature(idx, e.target.value)}
                    placeholder={`Feature ${idx + 1}`}
                    className={`${listFieldClass} flex-1 min-w-0`}
                  />
                  <button
                    type="button"
                    onClick={() => removeFeature(idx)}
                    className="p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer shrink-0"
                    aria-label="Remove"
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Form Fields */}
      <div className="flex flex-col gap-4 p-4 rounded-xl border border-border bg-muted/20">
        <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Contact Form</p>
        <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. Request Free Consultation" 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.fullNameLabel} onChange={(e) => set("fullNameLabel", 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.phoneLabel} onChange={(e) => set("phoneLabel", 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.emailLabel} onChange={(e) => set("emailLabel", 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 Label</label>
            <input type="text" value={value.procedureLabel} onChange={(e) => set("procedureLabel", 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.messageLabel} onChange={(e) => set("messageLabel", e.target.value)} placeholder="e.g. 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.endOfFormLabel} onChange={(e) => set("endOfFormLabel", e.target.value)} placeholder="e.g. We reply within 24 hours" className={inputClass} />
          </div>
        </div>

        {/* Procedures dropdown options */}
        <div className="flex flex-col gap-3">
          <div className="flex items-center justify-between gap-3 flex-wrap">
            <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Procedure Options ({value.procedures.length})</label>
            <button
              type="button"
              onClick={addProcedure}
              className="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold font-sans transition-all hover:brightness-105 active:scale-[0.98]"
              style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
            >
              <Plus className="w-3.5 h-3.5" aria-hidden="true" /> Add Procedure
            </button>
          </div>
          {value.procedures.length === 0 ? (
            <div
              className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
              style={{ borderColor: "var(--border)" }}
            >
              <p className="text-xs text-muted-foreground font-sans">No procedure options yet.</p>
              <button type="button" onClick={addProcedure} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>
                Add your first option
              </button>
            </div>
          ) : (
            <div className="flex flex-col gap-2">
              {value.procedures.map((proc, idx) => (
                <div key={idx} className="flex items-center gap-2 p-3 rounded-xl border border-border bg-card">
                  <span
                    className="text-[10px] font-bold font-sans px-2 py-0.5 rounded-md shrink-0"
                    style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                  >
                    {idx + 1}
                  </span>
                  <input
                    type="text"
                    value={proc}
                    onChange={(e) => updateProcedure(idx, e.target.value)}
                    placeholder={`Procedure option ${idx + 1}`}
                    className={`${listFieldClass} flex-1 min-w-0`}
                  />
                  <button
                    type="button"
                    onClick={() => removeProcedure(idx)}
                    className="p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer shrink-0"
                    aria-label="Remove"
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Form Button */}
        <div className="pt-2 border-t border-border">
          <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider mb-3">Form Submit Button</p>
            <div className="grid grid-cols-3 gap-3">
            <IconPicker value={value.formButtonIcon} onChange={(k) => set("formButtonIcon", k)} />
            <input type="text" value={value.formButtonText} onChange={(e) => set("formButtonText", e.target.value)} placeholder="Button text" className={inputClass} />
            <input type="text" value={value.formButtonLink} onChange={(e) => set("formButtonLink", e.target.value)} placeholder="Button link" className={inputClass} />
          </div>
        </div>
      </div>
    </div>
  )
}