"use client"

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

export interface ProcedureFAQItem {
  question: string
  answer: string
}

interface Props {
  items: ProcedureFAQItem[]
  onChange: (items: ProcedureFAQItem[]) => void
  eyebrow?: string
  onEyebrowChange?: (val: string) => void
  sectionTitle?: string
  onSectionTitleChange?: (val: string) => void
  subtitle?: string
  onSubtitleChange?: (val: string) => void
  buttonText?: string
  onButtonTextChange?: (val: string) => void
  buttonLink?: string
  onButtonLinkChange?: (val: string) => void
  showValidationError?: boolean
}

const inputClass =
  "w-full bg-card border border-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 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

export function ProcedureFAQ({
  items,
  onChange,
  eyebrow = "",
  onEyebrowChange,
  sectionTitle = "",
  onSectionTitleChange,
  subtitle = "",
  onSubtitleChange,
  buttonText = "",
  onButtonTextChange,
  buttonLink = "",
  onButtonLinkChange,
  showValidationError = false,
}: Props) {
  function addItem() {
    onChange([...items, { question: "", answer: "" }])
  }
  function removeItem(i: number) {
    onChange(items.filter((_, idx) => idx !== i))
  }
  function updateItem(i: number, field: keyof ProcedureFAQItem, val: string) {
    onChange(items.map((item, idx) => idx === i ? { ...item, [field]: val } : item))
  }

  return (
    <div className="flex flex-col gap-3">
      {/* Section headings */}
      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4 mb-2">
        <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-3 gap-3">
          {onEyebrowChange && (
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold text-foreground font-sans">Eyebrow</label>
              <input type="text" value={eyebrow} onChange={(e) => onEyebrowChange(e.target.value)} placeholder="e.g. FAQ" className={inputClass} />
            </div>
          )}
          {onSectionTitleChange && (
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold text-foreground font-sans">Title</label>
              <input type="text" value={sectionTitle} onChange={(e) => onSectionTitleChange(e.target.value)} placeholder="e.g. Frequently Asked Questions" className={inputClass} />
            </div>
          )}
          {onSubtitleChange && (
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold text-foreground font-sans">Subtitle</label>
              <input type="text" value={subtitle} onChange={(e) => onSubtitleChange(e.target.value)} placeholder="e.g. Everything you need to know" className={inputClass} />
            </div>
          )}
        </div>
        {(onButtonTextChange || onButtonLinkChange) && (
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {onButtonTextChange && (
              <div className="flex flex-col gap-1.5">
                <label className="text-xs font-semibold text-foreground font-sans">Button Text</label>
                <input type="text" value={buttonText} onChange={(e) => onButtonTextChange(e.target.value)} placeholder="e.g. Ask a Question" className={inputClass} />
              </div>
            )}
            {onButtonLinkChange && (
              <div className="flex flex-col gap-1.5">
                <label className="text-xs font-semibold text-foreground font-sans">Button Link</label>
                <input type="text" value={buttonLink} onChange={(e) => onButtonLinkChange(e.target.value)} placeholder="e.g. /contact" className={inputClass} />
              </div>
            )}
          </div>
        )}
      </div>

      <div className="flex items-center justify-between">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Questions & Answers</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, i) => (
            <div key={i} 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{i + 1}
                </span>
                <button type="button" onClick={() => removeItem(i)} 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 ${i + 1}`}>
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
              <input
                type="text"
                value={item.question}
                onChange={(e) => updateItem(i, "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 && 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]"}`}
              />
              <textarea
                value={item.answer}
                onChange={(e) => updateItem(i, "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 && 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]"}`}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  )
}