"use client"

import { Plus, Trash2 } from "lucide-react"
import { IconPicker } from "@/components/dashboard/shared/IconPicker"
import { InlineImageUploader } from "@/components/dashboard/home/InlineImageUploader"
import { useCmsPagePending } from "@/components/dashboard/cms-pages/CmsPagePendingContext"
import type {
  ProceduresHeroSectionData,
  ProceduresHeroCategory,
} from "@/lib/pages/procedures-page/form-types"

interface Props {
  value: ProceduresHeroSectionData
  onChange: (value: ProceduresHeroSectionData) => void
  isDefaultLanguage?: boolean
  defaultImageUrl?: string
  disabled?: boolean
  validation?: {
    title?: boolean
    description?: boolean
    image?: boolean
    categories?: boolean
    categoryItems?: Array<{ icon?: boolean; name?: boolean }>
  }
}

function fieldClass(invalid = false) {
  return `w-full bg-card 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 ${
    invalid
      ? "border-red-400 focus:ring-red-200/70 focus:border-red-500"
      : "border-border focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
  }`
}

function Label({ children }: { children: React.ReactNode }) {
  return (
    <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
      {children}
    </label>
  )
}

export function ProceduresHeroSection({
  value,
  onChange,
  isDefaultLanguage = false,
  defaultImageUrl,
  disabled = false,
  validation,
}: Props) {
  const { registerStaged, clearStaged } = useCmsPagePending()

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

  function addCategory() {
    if (disabled) return
    set("categories", [...value.categories, { icon: "", name: "" }])
  }

  function removeCategory(index: number) {
    set("categories", value.categories.filter((_, i) => i !== index))
  }

  function updateCategory(index: number, field: keyof ProceduresHeroCategory, val: string) {
    set(
      "categories",
      value.categories.map((c, i) => (i === index ? { ...c, [field]: val } : c))
    )
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Title */}
      <div className="flex flex-col gap-1.5">
        <Label>Title</Label>
        <input
          type="text"
          value={value.title}
          disabled={disabled}
          onChange={(e) => set("title", e.target.value)}
          placeholder="e.g. World-Class Medical Procedures in Turkey"
          className={fieldClass(!!validation?.title)}
        />
      </div>

      {/* Description */}
      <div className="flex flex-col gap-1.5">
        <Label>Description</Label>
        <textarea
          value={value.description}
          disabled={disabled}
          onChange={(e) => set("description", e.target.value)}
          placeholder="Write a short description for the hero section..."
          rows={4}
          className={`${fieldClass(!!validation?.description)} resize-none leading-relaxed`}
        />
      </div>

      {/* Hero Image */}
      <div className="flex flex-col gap-1.5">
        <Label>Hero Image</Label>
        <div className={validation?.image ? "rounded-xl border border-red-400 p-2 bg-red-50/40" : ""}>
          <InlineImageUploader
            value={value.image ?? ""}
            fallbackValue={isDefaultLanguage ? undefined : defaultImageUrl}
            disabled={disabled}
            fileBaseName="heroimage"
            onChange={(url) => {
              const trimmedUrl = url.trim()
              onChange({
                ...value,
                image: trimmedUrl,
                imagePublicId: trimmedUrl.startsWith("blob:") ? value.imagePublicId : trimmedUrl ? value.imagePublicId : "",
              })
            }}
            onStageImage={(staged) =>
              registerStaged(
                "hero",
                staged,
                { uploadEndpoint: "/api/admin/procedures-page/upload-image?section=hero" }
              )
            }
            onClearStagedImage={() => {
              clearStaged("hero")
              onChange({ ...value, image: "", imagePublicId: "" })
            }}
            height="h-48"
          />
        </div>
      </div>

      {/* Categories */}
      <div
        className={`flex flex-col gap-3 rounded-xl ${
          validation?.categories && value.categories.length === 0
            ? "border border-red-300 p-3 bg-red-50/40"
            : ""
        }`}
      >
        <div className="flex items-center justify-between gap-2">
          <div className="flex flex-col gap-0.5">
            <Label>Categories</Label>
            <span className="text-xs text-muted-foreground font-sans">Each category shows an icon and a name</span>
          </div>
          <button
            type="button"
            onClick={addCategory}
            disabled={disabled}
            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] disabled:opacity-50 disabled:cursor-not-allowed"
            style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
          >
            <Plus className="w-3.5 h-3.5" aria-hidden="true" />
            Add Category
          </button>
        </div>

        {value.categories.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed border-border">
            <p className="text-xs text-muted-foreground font-sans">No categories yet.</p>
            <button
              type="button"
              onClick={addCategory}
              disabled={disabled}
              className="text-xs font-semibold font-sans disabled:opacity-50"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first category
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-3">
            {value.categories.map((cat, index) => (
              <div
                key={index}
                className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-muted/40"
              >
                <div className="flex items-center justify-between">
                  <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)" }}
                  >
                    Category {index + 1}
                  </span>
                  <button
                    type="button"
                    onClick={() => removeCategory(index)}
                    disabled={disabled}
                    className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors"
                    aria-label={`Remove category ${index + 1}`}
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs font-semibold text-muted-foreground font-sans">Name</label>
                  <input
                    type="text"
                    value={cat.name}
                    disabled={disabled}
                    onChange={(e) => updateCategory(index, "name", e.target.value)}
                    placeholder="e.g. Hair Transplant"
                    className={fieldClass(!!validation?.categoryItems?.[index]?.name)}
                  />
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs font-semibold text-muted-foreground font-sans">Icon</label>
                  <div className={disabled ? "pointer-events-none opacity-60" : ""}>
                    <IconPicker
                      value={cat.icon}
                      onChange={(key) => updateCategory(index, "icon", key)}
                      invalid={!!validation?.categoryItems?.[index]?.icon}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}