"use client"

import React from "react"

export interface DoctorsSectionData {
  title: string
  subtitle: string
  buttonText: string
  buttonLink: string
}

interface Props {
  value: DoctorsSectionData
  onChange: (value: DoctorsSectionData) => void
  showValidation?: 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 DoctorsSection({ value, onChange, showValidation = false }: Props) {
  function set<K extends keyof DoctorsSectionData>(key: K, val: DoctorsSectionData[K]) {
    onChange({ ...value, [key]: val })
  }

  return (
    <div className="flex flex-col gap-5">
      <div
        className="flex items-start gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
        style={{ background: "rgba(29,45,104,0.04)", borderColor: "rgba(29,45,104,0.12)", color: "var(--brand-navy)" }}
      >
        <svg className="w-4 h-4 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>
          The doctors listed on this section are pulled dynamically from the Doctors section. Configure them there.
        </span>
      </div>

      <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. Meet Our Expert Doctors" className={fieldClass(showValidation && !value.title.trim())} />
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>Subtitle</Label>
        <textarea value={value.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="A brief subtitle about your team..." rows={2} className={`${fieldClass(showValidation && !value.subtitle.trim())} resize-none leading-relaxed`} />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="flex flex-col gap-1.5">
          <Label>Button Text</Label>
          <input type="text" value={value.buttonText} onChange={(e) => set("buttonText", e.target.value)} placeholder="e.g. View All Doctors" className={fieldClass(showValidation && !value.buttonText.trim())} />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Button Link</Label>
          <input type="text" value={value.buttonLink} onChange={(e) => set("buttonLink", e.target.value)} placeholder="e.g. /doctors" className={fieldClass(showValidation && !value.buttonLink.trim())} />
        </div>
      </div>
    </div>
  )
}