"use client"

import { useRef, useState } from "react"
import { ImagePlus, X, Star } from "lucide-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"

// ─── Types ─────────────────────────────────────────────────────────────────────

export interface BeforeAfterImageItem {
  beforeImage: string
  beforeImagePublicId: string
  afterImage: string
  afterImagePublicId: string
}

export interface ProcedureBasicInfoData {
  name: string
  slug: string
  description: string
  rating: number | ""
  reviewCount: number | ""
  mainImage: string
  mainImagePublicId: string
  beforeAfterImages: BeforeAfterImageItem[]
  startingFromPrice: string
  duration: string
  stayCity: string
  stayDays: number | ""
  hospitalStay: string
  recovery: string
}

interface Props {
  value: ProcedureBasicInfoData
  onChange: (value: ProcedureBasicInfoData) => void
  onSlugBlur?: (slug: string) => void
  sharedFieldsLocked?: boolean
  checkingSlug?: boolean
  slugError?: string | null
  slugAvailable?: boolean | null
  invalidFields?: {
    name?: boolean
    slug?: boolean
    description?: boolean
    mainImage?: boolean
    rating?: boolean
    reviewCount?: boolean
  }
  getProcedureSlug?: () => string
  onStageMainPhoto?: (staged: StagedImage) => void
  onClearStagedMainPhoto?: () => void
  onStageBasicBefore?: (index: number, staged: StagedImage) => void
  onClearStagedBasicBefore?: (index: number) => void
  onStageBasicAfter?: (index: number, staged: StagedImage) => void
  onClearStagedBasicAfter?: (index: number) => void
}

// ─── Shared input class ────────────────────────────────────────────────────────

const inputClass = (invalid = false) =>
  `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 ${
    invalid
      ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500"
      : "border-border focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
  }`

// ─── Inline image uploader ────────────────────────────────────────────────────

function InlineImageUploader({
  value,
  onChange,
  label,
  invalid = false,
  disabled = false,
  getProcedureSlug,
  fileBaseName,
  fileIndex,
  filePart,
  onStageImage,
  onClearStagedImage,
}: {
  value: string
  onChange: (url: string, publicId: string) => void
  label: string
  invalid?: boolean
  disabled?: boolean
  getProcedureSlug?: () => string
  fileBaseName?: string
  fileIndex?: number
  filePart?: "before" | "after"
  onStageImage?: (staged: StagedImage) => void
  onClearStagedImage?: () => void
}) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [dragOver, setDragOver] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function handleFile(file: File) {
    if (disabled) return
    setError(null)
    if (!file.type.startsWith("image/")) {
      setError("Please upload a valid image file.")
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      setError("Image size must be 5 MB or less.")
      return
    }
    const procedureSlug = getProcedureSlug?.().trim() ?? ""
    if (!procedureSlug) {
      setError("Please enter the procedure slug before selecting an image.")
      return
    }
    try {
      const staged = stageImage(file, {
        maxBytes: 5 * 1024 * 1024,
        fileBaseName,
        fileIndex,
        filePart,
      })
      onStageImage?.(staged)
      onChange(staged.previewUrl, "")
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to prepare image.")
    }
  }

  return (
    <div className="flex flex-col gap-1.5">
      <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
        {label}
      </label>
      {value ? (
        <div
          className={`relative w-full aspect-video rounded-xl overflow-hidden border bg-muted ${invalid ? "border-red-500" : "border-border"}`}
        >
          <img src={value} alt={label} className="w-full h-full object-cover" />
          {!disabled && (
            <button
              type="button"
              onClick={() => {
              onClearStagedImage?.()
              onChange("", "")
            }}
              className="absolute top-2 right-2 w-7 h-7 rounded-lg bg-black/60 flex items-center justify-center text-white hover:bg-black/80 transition-colors cursor-pointer"
              aria-label="Remove image"
            >
              <X className="w-3.5 h-3.5" aria-hidden="true" />
            </button>
          )}
        </div>
      ) : (
        <div
          role="button"
          tabIndex={0}
          onClick={() => !disabled && inputRef.current?.click()}
          onKeyDown={(e) => e.key === "Enter" && !disabled && inputRef.current?.click()}
          onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
          onDragLeave={() => setDragOver(false)}
          onDrop={(e) => {
            e.preventDefault()
            setDragOver(false)
            const file = e.dataTransfer.files[0]
            if (file) handleFile(file)
          }}
          className="flex flex-col items-center justify-center gap-2 w-full py-8 rounded-xl border-2 border-dashed cursor-pointer transition-all"
          style={{
            borderColor: invalid ? "#ef4444" : dragOver ? "var(--brand-green)" : "var(--border)",
            background: dragOver ? "rgba(43,182,115,0.04)" : "var(--card)",
          }}
          aria-label={`Upload ${label}`}
        >
          <>
            <div
              className="w-10 h-10 rounded-xl flex items-center justify-center"
              style={{ background: "rgba(43,182,115,0.10)" }}
            >
              <ImagePlus className="w-5 h-5" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
            </div>
            <p className="text-xs text-muted-foreground font-sans text-center">
              Click or drag to upload
            </p>
          </>
        </div>
      )}
      {error && <p className="text-xs text-red-500 font-sans" role="alert">{error}</p>}
      {invalid && !value && <p className="text-xs text-red-500 font-sans">This image is required.</p>}
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="sr-only"
        aria-hidden="true"
        onChange={(e) => {
          if (disabled) return
          const file = e.target.files?.[0]
          if (file) handleFile(file)
          e.target.value = ""
        }}
      />
    </div>
  )
}

