"use client"

import { Plus, Trash2, ImagePlus, X } from "lucide-react"
import { useRef, useState } from "react"
import { MEDIA_FILE_BASE } from "@/lib/media-manager/file-names"
import { stageImage } from "@/lib/media-manager/stage"
import type { StagedImage } from "@/lib/media-manager/types"

export interface GalleryCategory {
  name: string
}

export interface GalleryImage {
  title: string
  image: string
  category: string
}

export interface GalleryVideo {
  title: string
  videoUrl: string
  category: string
}

export interface HospitalGalleryData {
  eyebrow: string
  title: string
  categories: GalleryCategory[]
  images: GalleryImage[]
  videos: GalleryVideo[]
}

interface Props {
  value: HospitalGalleryData
  onChange: (value: HospitalGalleryData) => void
  getHospitalSlug?: () => string
  onStageGalleryImage?: (index: number, staged: StagedImage) => void
  onClearStagedGalleryImage?: (index: number) => void
}

const inputClass =
  "w-full bg-card border border-border rounded-xl px-4 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"

/** Same as section inputs (white / card) — not list-muted */
const listFieldClass = inputClass

function GalleryImageUploader({
  index,
  title,
  imageUrl,
  category,
  categoryOptions,
  getHospitalSlug,
  onStageGalleryImage,
  onClearStagedGalleryImage,
  onTitleChange,
  onImageChange,
  onCategoryChange,
  onRemove,
}: {
  index: number
  title: string
  imageUrl: string
  category: string
  categoryOptions: string[]
  getHospitalSlug?: () => string
  onStageGalleryImage?: (index: number, staged: StagedImage) => void
  onClearStagedGalleryImage?: (index: number) => void
  onTitleChange: (t: string) => void
  onImageChange: (url: string) => void
  onCategoryChange: (c: string) => void
  onRemove: () => void
}) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [error, setError] = useState<string | null>(null)

  function handleFile(file: File) {
    setError(null)
    if (!file.type.startsWith("image/")) {
      setError("Invalid image.")
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      setError("Max 5MB.")
      return
    }
    const hospitalSlug = getHospitalSlug?.().trim() ?? ""
    if (!hospitalSlug) {
      setError("Enter hospital slug first.")
      return
    }
    try {
      const staged = stageImage(file, {
        maxBytes: 5 * 1024 * 1024,
        fileBaseName: MEDIA_FILE_BASE.gallery,
        fileIndex: index,
      })
      onStageGalleryImage?.(index, staged)
      onImageChange(staged.previewUrl)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to prepare image.")
    }
  }

  return (
    <div className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-card">
      <div className="flex items-center justify-between gap-2">
        <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)" }}
        >
          Image {index + 1}
        </span>
        <button
          type="button"
          onClick={onRemove}
          className="p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer shrink-0"
          aria-label="Remove image"
        >
          <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
        </button>
      </div>

      <div className="flex flex-col gap-1">
        <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">
          Category
        </label>
        <select
          value={category ?? ""}
          onChange={(e) => onCategoryChange(e.target.value)}
          disabled={categoryOptions.length === 0}
          className={`${listFieldClass} disabled:opacity-60 disabled:cursor-not-allowed`}
        >
          <option value="">
            {categoryOptions.length === 0
              ? "Add a category first..."
              : "Select category..."}
          </option>
          {categoryOptions.map((name, i) => (
            <option key={`${name}-${i}`} value={name}>
              {name}
            </option>
          ))}
        </select>
      </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={title}
          onChange={(e) => onTitleChange(e.target.value)}
          placeholder="Image title"
          className={listFieldClass}
        />
      </div>

      <div className="flex items-center gap-3">
        {imageUrl ? (
          <div className="relative w-20 h-16 rounded-lg overflow-hidden border border-border shrink-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={imageUrl} alt="" className="w-full h-full object-cover" />
            <button
              type="button"
              onClick={() => {
              onClearStagedGalleryImage?.(index)
              onImageChange("")
            }}
              className="absolute top-0.5 right-0.5 w-5 h-5 rounded bg-black/60 flex items-center justify-center text-white cursor-pointer"
              aria-label="Clear image"
            >
              <X className="w-3 h-3" aria-hidden="true" />
            </button>
          </div>
        ) : (
          <button
            type="button"
            onClick={() => inputRef.current?.click()}
            className="flex flex-col items-center justify-center gap-1 w-20 h-16 rounded-lg border-2 border-dashed cursor-pointer transition-all shrink-0"
            style={{ borderColor: "var(--border)", background: "var(--card)" }}
            aria-label="Upload image"
          >
            <ImagePlus className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
          </button>
        )}
      </div>
      {error && <p className="text-xs text-red-500 font-sans">{error}</p>}
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="sr-only"
        aria-hidden="true"
        onChange={(e) => {
          const f = e.target.files?.[0]
          if (f) handleFile(f)
          e.target.value = ""
        }}
      />
    </div>
  )
}

