"use client"

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

// ─── Types ────────────────────────────────────────────────────────────────────

export interface DoctorsCTASectionData {
  eyebrow: string
  title: string
  description: string
  primaryButtonText: string
  primaryButtonLink: string
  secondaryButtonIcon: string
  secondaryButtonText: string
  secondaryButtonLink: string
}

// ─── Shared UI helpers ────────────────────────────────────────────────────────

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>
  )
}

function SubLabel({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-xs font-semibold text-muted-foreground font-sans">
      {children}
    </label>
  )
}

function GroupCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/40">
      <p
        className="text-[11px] font-bold uppercase tracking-wider font-sans"
        style={{ color: "var(--brand-navy)" }}
      >
        {title}
      </p>
      {children}
    </div>
  )
}

// ─── Main component ───────────────────────────────────────────────────────────

interface Props {
  value: DoctorsCTASectionData
  onChange: (value: DoctorsCTASectionData) => void
  validation?: {
    eyebrow?: boolean
    title?: boolean
    description?: boolean
    primaryButtonText?: boolean
    primaryButtonLink?: boolean
    secondaryButtonIcon?: boolean
    secondaryButtonText?: boolean
    secondaryButtonLink?: boolean
  }
}

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

  return (
    <div className="flex flex-col gap-6">

      {/* Eyebrow */}
      <div className="flex flex-col gap-1.5">
        <Label>Eyebrow</Label>
        <input
          type="text"
          value={value.eyebrow}
          onChange={(e) => set("eyebrow", e.target.value)}
          placeholder="e.g. Ready to Meet Our Doctors?"
          className={fieldClass(!!validation?.eyebrow)}
        />
      </div>

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

      {/* Description */}
      <div className="flex flex-col gap-1.5">
        <Label>Description</Label>
        <textarea
          value={value.description}
          onChange={(e) => set("description", e.target.value)}
          placeholder="Write a compelling call-to-action description..."
          rows={4}
          className={`${fieldClass(!!validation?.description)} resize-none leading-relaxed`}
        />
      </div>

      {/* Primary Button */}
      <GroupCard title="Primary Button">
        <div className="flex flex-col gap-1.5">
          <SubLabel>Text</SubLabel>
          <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">
          <SubLabel>Link</SubLabel>
          <input
            type="text"
            value={value.primaryButtonLink}
            onChange={(e) => set("primaryButtonLink", e.target.value)}
            placeholder="e.g. /contact or https://..."
            className={fieldClass(!!validation?.primaryButtonLink)}
          />
        </div>
      </GroupCard>

      {/* Secondary Button */}
      <GroupCard title="Secondary Button">
        <div className="flex flex-col gap-1.5">
          <SubLabel>Icon</SubLabel>
          <div
            className={`rounded-xl ${
              validation?.secondaryButtonIcon ? "border border-red-400 p-2 bg-red-50/40" : ""
            }`}
          >
            <IconPicker
              value={value.secondaryButtonIcon}
              onChange={(key) => set("secondaryButtonIcon", key)}
            />
          </div>
        </div>
        <div className="flex flex-col gap-1.5">
          <SubLabel>Text</SubLabel>
          <input
            type="text"
            value={value.secondaryButtonText}
            onChange={(e) => set("secondaryButtonText", e.target.value)}
            placeholder="e.g. Learn More"
            className={fieldClass(!!validation?.secondaryButtonText)}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <SubLabel>Link</SubLabel>
          <input
            type="text"
            value={value.secondaryButtonLink}
            onChange={(e) => set("secondaryButtonLink", e.target.value)}
            placeholder="e.g. /about or https://..."
            className={fieldClass(!!validation?.secondaryButtonLink)}
          />
        </div>
      </GroupCard>

    </div>
  )
}