// ─── Main component ────────────────────────────────────────────────────────────

export function ProcedureBasicInfo({
  value,
  onChange,
  onSlugBlur,
  invalidFields,
  sharedFieldsLocked = false,
  checkingSlug = false,
  slugError = null,
  slugAvailable = null,
  getProcedureSlug,
  onStageMainPhoto,
  onClearStagedMainPhoto,
  onStageBasicBefore,
  onClearStagedBasicBefore,
  onStageBasicAfter,
  onClearStagedBasicAfter,
}: Props) {
  const beforeAfterImages = value.beforeAfterImages ?? []

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

  // Before & After helpers
  function addBeforeAfterImage() {
    set("beforeAfterImages", [...beforeAfterImages, { beforeImage: "", beforeImagePublicId: "", afterImage: "", afterImagePublicId: "" }])
  }
  function removeBeforeAfterImage(i: number) {
    onClearStagedBasicBefore?.(i)
    onClearStagedBasicAfter?.(i)
    set("beforeAfterImages", beforeAfterImages.filter((_, idx) => idx !== i))
  }
  function updateBeforeAfterImage(i: number, field: keyof BeforeAfterImageItem, url: string, publicId: string) {
    set("beforeAfterImages", beforeAfterImages.map((item, idx) =>
      idx === i ? { ...item, [field]: url, [field + "PublicId"]: publicId } : item
    ))
  }

  return (
    <div className="flex flex-col gap-6 mb-5">
      {/* Name + Slug */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-name" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Procedure Name
          </label>
          <input
            id="proc-name"
            type="text"
            value={value.name}
            onChange={(e) => set("name", e.target.value)}
            placeholder="e.g. Hair Transplant"
            className={inputClass(invalidFields?.name)}
          />
          {invalidFields?.name && <p className="text-xs text-red-500 font-sans">Name is required.</p>}
        </div>

        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-slug" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Slug <span className="text-red-500">*</span>
          </label>
          <div
            className="flex items-center rounded-xl border bg-card overflow-hidden"
            style={{ borderColor: invalidFields?.slug ? "#EF4444" : "var(--border)" }}
          >
            <span className="px-3 py-2.5 text-sm text-muted-foreground font-mono border-r border-border bg-muted/80 shrink-0">
              /
            </span>
            <input
              id="proc-slug"
              type="text"
              value={value.slug}
              disabled={sharedFieldsLocked}
              onChange={(e) => set("slug", e.target.value.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, ""))}
              onBlur={(e) => onSlugBlur?.(e.currentTarget.value)}
              placeholder="e.g. hair-transplant"
              className="flex-1 px-3 py-2.5 bg-transparent font-mono text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-60"
            />
          </div>
          {invalidFields?.slug && <p className="text-xs text-red-500 font-sans">Slug is required.</p>}
          {!invalidFields?.slug && slugError && <p className="text-xs text-red-500 font-sans">{slugError}</p>}
          {!invalidFields?.slug && !slugError && slugAvailable && <p className="text-xs text-green-600 font-sans">Slug is available</p>}
          {!invalidFields?.slug && checkingSlug && <p className="text-xs text-muted-foreground font-sans">Checking slug availability...</p>}
        </div>
      </div>

      {/* Description */}
      <div className="flex flex-col gap-1.5">
        <label htmlFor="proc-description" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Description
        </label>
        <textarea
          id="proc-description"
          value={value.description}
          onChange={(e) => set("description", e.target.value)}
          placeholder="Brief description of this procedure..."
          rows={3}
          className={inputClass(invalidFields?.description) + " resize-none leading-relaxed"}
        />
        {invalidFields?.description && <p className="text-xs text-red-500 font-sans">Description is required.</p>}
      </div>

      {/* Rating + Review count */}
      <div className="grid grid-cols-2 gap-4">
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-rating" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider flex items-center gap-1">
            <Star className="w-3 h-3" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
            Rating
          </label>
          <input
            id="proc-rating"
            type="number"
            min={0}
            max={5}
            step={0.1}
            value={value.rating === "" ? "" : value.rating}
            disabled={sharedFieldsLocked}
            onChange={(e) => {
              const v = e.target.value
              if (v === "") { set("rating", ""); return }
              const n = Number(v)
              if (!Number.isNaN(n)) set("rating", Math.min(5, Math.max(0, n)))
            }}
            placeholder="e.g. 4.9"
            className={inputClass(invalidFields?.rating)}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-review-count" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Review Count
          </label>
          <input
            id="proc-review-count"
            type="number"
            min={0}
            value={value.reviewCount === "" ? "" : value.reviewCount}
            disabled={sharedFieldsLocked}
            onChange={(e) => {
              const v = e.target.value
              if (v === "") { set("reviewCount", ""); return }
              const n = Number(v)
              if (!Number.isNaN(n)) set("reviewCount", n)
            }}
            placeholder="e.g. 320"
            className={inputClass(invalidFields?.reviewCount)}
          />
        </div>
      </div>

      {/* Main Image */}
      <InlineImageUploader
        value={value.mainImage}
        onChange={(url, publicId) => onChange({ ...value, mainImage: url, mainImagePublicId: publicId })}
        label="Main Image"
        invalid={invalidFields?.mainImage}
        disabled={sharedFieldsLocked}
        getProcedureSlug={getProcedureSlug ?? (() => value.slug)}
        fileBaseName={MEDIA_FILE_BASE.mainPhoto}
        onStageImage={onStageMainPhoto}
        onClearStagedImage={onClearStagedMainPhoto}
      />

      {/* Treatment details */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-starting-price" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Starting from (price)
          </label>
          <input
            id="proc-starting-price"
            type="text"
            value={value.startingFromPrice}
            onChange={(e) => set("startingFromPrice", e.target.value)}
            placeholder="e.g. $1,500"
            className={inputClass()}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-duration" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Duration
          </label>
          <input
            id="proc-duration"
            type="text"
            value={value.duration}
            onChange={(e) => set("duration", e.target.value)}
            placeholder="e.g. 4-6 hours"
            className={inputClass()}
          />
        </div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-hospital-stay" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Hospital Stay
          </label>
          <input
            id="proc-hospital-stay"
            type="text"
            value={value.hospitalStay}
            onChange={(e) => set("hospitalStay", e.target.value)}
            placeholder="e.g. 1 night"
            className={inputClass()}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <label htmlFor="proc-recovery" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
            Recovery
          </label>
          <input
            id="proc-recovery"
            type="text"
            value={value.recovery}
            onChange={(e) => set("recovery", e.target.value)}
            placeholder="e.g. 10-14 days"
            className={inputClass()}
          />
        </div>
      </div>

      <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4">
        <p className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
          Number of days to stay
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="flex flex-col gap-1.5">
            <label htmlFor="proc-stay-city" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
              City Name
            </label>
            <input
              id="proc-stay-city"
              type="text"
              value={value.stayCity}
              onChange={(e) => set("stayCity", e.target.value)}
              placeholder="e.g. Istanbul"
              className={inputClass()}
            />
          </div>
          <div className="flex flex-col gap-1.5">
            <label htmlFor="proc-stay-days" className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">
              Stay Days
            </label>
            <input
              id="proc-stay-days"
              type="number"
              min={0}
              value={value.stayDays === "" ? "" : value.stayDays}
              disabled={sharedFieldsLocked}
              onChange={(e) => {
                const v = e.target.value
                if (v === "") { set("stayDays", ""); return }
                const n = Number(v)
                if (!Number.isNaN(n)) set("stayDays", Math.max(0, n))
              }}
              placeholder="e.g. 7"
              className={inputClass()}
            />
          </div>
        </div>
      </div>

      

      {/* Before & After 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">
            Before & After Images
          </label>
          <button
            type="button"
            onClick={addBeforeAfterImage}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold font-sans cursor-pointer transition-all hover:brightness-105"
            style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
          >
            + Add Pair
          </button>
        </div>
        {beforeAfterImages.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-2 py-6 rounded-xl border border-dashed" style={{ borderColor: "var(--border)" }}>
            <p className="text-xs text-muted-foreground font-sans">No before & after image pairs added yet.</p>
            <button type="button" onClick={addBeforeAfterImage} className="text-xs font-semibold font-sans cursor-pointer" style={{ color: "var(--brand-green)" }}>
              Add first pair
            </button>
          </div>
        ) : (
          <div className="flex flex-col gap-4">
            {beforeAfterImages.map((pair, 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(29,45,104,0.02)" }}>
                  <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)" }}>
                    Pair {i + 1}
                  </span>
                  <button type="button" onClick={() => removeBeforeAfterImage(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 pair ${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-2 gap-4">
                  <InlineImageUploader
                    value={pair.beforeImage}
                    onChange={(url, pid) => updateBeforeAfterImage(i, "beforeImage" as keyof BeforeAfterImageItem, url, pid)}
                    label="Before Image"
                    disabled={sharedFieldsLocked}
                    getProcedureSlug={getProcedureSlug ?? (() => value.slug)}
                    fileBaseName={MEDIA_FILE_BASE.beforeAfter}
                    filePart="before"
                    fileIndex={i}
                    onStageImage={(staged) => onStageBasicBefore?.(i, staged)}
                    onClearStagedImage={() => onClearStagedBasicBefore?.(i)}
                  />
                  <InlineImageUploader
                    value={pair.afterImage}
                    onChange={(url, pid) => updateBeforeAfterImage(i, "afterImage" as keyof BeforeAfterImageItem, url, pid)}
                    label="After Image"
                    disabled={sharedFieldsLocked}
                    getProcedureSlug={getProcedureSlug ?? (() => value.slug)}
                    fileBaseName={MEDIA_FILE_BASE.beforeAfter}
                    filePart="after"
                    fileIndex={i}
                    onStageImage={(staged) => onStageBasicAfter?.(i, staged)}
                    onClearStagedImage={() => onClearStagedBasicAfter?.(i)}
                  />
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

    </div>
  )
}