"use client"

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

export interface RecoveryStepItem {
  cardColor: string
  duration: string
  title: string
  description: string
  discomfortLevelLabel: string
  discomfortLevelValue: string
}

export interface ProcedureRecoveryData {
  eyebrow: string
  title: string
  subtitle: string
  steps: RecoveryStepItem[]
  noteText: string
}

interface Props {
  value: ProcedureRecoveryData
  onChange: (value: ProcedureRecoveryData) => void
}

const PRESET_COLORS = [
  "#2BB673", "#1D2D68", "#0EA5E9", "#F59E0B", "#EF4444",
  "#8B5CF6", "#EC4899", "#14B8A6", "#F97316", "#6366F1",
]

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]"

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

function ColorPicker({ value, onChange }: { value: string; onChange: (c: string) => void }) {
  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Card Color</label>
      <div className="flex items-center gap-1.5 flex-wrap">
        {PRESET_COLORS.map((c) => (
          <button
            key={c}
            type="button"
            onClick={() => onChange(c)}
            className="w-6 h-6 rounded-md transition-all cursor-pointer shrink-0"
            style={{ background: c, outline: value === c ? `3px solid ${c}` : "none", outlineOffset: "2px" }}
            aria-label={`Select color ${c}`}
            aria-pressed={value === c}
          />
        ))}
        <div className="relative w-6 h-6 rounded-md overflow-hidden border border-dashed border-border cursor-pointer" title="Custom color">
          <input type="color" value={value || "#2BB673"} onChange={(e) => onChange(e.target.value)} className="absolute inset-0 w-full h-full cursor-pointer opacity-0" aria-label="Custom color" />
          <div className="w-full h-full rounded-md" style={{ background: value || "#2BB673" }} />
        </div>
      </div>
    </div>
  )
}

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

  function addStep() {
    set("steps", [...value.steps, {
      cardColor: PRESET_COLORS[0], duration: "", title: "", description: "",
      discomfortLevelLabel: "", discomfortLevelValue: "",
    }])
  }
  function removeStep(i: number) {
    set("steps", value.steps.filter((_, idx) => idx !== i))
  }
  function updateStep(i: number, field: keyof RecoveryStepItem, val: string) {
    set("steps", value.steps.map((s, idx) => idx === i ? { ...s, [field]: val } : s))
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Section Headings */}
      <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-3 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. Recovery" 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. Recovery Steps" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Subtitle</label><input type="text" value={value.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="e.g. What to expect" className={inputClass} /></div>
        </div>
      </div>

      {/* Steps */}
      <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">Recovery Steps</label>
          <button
            type="button"
            onClick={addStep}
            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"
            style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
          >
            <Plus className="w-3.5 h-3.5" aria-hidden="true" />
            Add Step
          </button>
        </div>
        {value.steps.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed" style={{ borderColor: "var(--border)" }}>
            <p className="text-xs text-muted-foreground font-sans">No recovery steps added yet.</p>
            <button type="button" onClick={addStep} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>Add first step</button>
          </div>
        ) : (
          <div className="flex flex-col gap-4">
            {value.steps.map((step, i) => (
              <div key={i} className="rounded-2xl border border-border bg-card overflow-hidden">
                <div className="flex items-center justify-between px-4 py-2.5 border-b border-border" style={{ background: step.cardColor ? `${step.cardColor}10` : "rgba(43,182,115,0.02)" }}>
                  <div className="flex items-center gap-2">
                    <span
                      className="text-xs font-bold font-sans px-2 py-0.5 rounded-md text-white"
                      style={{ background: step.cardColor || "var(--brand-green)" }}
                    >
                      Step {i + 1}
                    </span>
                  </div>
                  <button type="button" onClick={() => removeStep(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 step ${i + 1}`}>
                    <X className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <div className="p-4 flex flex-col gap-3">
                  <ColorPicker value={step.cardColor} onChange={(c) => updateStep(i, "cardColor", c)} />
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Duration</label>
                      <input type="text" value={step.duration} onChange={(e) => updateStep(i, "duration", e.target.value)} placeholder="e.g. Week 1–2" className={inputMuted} />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Title</label>
                      <input type="text" value={step.title} onChange={(e) => updateStep(i, "title", e.target.value)} placeholder="e.g. Initial Recovery" className={inputMuted} />
                    </div>
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Description</label>
                    <textarea value={step.description} onChange={(e) => updateStep(i, "description", e.target.value)} placeholder="Describe this recovery step..." rows={2} className={`${inputMuted} resize-none leading-relaxed`} />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Discomfort Level Label</label>
                      <input type="text" value={step.discomfortLevelLabel} onChange={(e) => updateStep(i, "discomfortLevelLabel", e.target.value)} placeholder="e.g. Discomfort Level" className={inputMuted} />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Discomfort Level Value</label>
                      <input type="text" value={step.discomfortLevelValue} onChange={(e) => updateStep(i, "discomfortLevelValue", e.target.value)} placeholder="e.g. Mild" className={inputMuted} />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Note Text */}
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Note Text</label>
        <textarea value={value.noteText} onChange={(e) => set("noteText", e.target.value)} placeholder="e.g. Recovery times may vary based on individual factors..." rows={2} className={inputClass + " resize-none leading-relaxed"} />
      </div>
    </div>
  )
}