"use client"

import { Plus, Trash2, GraduationCap, Award, BookOpen, Globe2 } from "lucide-react"

export interface DoctorCredentialsData {
  education: string[]
  certifications: string[]
  researchPublications: string[]
  internationalExperience: string[]
}

interface LineListProps {
  label: string
  icon: React.ReactNode
  items: string[]
  onChange: (items: string[]) => void
  placeholder: string
  addLabel: string
  emptyLabel: string
  showValidationError?: boolean
}

function LineList({ label, icon, items, onChange, placeholder, addLabel, emptyLabel, showValidationError = false }: LineListProps) {
  function addItem() {
    onChange([...items, ""])
  }

  function removeItem(index: number) {
    onChange(items.filter((_, i) => i !== index))
  }

  function updateItem(index: number, val: string) {
    onChange(items.map((item, i) => (i === index ? val : item)))
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-muted-foreground">{icon}</span>
          <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            {label}
          </label>
        </div>
        <button
          type="button"
          onClick={addItem}
          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" />
          {addLabel}
        </button>
      </div>

      {items.length === 0 ? (
        <div
          className="flex flex-col items-center justify-center gap-2 py-6 rounded-xl border border-dashed"
          style={{ borderColor: showValidationError ? "#ef4444" : "var(--border)" }}
        >
          <p className="text-xs text-muted-foreground font-sans">{emptyLabel}</p>
          <button
            type="button"
            onClick={addItem}
            className="text-xs cursor-pointer font-semibold font-sans"
            style={{ color: "var(--brand-green)" }}
          >
            {addLabel}
          </button>
        </div>
      ) : (
        <div className="flex flex-col gap-2">
          {items.map((item, index) => (
            <div key={index} className="flex items-center gap-2">
              <span
                className="w-5 h-5 rounded-md flex items-center justify-center shrink-0 text-[10px] font-bold font-sans"
                style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                aria-hidden="true"
              >
                {index + 1}
              </span>
              <input
                type="text"
                value={item}
                onChange={(e) => updateItem(index, e.target.value)}
                placeholder={placeholder}
                className={`flex-1 bg-muted border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors ${
                  showValidationError && item.trim() === ""
                    ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500"
                    : "border-border focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
                }`}
                aria-label={`${label} item ${index + 1}`}
              />
              <button
                type="button"
                onClick={() => removeItem(index)}
                className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors shrink-0"
                aria-label={`Remove ${label} item ${index + 1}`}
              >
                <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
              </button>
            </div>
          ))}
        </div>
      )}
      {showValidationError && items.every((item) => item.trim() === "") && (
        <p className="text-xs font-sans text-red-500">{label} is required.</p>
      )}
    </div>
  )
}

interface Props {
  value: DoctorCredentialsData
  onChange: (value: DoctorCredentialsData) => void
  invalidSections?: {
    education?: boolean
    certifications?: boolean
    researchPublications?: boolean
    internationalExperience?: boolean
  }
}

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

  return (
    <div className="flex flex-col gap-6">
      <LineList
        label="Education"
        icon={<GraduationCap className="w-4 h-4" />}
        items={value.education}
        onChange={(v) => set("education", v)}
        placeholder="e.g. MD, Hacettepe University, Ankara, 2005"
        addLabel="Add Education"
        emptyLabel="No education entries yet."
        showValidationError={Boolean(invalidSections?.education)}
      />

      <div className="border-t border-border" />

      <LineList
        label="Certifications"
        icon={<Award className="w-4 h-4" />}
        items={value.certifications}
        onChange={(v) => set("certifications", v)}
        placeholder="e.g. Board-Certified Hair Restoration Surgeon (IBHRS)"
        addLabel="Add Certification"
        emptyLabel="No certifications yet."
        showValidationError={Boolean(invalidSections?.certifications)}
      />

      <div className="border-t border-border" />

      <LineList
        label="Research & Publications"
        icon={<BookOpen className="w-4 h-4" />}
        items={value.researchPublications}
        onChange={(v) => set("researchPublications", v)}
        placeholder="e.g. Published study on FUE technique, ISHRS Journal 2019"
        addLabel="Add Publication"
        emptyLabel="No research or publications yet."
        showValidationError={Boolean(invalidSections?.researchPublications)}
      />

      <div className="border-t border-border" />

      <LineList
        label="International Experience"
        icon={<Globe2 className="w-4 h-4" />}
        items={value.internationalExperience}
        onChange={(v) => set("internationalExperience", v)}
        placeholder="e.g. European Hair Surgery Congress, Berlin, 2022"
        addLabel="Add Entry"
        emptyLabel="No international experience entries yet."
        showValidationError={Boolean(invalidSections?.internationalExperience)}
      />
    </div>
  )
}