"use client"

import { Plus, Trash2 } from "lucide-react"
import { IconPicker, getMedicalIconComponent } from "@/components/dashboard/shared/IconPicker"

export interface SpecialtyItem {
  text: string
  iconKey: string
  description: string
}

interface Props {
  value: SpecialtyItem[]
  onChange: (value: SpecialtyItem[]) => void
  showValidationError?: boolean
}

export function DoctorSpecialties({ value, onChange, showValidationError = false }: Props) {
  function addItem() {
    onChange([...value, { text: "", iconKey: "", description: "" }])
  }

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

  function updateItem(index: number, field: keyof SpecialtyItem, val: string) {
    onChange(value.map((item, i) => (i === index ? { ...item, [field]: val } : item)))
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Surgical Specialties
        </label>
        <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" />
          Add Specialty
        </button>
      </div>

      {value.length === 0 ? (
        <div
          className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
          style={{ borderColor: showValidationError ? "#ef4444" : "var(--border)" }}
        >
          <p className="text-xs text-muted-foreground font-sans">No specialties added yet.</p>
          <button
            type="button"
            onClick={addItem}
            className="text-xs cursor-pointer font-semibold font-sans"
            style={{ color: "var(--brand-green)" }}
          >
            Add your first specialty
          </button>
        </div>
      ) : (
        <div className="flex flex-col gap-2">
          {value.map((item, index) => (
            <div
              key={index}
              className="flex flex-col gap-3 p-3 rounded-xl border border-border bg-card"
            >
              <div 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(43,182,115,0.10)", color: "var(--brand-green)" }}
                  aria-hidden="true"
                >
                  {index + 1}
                </span>

                {/* Icon picker */}
                <div className="w-48 shrink-0">
                  <IconPicker
                    value={item.iconKey}
                    onChange={(key) => updateItem(index, "iconKey", key)}
                    invalid={showValidationError && item.iconKey.trim() === ""}
                  />
                </div>

                {/* Text input */}
                <input
                  type="text"
                  value={item.text}
                  onChange={(e) => updateItem(index, "text", e.target.value)}
                  placeholder="e.g. FUE Hair Transplant"
                  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.text.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={`Specialty ${index + 1} text`}
                />

                <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 specialty ${index + 1}`}
                >
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>

              <textarea
                value={item.description}
                onChange={(e) => updateItem(index, "description", e.target.value)}
                placeholder="Specialty explanation"
                rows={2}
                className={`w-full bg-muted border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors resize-y ${
                  showValidationError && item.description.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={`Specialty ${index + 1} description`}
              />
            </div>
          ))}
        </div>
      )}
      {showValidationError && (
        <p className="text-xs font-sans text-red-500">
          Please add at least one complete specialty (text, icon, and description).
        </p>
      )}
    </div>
  )
}