"use client"

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

export interface HospitalFAQItem {
  question: string
  answer: string
}

export interface HospitalFAQData {
  eyebrow: string
  title: string
  faqs: HospitalFAQItem[]
}

interface Props {
  value: HospitalFAQData
  onChange: (value: HospitalFAQData) => void
  showValidationError?: boolean
}

const inputClass =
  "w-full bg-card border border-border rounded-xl px-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors"

export function HospitalFAQSection({ value, onChange, showValidationError = false }: Props) {
  function set<K extends keyof HospitalFAQData>(key: K, val: HospitalFAQData[K]) {
    onChange({ ...value, [key]: val })
  }

  function updateFAQ(idx: number, field: keyof HospitalFAQItem, val: string) {
    const updated = value.faqs.map((f, i) => (i === idx ? { ...f, [field]: val } : f))
    set("faqs", updated)
  }

  function addFAQ() {
    set("faqs", [...value.faqs, { question: "", answer: "" }])
  }

  function removeFAQ(idx: number) {
    set("faqs", value.faqs.filter((_, i) => i !== idx))
  }

  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <div className="flex items-center gap-2 pb-2 border-b border-border">
          <span className="w-1 h-4 rounded-full shrink-0" style={{ background: "var(--brand-green)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Section Headings</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Eyebrow</label>
            <input type="text" value={value.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. FAQ" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Title</label>
            <input type="text" value={value.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Frequently Asked Questions" className={inputClass} />
          </div>
        </div>
      </div>

      <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 ({value.faqs.length})
          </label>
          <button
            type="button"
            onClick={addFAQ}
            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>

        {value.faqs.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">
              {showValidationError ? "At least one FAQ is required." : "No FAQ items yet."}
            </p>
            <button type="button" onClick={addFAQ} 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">
            {value.faqs.map((faq, idx) => (
              <div key={idx} 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{idx + 1}
                  </span>
                  <button
                    type="button"
                    onClick={() => removeFAQ(idx)}
                    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 ${idx + 1}`}
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <input
                  type="text"
                  value={faq.question}
                  onChange={(e) => updateFAQ(idx, "question", e.target.value)}
                  placeholder="Enter question..."
                  className={`w-full bg-muted bg-white border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors ${
                    showValidationError && faq.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 ${idx + 1} question`}
                />
                <textarea
                  value={faq.answer}
                  onChange={(e) => updateFAQ(idx, "answer", e.target.value)}
                  placeholder="Enter answer..."
                  rows={3}
                  className={`w-full bg-muted bg-white 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 && faq.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 ${idx + 1} answer`}
                />
              </div>
            ))}
          </div>
        )}
        {showValidationError && value.faqs.length > 0 && (
          <p className="text-xs font-sans text-red-500">
            Each FAQ requires both a question and an answer before publishing.
          </p>
        )}
      </div>
    </div>
  )
}