"use client"

import { IconPicker } from "@/components/dashboard/shared/IconPicker"
import type { ProceduresFinalCTASectionData } from "@/lib/pages/procedures-page/form-types"

interface Props {
  value: ProceduresFinalCTASectionData
  onChange: (value: ProceduresFinalCTASectionData) => void
  disabled?: boolean
  validation?: {
    eyebrow?: boolean
    title?: boolean
    subtitle?: boolean
    buttonIcon?: boolean
    buttonText?: boolean
    buttonLink?: boolean
  }
}

function fieldClass(invalid = false) {
  return `w-full bg-card 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 ${
    invalid
      ? "border-red-400 focus:ring-red-200/70 focus:border-red-500"
      : "border-border focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
  }`
}

function Label({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
      {children}
    </label>
  )
}

export function ProceduresFinalCTASection({ value, onChange, disabled = false, validation }: Props) {
  function set<K extends keyof ProceduresFinalCTASectionData>(key: K, val: ProceduresFinalCTASectionData[K]) {
    onChange({ ...value, [key]: val })
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Eyebrow */}
      <div className="flex flex-col gap-1.5">
        <Label>Eyebrow</Label>
        <input
          type="text"
          value={value.eyebrow}
          disabled={disabled}
          onChange={(e) => set("eyebrow", e.target.value)}
          placeholder="e.g. Get Started Today"
          className={fieldClass(!!validation?.eyebrow)}
        />
      </div>

      {/* Title */}
      <div className="flex flex-col gap-1.5">
        <Label>Title</Label>
        <input
          type="text"
          value={value.title}
          disabled={disabled}
          onChange={(e) => set("title", e.target.value)}
          placeholder="e.g. Start Your Medical Journey With Us"
          className={fieldClass(!!validation?.title)}
        />
      </div>

      {/* Subtitle */}
      <div className="flex flex-col gap-1.5">
        <Label>Subtitle</Label>
        <textarea
          value={value.subtitle}
          disabled={disabled}
          onChange={(e) => set("subtitle", e.target.value)}
          placeholder="Write a compelling subtitle for the CTA section..."
          rows={3}
          className={`${fieldClass(!!validation?.subtitle)} resize-none leading-relaxed`}
        />
      </div>

      {/* Button */}
      <div
        className="flex flex-col gap-4 p-4 rounded-xl border border-border bg-muted/40"
      >
        <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Button
        </p>

        {/* Button Icon */}
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-semibold text-muted-foreground font-sans">Icon</label>
          <div className={disabled ? "pointer-events-none opacity-60" : ""}>
            <IconPicker
              value={value.buttonIcon}
              onChange={(key) => set("buttonIcon", key)}
              invalid={!!validation?.buttonIcon}
            />
          </div>
        </div>

        {/* Button Text + Link */}
        <div className="grid grid-cols-2 gap-3">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-muted-foreground font-sans">Text</label>
            <input
              type="text"
              value={value.buttonText}
              disabled={disabled}
              onChange={(e) => set("buttonText", e.target.value)}
              placeholder="e.g. Book Free Consultation"
              className={fieldClass(!!validation?.buttonText)}
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-muted-foreground font-sans">Link URL</label>
            <input
              type="text"
              value={value.buttonLink}
              disabled={disabled}
              onChange={(e) => set("buttonLink", e.target.value)}
              placeholder="e.g. /contact"
              className={fieldClass(!!validation?.buttonLink)}
            />
          </div>
        </div>
      </div>
    </div>
  )
}