"use client"

import { Plus, Trash2 } from "lucide-react"

export interface DoctorFAQItem {
  question: string
  answer: string
}

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

export function DoctorFAQ({ items, onChange, showValidationError = false }: Props) {
  function addItem() {
    onChange([...items, { question: "", answer: "" }])
  }

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

  function updateItem(index: number, field: keyof DoctorFAQItem, val: string) {
    onChange(items.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">
          Frequently Asked Questions
        </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 Question
        </button>
      </div>

      {items.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 FAQ items yet.</p>
          <button
            type="button"
            onClick={addItem}
            className="text-xs cursor-pointer font-semibold font-sans"
            style={{ color: "var(--brand-green)" }}
          >
            Add your first question
          </button>
        </div>
      ) : (
        <div className="flex flex-col gap-3">
          {items.map((item, index) => (
            <div
              key={index}
              className="flex flex-col gap-2 p-4 rounded-xl border border-border bg-card"
            >
              <div className="flex items-center justify-between gap-2">
                <span
                  className="text-xs font-bold font-sans px-2 py-0.5 rounded-md"
                  style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                >
                  Q{index + 1}
                </span>
                <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"
                  aria-label={`Remove FAQ item ${index + 1}`}
                >
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
              <input
                type="text"
                value={item.question}
                onChange={(e) => updateItem(index, "question", e.target.value)}
                placeholder="Enter question..."
                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 ${
                  showValidationError && item.question.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={`FAQ item ${index + 1} question`}
              />
              <textarea
                value={item.answer}
                onChange={(e) => updateItem(index, "answer", e.target.value)}
                placeholder="Enter answer..."
                rows={3}
                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-none leading-relaxed ${
                  showValidationError && item.answer.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={`FAQ item ${index + 1} answer`}
              />
            </div>
          ))}
        </div>
      )}
      {showValidationError && (
        <p className="text-xs font-sans text-red-500">
          Please add at least one complete FAQ item (question and answer).
        </p>
      )}
    </div>
  )
}