export function HospitalGallerySection({
  value,
  onChange,
  getHospitalSlug,
  onStageGalleryImage,
  onClearStagedGalleryImage,
}: Props) {
  function set<K extends keyof HospitalGalleryData>(key: K, val: HospitalGalleryData[K]) {
    onChange({ ...value, [key]: val })
  }

  const categoryOptions = value.categories
    .map((cat) => cat.name.trim())
    .filter((name) => name.length > 0)

  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-2 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. Gallery" 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. Hospital Gallery" className={inputClass} />
          </div>
        </div>
      </div>

      {/* Categories */}
      <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">Categories ({value.categories.length})</label>
          <button
            type="button"
            onClick={() => set("categories", [...value.categories, { name: "" }])}
            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 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"
            style={{ borderColor: "var(--border)" }}
          >
            <p className="text-xs text-muted-foreground font-sans">No categories yet.</p>
            <button
              type="button"
              onClick={() => set("categories", [{ name: "" }])}
              className="text-xs cursor-pointer font-semibold font-sans"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first category
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {value.categories.map((cat, idx) => (
              <div key={idx} className="flex items-center gap-2 p-3 rounded-xl border border-border bg-card flex-wrap">
                <span
                  className="text-xs font-bold font-sans px-2 py-0.5 rounded-md shrink-0"
                  style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                >
                  {idx + 1}
                </span>
                <input
                  type="text"
                  value={cat.name}
                  onChange={(e) => {
                    const updated = value.categories.map((c, i) => (i === idx ? { name: e.target.value } : c))
                    set("categories", updated)
                  }}
                  placeholder="Category name"
                  className={`${listFieldClass} flex-1 min-w-[120px]`}
                />
                <button
                  type="button"
                  onClick={() => set("categories", value.categories.filter((_, i) => i !== idx))}
                  className="p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer shrink-0"
                  aria-label="Remove category"
                >
                  <X className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
            ))}
          </div>
        )}
        {categoryOptions.length === 0 && (value.images.length > 0 || value.videos.length > 0) && (
          <p className="text-xs font-sans text-amber-600">
            Add at least one named category to assign it to images or videos.
          </p>
        )}
      </div>

      {/* Images */}
      <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">Images ({value.images.length})</label>
          <button
            type="button"
            onClick={() => set("images", [...value.images, { title: "", image: "", category: "" }])}
            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 Image
          </button>
        </div>
        {value.images.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 gallery images yet.</p>
            <button
              type="button"
              onClick={() => set("images", [{ title: "", image: "", category: "" }])}
              className="text-xs cursor-pointer font-semibold font-sans"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first image
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {value.images.map((img, idx) => (
              <GalleryImageUploader
                key={idx}
                index={idx}
                title={img.title}
                imageUrl={img.image}
                category={img.category ?? ""}
                categoryOptions={categoryOptions}
                getHospitalSlug={getHospitalSlug}
                onStageGalleryImage={onStageGalleryImage}
                onClearStagedGalleryImage={onClearStagedGalleryImage}
                onTitleChange={(t) => {
                  const updated = value.images.map((im, i) => (i === idx ? { ...im, title: t } : im))
                  set("images", updated)
                }}
                onImageChange={(url) => {
                  const updated = value.images.map((im, i) => (i === idx ? { ...im, image: url } : im))
                  set("images", updated)
                }}
                onCategoryChange={(cat) => {
                  const updated = value.images.map((im, i) => (i === idx ? { ...im, category: cat } : im))
                  set("images", updated)
                }}
                onRemove={() => {
                  onClearStagedGalleryImage?.(idx)
                  set("images", value.images.filter((_, i) => i !== idx))
                }}
              />
            ))}
          </div>
        )}
      </div>

      {/* Videos */}
      <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">Videos ({value.videos.length})</label>
          <button
            type="button"
            onClick={() => set("videos", [...value.videos, { title: "", videoUrl: "", category: "" }])}
            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 Video
          </button>
        </div>
        {value.videos.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 videos yet.</p>
            <button
              type="button"
              onClick={() => set("videos", [{ title: "", videoUrl: "", category: "" }])}
              className="text-xs cursor-pointer font-semibold font-sans"
              style={{ color: "var(--brand-green)" }}
            >
              Add your first video
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {value.videos.map((vid, idx) => (
              <div key={idx} className="flex flex-col gap-3 p-4 rounded-xl border border-border bg-card">
                <div className="flex items-center justify-between gap-2">
                  <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)" }}
                  >
                    Video {idx + 1}
                  </span>
                  <button
                    type="button"
                    onClick={() => set("videos", value.videos.filter((_, i) => i !== idx))}
                    className="p-1.5 rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors cursor-pointer shrink-0"
                    aria-label="Remove video"
                  >
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <div className="flex flex-col gap-1">
                  <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">
                    Category
                  </label>
                  <select
                    value={vid.category ?? ""}
                    onChange={(e) => {
                      const updated = value.videos.map((v, i) =>
                        i === idx ? { ...v, category: e.target.value } : v,
                      )
                      set("videos", updated)
                    }}
                    disabled={categoryOptions.length === 0}
                    className={`${listFieldClass} disabled:opacity-60 disabled:cursor-not-allowed`}
                  >
                    <option value="">
                      {categoryOptions.length === 0
                        ? "Add a category first..."
                        : "Select category..."}
                    </option>
                    {categoryOptions.map((name, i) => (
                      <option key={`${name}-${i}`} value={name}>
                        {name}
                      </option>
                    ))}
                  </select>
                </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">
                      Title
                    </label>
                    <input
                      type="text"
                      value={vid.title}
                      onChange={(e) => {
                        const updated = value.videos.map((v, i) => (i === idx ? { ...v, title: e.target.value } : v))
                        set("videos", updated)
                      }}
                      placeholder="Video title"
                      className={listFieldClass}
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">
                      URL
                    </label>
                    <input
                      type="url"
                      value={vid.videoUrl}
                      onChange={(e) => {
                        const updated = value.videos.map((v, i) => (i === idx ? { ...v, videoUrl: e.target.value } : v))
                        set("videos", updated)
                      }}
                      placeholder="Video URL (YouTube, Vimeo...)"
                      className={listFieldClass}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}