"use client"

import { ShieldCheck, Plus, Trash2, Type, Hash } from "lucide-react"

export interface TrustCardItem {
  label: string
  value: string
}

export interface TrustCardData {
  title: string
  items: TrustCardItem[]
}

interface TrustCardProps {
  value: TrustCardData | null
  onChange: (value: TrustCardData | null) => void
}

const defaultValue: TrustCardData = {
  title: "",
  items: [{ label: "", value: "" }],
}

export function TrustCard({ value, onChange }: TrustCardProps) {
  function enable() {
    onChange({ ...defaultValue, items: [{ ...defaultValue.items[0] }] })
  }

  function disable() {
    onChange(null)
  }

  function updateTitle(title: string) {
    if (!value) return
    onChange({ ...value, title })
  }

  function addItem() {
    if (!value) return
    onChange({ ...value, items: [...value.items, { label: "", value: "" }] })
  }

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

  function updateItem(index: number, field: keyof TrustCardItem, val: string) {
    if (!value) return
    onChange({
      ...value,
      items: value.items.map((item, i) => (i === index ? { ...item, [field]: val } : item)),
    })
  }

  return (
    <div className="flex flex-col gap-3">
      {/* Header */}
      <div className="flex items-center justify-between">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Trust Card
        </label>
        {value ? (
          <button
            type="button"
            onClick={disable}
            className="flex items-center cursor-pointer 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(239,68,68,0.10)", color: "#ef4444" }}
          >
            <Trash2 className="w-3 h-3" aria-hidden="true" />
            Remove Card
          </button>
        ) : (
          <button
            type="button"
            onClick={enable}
            className="flex items-center cursor-pointer 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 Card
          </button>
        )}
      </div>

      {!value ? (
        <div
          className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
          style={{ borderColor: "var(--border)" }}
        >
          <ShieldCheck className="w-5 h-5 text-muted-foreground" aria-hidden="true" />
          <p className="text-xs text-muted-foreground font-sans text-center">
            Add a trust card to display key facts like success rates, experience, and certifications.
          </p>
          <button
            type="button"
            onClick={enable}
            className="text-xs cursor-pointer font-semibold font-sans"
            style={{ color: "var(--brand-green)" }}
          >
            Add trust card
          </button>
        </div>
      ) : (
        <div
          className="rounded-2xl border border-border overflow-hidden"
          style={{ background: "rgba(29,45,104,0.02)" }}
        >
          {/* Card header strip */}
          <div
            className="flex items-center gap-3 px-4 py-3 border-b border-border"
            style={{ background: "rgba(29,45,104,0.04)" }}
          >
            <div
              className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
              style={{ background: "rgba(29,45,104,0.10)" }}
            >
              <ShieldCheck className="w-4 h-4" style={{ color: "var(--brand-navy)" }} aria-hidden="true" />
            </div>
            <div>
              <p className="text-xs font-bold text-foreground font-sans">
                {value.title || "Trust Card"}
              </p>
              <p className="text-[11px] text-muted-foreground font-sans">
                {value.items.length} {value.items.length === 1 ? "item" : "items"}
              </p>
            </div>
          </div>

          <div className="p-4 flex flex-col gap-4">
            {/* Title */}
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold text-muted-foreground font-sans uppercase tracking-wider flex items-center gap-1.5">
                <Type className="w-3 h-3" aria-hidden="true" />
                Card Title
              </label>
              <input
                type="text"
                value={value.title}
                onChange={(e) => updateTitle(e.target.value)}
                placeholder="LIVIST MEDICAL – QUICK FACTS"
                className="bg-card border border-border rounded-xl px-3 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"
              />
            </div>

            {/* Items */}
            <div className="flex flex-col gap-2">
              <div className="flex items-center justify-between">
                <label className="text-xs font-semibold text-muted-foreground font-sans uppercase tracking-wider flex items-center gap-1.5">
                  <Hash className="w-3 h-3" aria-hidden="true" />
                  Items
                </label>
                <button
                  type="button"
                  onClick={addItem}
                  className="flex items-center cursor-pointer 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 Item
                </button>
              </div>

              {value.items.length === 0 ? (
                <div
                  className="flex flex-col items-center justify-center gap-2 py-5 rounded-xl border border-dashed"
                  style={{ borderColor: "var(--border)" }}
                >
                  <p className="text-xs text-muted-foreground font-sans">No 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 item
                  </button>
                </div>
              ) : (
                <div className="flex flex-col gap-2">
                  {value.items.map((item, index) => (
                    <div
                      key={index}
                      className="grid grid-cols-[1fr_1fr_auto] gap-2 items-center p-3 rounded-xl border border-border bg-card"
                    >
                      {/* Label */}
                      <div className="flex flex-col gap-1">
                        <span className="text-[11px] text-muted-foreground font-sans">Label</span>
                        <input
                          type="text"
                          value={item.label}
                          onChange={(e) => updateItem(index, "label", e.target.value)}
                          placeholder="e.g. Success Rate"
                          className="bg-muted border border-border rounded-lg px-3 py-1.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"
                          aria-label={`Trust card item ${index + 1} label`}
                        />
                      </div>

                      {/* Value */}
                      <div className="flex flex-col gap-1">
                        <span className="text-[11px] text-muted-foreground font-sans">Value</span>
                        <input
                          type="text"
                          value={item.value}
                          onChange={(e) => updateItem(index, "value", e.target.value)}
                          placeholder="e.g. 98%"
                          className="bg-muted border border-border rounded-lg px-3 py-1.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"
                          aria-label={`Trust card item ${index + 1} value`}
                        />
                      </div>

                      {/* Remove */}
                      <button
                        type="button"
                        onClick={() => removeItem(index)}
                        className="self-end p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors"
                        aria-label={`Remove trust card item ${index + 1}`}
                      >
                        <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>

           
          </div>
        </div>
      )}
    </div>
  )
}