"use client"

import { IconPicker } from "@/components/dashboard/shared/IconPicker"

export interface CTASectionData {
  eyebrow: string
  title: string
  subtitle: string
  primaryButtonText: string
  primaryButtonLink: string
  secondaryButtonIcon: string
  secondaryButtonText: string
  secondaryButtonLink: string
}

interface Props {
  value: CTASectionData
  onChange: (value: CTASectionData) => void
  validation?: {
    eyebrow?: boolean
    title?: boolean
    subtitle?: boolean
    primaryButtonText?: boolean
    primaryButtonLink?: boolean
    secondaryButtonIcon?: boolean
    secondaryButtonText?: boolean
    secondaryButtonLink?: 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({ htmlFor, children }: { htmlFor?: string; children: React.ReactNode }) {
  return (
    <label htmlFor={htmlFor} className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
      {children}
    </label>
  )
}

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

  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="cta-eyebrow">Eyebrow Text</Label>
        <input
          id="cta-eyebrow"
          type="text"
          value={value.eyebrow}
          onChange={(e) => set("eyebrow", e.target.value)}
          placeholder="e.g. Ready to Begin?"
          className={fieldClass(!!validation?.eyebrow)}
        />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="cta-title">Title</Label>
        <input
          id="cta-title"
          type="text"
          value={value.title}
          onChange={(e) => set("title", e.target.value)}
          placeholder="e.g. Start Your Transformation Today"
          className={fieldClass(!!validation?.title)}
        />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label htmlFor="cta-subtitle">Subtitle</Label>
        <textarea
          id="cta-subtitle"
          value={value.subtitle}
          onChange={(e) => set("subtitle", e.target.value)}
          placeholder="A supporting message for the call to action..."
          rows={3}
          className={`${fieldClass(!!validation?.subtitle)} resize-none leading-relaxed`}
        />
      </div>

      {/* Buttons */}
      <div
        className="rounded-xl border border-border p-4 flex flex-col gap-4"
        style={{ background: "rgba(43,182,115,0.03)" }}
      >
        <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Primary Button
        </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-muted-foreground font-sans">Button Text</label>
            <input
              type="text"
              value={value.primaryButtonText}
              onChange={(e) => set("primaryButtonText", e.target.value)}
              placeholder="e.g. Book a Consultation"
              className={fieldClass(!!validation?.primaryButtonText)}
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-muted-foreground font-sans">Button Link</label>
            <input
              type="text"
              value={value.primaryButtonLink}
              onChange={(e) => set("primaryButtonLink", e.target.value)}
              placeholder="e.g. /contact"
              className={fieldClass(!!validation?.primaryButtonLink)}
            />
          </div>
        </div>
      </div>

      <div
        className="rounded-xl border border-border p-4 flex flex-col gap-4"
        style={{ background: "rgba(29,45,104,0.03)" }}
      >
        <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Secondary Button
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex flex-col gap-1.5 sm:col-span-2">
            <label className="text-xs font-semibold text-muted-foreground font-sans">Icon</label>
            <IconPicker
              value={value.secondaryButtonIcon}
              onChange={(key) => set("secondaryButtonIcon", key)}
              invalid={!!validation?.secondaryButtonIcon}
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-muted-foreground font-sans">Button Text</label>
            <input
              type="text"
              value={value.secondaryButtonText}
              onChange={(e) => set("secondaryButtonText", e.target.value)}
              placeholder="e.g. View Our Doctors"
              className={fieldClass(!!validation?.secondaryButtonText)}
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-muted-foreground font-sans">Button Link</label>
            <input
              type="text"
              value={value.secondaryButtonLink}
              onChange={(e) => set("secondaryButtonLink", e.target.value)}
              placeholder="e.g. /doctors"
              className={fieldClass(!!validation?.secondaryButtonLink)}
            />
          </div>
        </div>
      </div>
    </div>
  )
}