"use client"

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

export interface QuickStatItem {
  iconKey: string
  label: string
  value: string
}

interface Props {
  value: QuickStatItem[]
  onChange: (value: QuickStatItem[]) => void
}

const inputClass =
  "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]"

export function ProcedureQuickStats({ value, onChange }: Props) {
  function addItem() {
    onChange([...value, { iconKey: "", label: "", value: "" }])
  }

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

  function updateItem(i: number, field: keyof QuickStatItem, val: string) {
    onChange(value.map((item, idx) => idx === i ? { ...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">
          Quick Stats
        </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 Stat
        </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: "var(--border)" }}
        >
          <p className="text-xs text-muted-foreground font-sans">No quick stats 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 stat
          </button>
        </div>
      ) : (
        <div className="flex flex-col gap-3">
          {value.map((item, 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: "rgba(43,182,115,0.02)" }}
              >
                <span
                  className="text-xs font-bold font-sans px-2 py-0.5 rounded-md"
                  style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
                >
                  Stat {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 stat ${i + 1}`}
                >
                  <X className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
              <div className="p-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div className="flex flex-col gap-1.5">
                  <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Icon</label>
                  <IconPicker value={item.iconKey} onChange={(key) => updateItem(i, "iconKey", key)} />
                </div>
                <div className="flex flex-col gap-1.5">
                  <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Label</label>
                  <input
                    type="text"
                    value={item.label}
                    onChange={(e) => updateItem(i, "label", e.target.value)}
                    placeholder="e.g. Recovery Time"
                    className={inputClass}
                  />
                </div>
                <div className="flex flex-col gap-1.5">
                  <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Value</label>
                  <input
                    type="text"
                    value={item.value}
                    onChange={(e) => updateItem(i, "value", e.target.value)}
                    placeholder="e.g. 2–3 weeks"
                    className={inputClass}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}