"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 ProcedureOverviewData {
  eyebrow: string
  title: string
  description: string
  keyTakeawaysTitle: string
  keyTakeaways: string[]
  overviewCardStartingPriceLabel: string
  overviewCardStartingPriceValue: string
  overviewCardImage: string
  overviewCardImagePublicId: string
}

interface Props {
  value: ProcedureOverviewData | Partial<ProcedureOverviewData>
  onChange: (value: ProcedureOverviewData) => void
  sharedFieldsLocked?: boolean
  getProcedureSlug?: () => string
  onStageOverviewCard?: (staged: StagedImage) => void
  onClearStagedOverviewCard?: () => void
}

function normalizeProcedureOverview(
  raw: ProcedureOverviewData | Partial<ProcedureOverviewData> | null | undefined
): ProcedureOverviewData {
  const v = raw && typeof raw === "object" ? raw : {}
  return {
    eyebrow: typeof v.eyebrow === "string" ? v.eyebrow : "",
    title: typeof v.title === "string" ? v.title : "",
    description: typeof v.description === "string" ? v.description : "",
    keyTakeawaysTitle: typeof v.keyTakeawaysTitle === "string" ? v.keyTakeawaysTitle : "",
    keyTakeaways: Array.isArray(v.keyTakeaways) ? v.keyTakeaways : [],
    overviewCardStartingPriceLabel:
      typeof v.overviewCardStartingPriceLabel === "string" ? v.overviewCardStartingPriceLabel : "",
    overviewCardStartingPriceValue:
      typeof v.overviewCardStartingPriceValue === "string" ? v.overviewCardStartingPriceValue : "",
    overviewCardImage: typeof v.overviewCardImage === "string" ? v.overviewCardImage : "",
    overviewCardImagePublicId:
      typeof v.overviewCardImagePublicId === "string" ? v.overviewCardImagePublicId : "",
  }
}

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]"

function OverviewImageUploader({
  value,
  onChange,
  disabled = false,
  getProcedureSlug,
  onStageOverviewCard,
  onClearStagedOverviewCard,
}: {
  value: string
  onChange: (url: string, publicId: string) => void
  disabled?: boolean
  getProcedureSlug?: () => string
  onStageOverviewCard?: (staged: StagedImage) => void
  onClearStagedOverviewCard?: () => 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 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: MEDIA_FILE_BASE.overview })
      onStageOverviewCard?.(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">
        Card Image <span className="text-muted-foreground normal-case font-normal tracking-normal">(optional)</span>
      </label>
      {value ? (
        <div className="relative w-full aspect-video rounded-xl overflow-hidden border border-border bg-muted">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={value} alt="Overview card" className="w-full h-full object-cover" />
          {!disabled && (
            <button
              type="button"
              onClick={() => {
                onClearStagedOverviewCard?.()
                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 f = e.dataTransfer.files[0]; if (f) handleFile(f) }}
          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: dragOver ? "var(--brand-green)" : "var(--border)", background: dragOver ? "rgba(43,182,115,0.04)" : "var(--card)" }}
          aria-label="Upload card image"
        >
          <>
            <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 (optional)</p>
          </>
        </div>
      )}
      {error && <p className="text-xs 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 ProcedureOverview({
  value: rawValue,
  onChange,
  sharedFieldsLocked = false,
  getProcedureSlug,
  onStageOverviewCard,
  onClearStagedOverviewCard,
}: Props) {
  const value = normalizeProcedureOverview(rawValue)

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

  function addTakeaway() {
    set("keyTakeaways", [...value.keyTakeaways, ""])
  }
  function removeTakeaway(i: number) {
    set("keyTakeaways", value.keyTakeaways.filter((_, idx) => idx !== i))
  }
  function updateTakeaway(i: number, val: string) {
    set("keyTakeaways", value.keyTakeaways.map((t, idx) => idx === i ? val : t))
  }

  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={value.eyebrow} onChange={(e) => set("eyebrow", e.target.value)} placeholder="e.g. Learn More" 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. What is Hair Transplant?" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Key Takeaways Title</label>
            <input type="text" value={value.keyTakeawaysTitle} onChange={(e) => set("keyTakeawaysTitle", e.target.value)} placeholder="e.g. Key Benefits" className={inputClass} />
          </div>
        </div>
      </div>

      {/* Description */}
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Description</label>
        <textarea
          value={value.description}
          onChange={(e) => set("description", e.target.value)}
          placeholder="Detailed description of this procedure..."
          rows={4}
          className={inputClass + " resize-none leading-relaxed"}
        />
      </div>

      {/* Key Takeaways */}
      <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">Key Takeaways</label>
          <button
            type="button"
            onClick={addTakeaway}
            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 Takeaway
          </button>
        </div>
        {value.keyTakeaways.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 key takeaways added yet.</p>
            <button type="button" onClick={addTakeaway} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>Add first takeaway</button>
          </div>
        ) : (
          <div className="flex flex-col gap-2">
            {value.keyTakeaways.map((t, i) => (
              <div key={i} className="flex items-center gap-2">
                <span className="text-xs font-bold font-sans w-5 text-muted-foreground">{i + 1}.</span>
                <input
                  type="text"
                  value={t}
                  onChange={(e) => updateTakeaway(i, e.target.value)}
                  placeholder={`e.g. Takeaway ${i + 1}`}
                  className={`flex-1 bg-white bg-muted border 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]`}
                />
                <button type="button" onClick={() => removeTakeaway(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 takeaway ${i + 1}`}>
                  <X className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Overview Card */}
      <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-navy)" }} aria-hidden="true" />
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground font-sans">Overview Card</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">Starting Price Label</label>
            <input type="text" value={value.overviewCardStartingPriceLabel} onChange={(e) => set("overviewCardStartingPriceLabel", e.target.value)} placeholder="e.g. Starting From" className={inputClass} />
          </div>
          <div className="flex flex-col gap-1.5">
            <label className="text-xs font-semibold text-foreground font-sans">Starting Price Value</label>
            <input type="text" value={value.overviewCardStartingPriceValue} onChange={(e) => set("overviewCardStartingPriceValue", e.target.value)} placeholder="e.g. $1,500" className={inputClass} />
          </div>
        </div>
        <OverviewImageUploader
          value={value.overviewCardImage}
          onChange={(url, pid) => onChange({ ...value, overviewCardImage: url, overviewCardImagePublicId: pid })}
          disabled={sharedFieldsLocked}
          getProcedureSlug={getProcedureSlug}
          onStageOverviewCard={onStageOverviewCard}
          onClearStagedOverviewCard={onClearStagedOverviewCard}
        />
      </div>
    </div>
  )
}