"use client"

import { Zap, Link, Type, AlignLeft, Plus, Trash2 } from "lucide-react"
import { IconPicker, getMedicalIconComponent } from "@/components/dashboard/shared/IconPicker"

export interface ConversionButton {
  icon: string
  text: string
  link: string
}

export interface ConversionCardData {
  icon: string
  title: string
  description: string
  primaryButton: ConversionButton
  secondaryButton: ConversionButton
}

interface ConversionCardProps {
  value: ConversionCardData | null
  onChange: (value: ConversionCardData | null) => void
}

const emptyButton: ConversionButton = { icon: "", text: "", link: "" }

const defaultValue: ConversionCardData = {
  icon: "",
  title: "",
  description: "",
  primaryButton: { ...emptyButton },
  secondaryButton: { ...emptyButton },
}

export function ConversionCard({ value, onChange }: ConversionCardProps) {
  function enable() {
    onChange({ ...defaultValue })
  }

  function disable() {
    onChange(null)
  }

  function updateField<K extends keyof ConversionCardData>(key: K, val: ConversionCardData[K]) {
    if (!value) return
    onChange({ ...value, [key]: val })
  }

  function updateButton(which: "primaryButton" | "secondaryButton", field: keyof ConversionButton, val: string) {
    if (!value) return
    onChange({
      ...value,
      [which]: { ...value[which], [field]: val },
    })
  }

  const CardIcon = value?.icon ? getMedicalIconComponent(value.icon) : null

  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">
          Conversion 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)" }}
        >
          <Zap className="w-5 h-5 text-muted-foreground" aria-hidden="true" />
          <p className="text-xs text-muted-foreground font-sans text-center">
            Add a conversion card to drive user action — includes icon, title, description and two CTA buttons.
          </p>
          <button
            type="button"
            onClick={enable}
            className="text-xs cursor-pointer font-semibold font-sans"
            style={{ color: "var(--brand-green)" }}
          >
            Add conversion card
          </button>
        </div>
      ) : (
        <div
          className="rounded-2xl border border-border overflow-hidden"
          style={{ background: "rgba(43,182,115,0.02)" }}
        >
          {/* Card preview strip */}
          <div
            className="flex items-center gap-3 px-4 py-3 border-b border-border"
            style={{ background: "rgba(29,45,104,0.03)" }}
          >
            <div
              className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
              style={{ background: "rgba(43,182,115,0.12)" }}
            >
              {CardIcon ? (
                <CardIcon className="w-4 h-4" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
              ) : (
                <Zap className="w-4 h-4" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
              )}
            </div>
            <div>
              <p className="text-xs font-bold text-foreground font-sans">
                {value.title || "Conversion Card"}
              </p>
              <p className="text-[11px] text-muted-foreground font-sans">
                Preview of card appearance
              </p>
            </div>
          </div>

          <div className="p-4 flex flex-col gap-4">
            {/* Icon + Title row */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {/* Icon */}
              <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">
                  <Zap className="w-3 h-3" aria-hidden="true" />
                  Card Icon
                </label>
                <IconPicker value={value.icon} onChange={(v) => updateField("icon", v)} />
              </div>

              {/* 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" />
                  Title
                </label>
                <input
                  type="text"
                  value={value.title}
                  onChange={(e) => updateField("title", e.target.value)}
                  placeholder="Get a Free Hair Assessment"
                  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>
            </div>

            {/* Description */}
            <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">
                <AlignLeft className="w-3 h-3" aria-hidden="true" />
                Description
              </label>
              <textarea
                value={value.description}
                onChange={(e) => updateField("description", e.target.value)}
                placeholder="Enter card description..."
                rows={2}
                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 resize-none leading-relaxed"
              />
            </div>

            {/* Buttons */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {/* Primary Button */}
              <div
                className="flex flex-col gap-2 p-3 rounded-xl border border-border"
                style={{ background: "rgba(43,182,115,0.04)" }}
              >
                <div className="flex items-center gap-1.5">
                  <div
                    className="w-2 h-2 rounded-full shrink-0"
                    style={{ background: "var(--brand-green)" }}
                    aria-hidden="true"
                  />
                  <span className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
                    Primary Button
                  </span>
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-[11px] text-muted-foreground font-sans">Icon</label>
                  <IconPicker
                    value={value.primaryButton.icon}
                    onChange={(v) => updateButton("primaryButton", "icon", v)}
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-[11px] text-muted-foreground font-sans flex items-center gap-1">
                    <Type className="w-3 h-3" aria-hidden="true" />
                    Button Text
                  </label>
                  <input
                    type="text"
                    value={value.primaryButton.text}
                    onChange={(e) => updateButton("primaryButton", "text", e.target.value)}
                    placeholder="e.g. Book Now"
                    className="bg-card border border-border rounded-xl px-3 py-2 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>

                <div className="flex flex-col gap-1.5">
                  <label className="text-[11px] text-muted-foreground font-sans flex items-center gap-1">
                    <Link className="w-3 h-3" aria-hidden="true" />
                    Button Link
                  </label>
                  <input
                    type="text"
                    value={value.primaryButton.link}
                    onChange={(e) => updateButton("primaryButton", "link", e.target.value)}
                    placeholder="https://..."
                    className="bg-card border border-border rounded-xl px-3 py-2 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>
              </div>

              {/* Secondary Button */}
              <div
                className="flex flex-col gap-2 p-3 rounded-xl border border-border"
                style={{ background: "rgba(29,45,104,0.03)" }}
              >
                <div className="flex items-center gap-1.5">
                  <div
                    className="w-2 h-2 rounded-full shrink-0 border"
                    style={{ borderColor: "var(--brand-navy)" }}
                    aria-hidden="true"
                  />
                  <span className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
                    Secondary Button
                  </span>
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-[11px] text-muted-foreground font-sans">Icon</label>
                  <IconPicker
                    value={value.secondaryButton.icon}
                    onChange={(v) => updateButton("secondaryButton", "icon", v)}
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-[11px] text-muted-foreground font-sans flex items-center gap-1">
                    <Type className="w-3 h-3" aria-hidden="true" />
                    Button Text
                  </label>
                  <input
                    type="text"
                    value={value.secondaryButton.text}
                    onChange={(e) => updateButton("secondaryButton", "text", e.target.value)}
                    placeholder="e.g. Learn More"
                    className="bg-card border border-border rounded-xl px-3 py-2 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>

                <div className="flex flex-col gap-1.5">
                  <label className="text-[11px] text-muted-foreground font-sans flex items-center gap-1">
                    <Link className="w-3 h-3" aria-hidden="true" />
                    Button Link
                  </label>
                  <input
                    type="text"
                    value={value.secondaryButton.link}
                    onChange={(e) => updateButton("secondaryButton", "link", e.target.value)}
                    placeholder="https://..."
                    className="bg-card border border-border rounded-xl px-3 py-2 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>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}