"use client"

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

export interface BeforeAfterResultItem {
  beforeImage: string
  beforeImagePublicId: string
  afterImage: string
  afterImagePublicId: string
  postopdate: string
  treatment: string
  patientName: string
  patientAge: string
  patientCountry: string
}

export interface ProcedureBeforeAfterSectionData {
  eyebrow: string
  title: string
  subtitle: string
  results: BeforeAfterResultItem[]
  buttonText: string
  buttonLink: string
  disclaimerText: string
}

interface Props {
  value: ProcedureBeforeAfterSectionData
  onChange: (value: ProcedureBeforeAfterSectionData) => void
  sharedFieldsLocked?: boolean
  getProcedureSlug?: () => string
  onStageResultBefore?: (index: number, staged: StagedImage) => void
  onClearStagedResultBefore?: (index: number) => void
  onStageResultAfter?: (index: number, staged: StagedImage) => void
  onClearStagedResultAfter?: (index: number) => void
}

const inputClass =
  "w-full bg-card border  border-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 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

const inputMuted =
  "w-full bg-muted border bg-white border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"

function ResultImageUploader({
  value,
  onChange,
  label,
  disabled = false,
  getProcedureSlug,
  resultIndex = 0,
  filePart,
  onStageImage,
  onClearStagedImage,
}: {
  value: string
  onChange: (url: string, publicId: string) => void
  label: string
  disabled?: boolean
  getProcedureSlug?: () => string
  resultIndex?: 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."); return }
    if (file.size > 5 * 1024 * 1024) { setError("Image must be 5 MB or less."); return }
    const procedureSlug = getProcedureSlug?.().trim() ?? ""
    if (!procedureSlug) {
      setError("Enter procedure slug first.")
      return
    }
    try {
      const staged = stageImage(file, {
        maxBytes: 5 * 1024 * 1024,
        fileBaseName: MEDIA_FILE_BASE.beforeAfter,
        fileIndex: resultIndex,
        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">
      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">{label}</label>
      {value ? (
        <div className="relative w-full aspect-video rounded-xl overflow-hidden border border-border bg-muted">
          <img src={value} alt={label} className="w-full h-full object-cover" />
          {!disabled && (
            <button type="button" onClick={() => { onClearStagedImage?.(); onChange("", "") }} className="absolute top-1.5 right-1.5 w-6 h-6 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 h-3" 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 f = e.dataTransfer.files[0]; if (f) handleFile(f) }}
          className="flex flex-col items-center justify-center gap-1.5 w-full py-5 rounded-xl border-2 border-dashed cursor-pointer transition-all"
          style={{ borderColor: dragOver ? "var(--brand-green)" : "var(--border)", background: dragOver ? "rgba(43,182,115,0.04)" : "transparent" }}
          aria-label={`Upload ${label}`}
        >
          <>
            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: "rgba(43,182,115,0.10)" }}>
              <ImagePlus className="w-4 h-4" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
            </div>
            <p className="text-[10px] text-muted-foreground font-sans">Click or drag</p>
          </>
        </div>
      )}
      {error && <p className="text-[10px] text-red-500 font-sans" role="alert">{error}</p>}
      <input ref={inputRef} type="file" accept="image/*" className="sr-only" aria-hidden="true" onChange={(e) => { if (disabled) return; const f = e.target.files?.[0]; if (f) handleFile(f); e.target.value = "" }} />
    </div>
  )
}

export function ProcedureBeforeAfterSection({
  value,
  onChange,
  sharedFieldsLocked = false,
  getProcedureSlug,
  onStageResultBefore,
  onClearStagedResultBefore,
  onStageResultAfter,
  onClearStagedResultAfter,
}: Props) {
  const safeValue: ProcedureBeforeAfterSectionData = {
    eyebrow: value.eyebrow ?? "",
    title: value.title ?? "",
    subtitle: value.subtitle ?? "",
    results: Array.isArray(value.results) ? value.results : [],
    buttonText: value.buttonText ?? "",
    buttonLink: value.buttonLink ?? "",
    disclaimerText: value.disclaimerText ?? "",
  }

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

  function addResult() {
    set("results", [...safeValue.results, {
      beforeImage: "", beforeImagePublicId: "", afterImage: "", afterImagePublicId: "",
      postopdate: "", treatment: "", patientName: "", patientAge: "", patientCountry: "",
    }])
  }
  function removeResult(i: number) {
    onClearStagedResultBefore?.(i)
    onClearStagedResultAfter?.(i)
    set("results", safeValue.results.filter((_, idx) => idx !== i))
  }
  function updateResult(i: number, field: keyof BeforeAfterResultItem, val: string) {
    set("results", safeValue.results.map((r, idx) => idx === i ? { ...r, [field]: val } : r))
  }
  function updateResultImage(i: number, field: "beforeImage" | "afterImage", url: string, publicId: string) {
    const pidField = field === "beforeImage" ? "beforeImagePublicId" : "afterImagePublicId"
    set("results", safeValue.results.map((r, idx) => idx === i ? { ...r, [field]: url, [pidField]: publicId } : r))
  }

  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-3 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={safeValue.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. Real Results" 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={safeValue.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Before & After Gallery" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Subtitle</label><input type="text" value={safeValue.subtitle} onChange={(e) => set("subtitle", e.target.value)} placeholder="e.g. See real patient results" className={inputClass} /></div>
        </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">Button Text</label><input type="text" value={safeValue.buttonText} onChange={(e) => set("buttonText", e.target.value)} placeholder="e.g. View All Results" className={inputClass} /></div>
          <div className="flex flex-col gap-1.5"><label className="text-xs font-semibold text-foreground font-sans">Button Link</label><input type="text" value={safeValue.buttonLink} onChange={(e) => set("buttonLink", e.target.value)} placeholder="e.g. /gallery" className={inputClass} /></div>
        </div>
        <div className="flex flex-col gap-1.5">
          <label className="text-xs font-semibold text-foreground font-sans">Disclaimer Text</label>
          <textarea value={safeValue.disclaimerText} onChange={(e) => set("disclaimerText", e.target.value)} placeholder="e.g. Results may vary..." rows={2} className={inputClass + " resize-none leading-relaxed"} />
        </div>
      </div>

      {/* Results */}
      <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">Results</label>
          <button type="button" onClick={addResult} 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" style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}>
            <Plus className="w-3.5 h-3.5" aria-hidden="true" />
            Add Result
          </button>
        </div>
        {safeValue.results.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 results added yet.</p>
            <button type="button" onClick={addResult} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>Add first result</button>
          </div>
        ) : (
          <div className="flex flex-col gap-4">
            {safeValue.results.map((result, 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)" }}>Result {i + 1}</span>
                  <button type="button" onClick={() => removeResult(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 result ${i + 1}`}>
                    <X className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
                <div className="p-4 flex flex-col gap-3">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <ResultImageUploader
                      value={result.beforeImage}
                      onChange={(url, pid) => updateResultImage(i, "beforeImage", url, pid)}
                      label="Before Image"
                      disabled={sharedFieldsLocked}
                      getProcedureSlug={getProcedureSlug}
                      resultIndex={i}
                      filePart="before"
                      onStageImage={(staged) => onStageResultBefore?.(i, staged)}
                      onClearStagedImage={() => onClearStagedResultBefore?.(i)}
                    />
                    <ResultImageUploader
                      value={result.afterImage}
                      onChange={(url, pid) => updateResultImage(i, "afterImage", url, pid)}
                      label="After Image"
                      disabled={sharedFieldsLocked}
                      getProcedureSlug={getProcedureSlug}
                      resultIndex={i}
                      filePart="after"
                      onStageImage={(staged) => onStageResultAfter?.(i, staged)}
                      onClearStagedImage={() => onClearStagedResultAfter?.(i)}
                    />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Treatment</label>
                      <input type="text" value={result.treatment} onChange={(e) => updateResult(i, "treatment", e.target.value)} placeholder="e.g. FUE Hair Transplant" className={inputMuted} />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Post-Op Date</label>
                      <input type="text" value={result.postopdate} onChange={(e) => updateResult(i, "postopdate", e.target.value)} placeholder="e.g. 6 months post-op" className={inputMuted} />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Patient Name</label>
                      <input type="text" value={result.patientName} onChange={(e) => updateResult(i, "patientName", e.target.value)} placeholder="e.g. Ahmed K." className={inputMuted} />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Patient Age</label>
                      <input type="text" value={result.patientAge} onChange={(e) => updateResult(i, "patientAge", e.target.value)} placeholder="e.g. 34" className={inputMuted} />
                    </div>
                    <div className="flex flex-col gap-1">
                      <label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Patient Country</label>
                      <input type="text" value={result.patientCountry} onChange={(e) => updateResult(i, "patientCountry", e.target.value)} placeholder="e.g. Saudi Arabia" className={inputMuted} />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}