"use client"

import { useRef, useState } from "react"
import { Plus, Trash2, Star, ImagePlus, X, Sparkles } 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 ProcedureReviewItem {
  rating: number | ""
  isFeatured: boolean
  patientName: string
  country: string
  date: string
  reviewText: string
  avatar: string
  avatarPublicId: string
}

interface Props {
  value: ProcedureReviewItem[]
  onChange: (value: ProcedureReviewItem[]) => void
  eyebrow?: string
  onEyebrowChange?: (val: string) => void
  sectionTitle?: string
  onSectionTitleChange?: (val: string) => void
  showValidationError?: boolean
  sharedValuesLocked?: boolean
  getProcedureSlug?: () => string
  reviewIndex?: number
  onStageReviewAvatar?: (index: number, staged: StagedImage) => void
  onClearStagedReviewAvatar?: (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]"

function FeaturedToggle({
  checked,
  onChange,
  ariaLabel,
}: {
  checked: boolean
  onChange: (next: boolean) => void
  ariaLabel: string
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={ariaLabel}
      onClick={() => onChange(!checked)}
      className="group inline-flex items-center gap-2 px-2.5 py-1.5 rounded-full border text-xs font-bold font-sans cursor-pointer transition-all hover:brightness-105 active:scale-[0.98]"
      style={
        checked
          ? {
              background: "linear-gradient(135deg, #F59E0B, #FBBF24)",
              color: "#fff",
              borderColor: "transparent",
              boxShadow: "0 4px 12px rgba(245,158,11,0.30)",
            }
          : {
              background: "var(--card)",
              color: "var(--muted-foreground)",
              borderColor: "var(--border)",
            }
      }
    >
      <span
        className="w-4 h-4 rounded-full flex items-center justify-center transition-colors"
        style={{
          background: checked ? "rgba(255,255,255,0.25)" : "var(--muted)",
          color: checked ? "#fff" : "var(--muted-foreground)",
        }}
        aria-hidden="true"
      >
        <Sparkles className="w-2.5 h-2.5" />
      </span>
      <span className="uppercase tracking-wider">
        {checked ? "Featured" : "Mark as Featured"}
      </span>
    </button>
  )
}

function StarRatingPicker({
  value,
  onChange,
  invalid = false,
  disabled = false,
}: {
  value: number | ""
  onChange: (v: number | "") => void
  invalid?: boolean
  disabled?: boolean
}) {
  return (
    <div className={`flex items-center gap-1 rounded-lg px-1 py-0.5 ${invalid ? "border border-red-500" : ""}`} role="group" aria-label="Rating">
      {[1, 2, 3, 4, 5].map((n) => (
        <button
          key={n} type="button" disabled={disabled}
          onClick={() => onChange(value === n ? "" : n)}
          aria-label={`${n} star${n !== 1 ? "s" : ""}`} aria-pressed={value === n}
          className="cursor-pointer transition-transform hover:scale-110 disabled:opacity-60 disabled:cursor-not-allowed"
        >
          <Star
            className="w-5 h-5"
            style={{ color: value !== "" && n <= value ? "#F59E0B" : "var(--border)", fill: value !== "" && n <= value ? "#F59E0B" : "transparent" }}
            aria-hidden="true"
          />
        </button>
      ))}
      {value !== "" && <span className="text-xs font-semibold font-sans ml-1" style={{ color: "#F59E0B" }}>{value}.0</span>}
    </div>
  )
}

function AvatarUploader({
  value,
  onChange,
  disabled = false,
  getProcedureSlug,
  reviewIndex = 0,
  onStageImage,
  onClearStagedImage,
}: {
  value: string
  onChange: (url: string, publicId: string) => void
  disabled?: boolean
  getProcedureSlug?: () => string
  reviewIndex?: number
  onStageImage?: (staged: StagedImage) => void
  onClearStagedImage?: () => void
}) {
  const inputRef = useRef<HTMLInputElement>(null)
  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.reviews,
        fileIndex: reviewIndex,
      })
      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">
        Avatar <span className="text-muted-foreground normal-case font-normal">(optional)</span>
      </label>
      {value ? (
        <div className="relative w-12 h-12 rounded-full overflow-hidden border border-border bg-muted shrink-0">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={value} alt="Avatar" className="w-full h-full object-cover" />
          {!disabled && (
            <button type="button" onClick={() => { onClearStagedImage?.(); onChange("", "") }} className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 hover:opacity-100 transition-opacity cursor-pointer" aria-label="Remove avatar">
              <X className="w-3.5 h-3.5 text-white" aria-hidden="true" />
            </button>
          )}
        </div>
      ) : (
        <div
          role="button" tabIndex={0}
          onClick={() => !disabled && inputRef.current?.click()}
          onKeyDown={(e) => e.key === "Enter" && !disabled && inputRef.current?.click()}
          className="w-12 h-12 rounded-full border-2 border-dashed flex items-center justify-center cursor-pointer transition-all"
          style={{ borderColor: "var(--border)" }}
          aria-label="Upload avatar"
        >
          <ImagePlus className="w-4 h-4" style={{ color: "var(--brand-green)" }} aria-hidden="true" />
        </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 ProcedureReviews({
  value,
  onChange,
  eyebrow = "",
  onEyebrowChange,
  sectionTitle = "",
  onSectionTitleChange,
  showValidationError = false,
  sharedValuesLocked = false,
  getProcedureSlug,
  onStageReviewAvatar,
  onClearStagedReviewAvatar,
}: Props) {
  const headingInputClass =
    "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 addItem() {
    onChange([...value, { rating: "", isFeatured: false, patientName: "", country: "", date: "", reviewText: "", avatar: "", avatarPublicId: "" }])
  }
  function removeItem(i: number) {
    onClearStagedReviewAvatar?.(i)
    onChange(value.filter((_, idx) => idx !== i))
  }
  function updateItem(i: number, field: keyof ProcedureReviewItem, val: ProcedureReviewItem[keyof ProcedureReviewItem]) {
    onChange(value.map((item, idx) => idx === i ? { ...item, [field]: val } : item))
  }

  function patchItem(i: number, patch: Partial<ProcedureReviewItem>) {
    onChange(value.map((item, idx) => (idx === i ? { ...item, ...patch } : item)))
  }

  return (
    <div className="flex flex-col gap-3">
      {/* Section headings */}
      {(onEyebrowChange !== undefined || onSectionTitleChange !== undefined) && (
        <div className="flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-4 mb-2">
          <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">
            {onEyebrowChange && (
              <div className="flex flex-col gap-1.5">
                <label className="text-xs font-semibold text-foreground font-sans">Eyebrow</label>
                <input type="text" value={eyebrow} onChange={(e) => onEyebrowChange(e.target.value)} placeholder="e.g. Patient Testimonials" className={headingInputClass} />
              </div>
            )}
            {onSectionTitleChange && (
              <div className="flex flex-col gap-1.5">
                <label className="text-xs font-semibold text-foreground font-sans">Title</label>
                <input type="text" value={sectionTitle} onChange={(e) => onSectionTitleChange(e.target.value)} placeholder="e.g. What Our Patients Say" className={headingInputClass} />
              </div>
            )}
          </div>
        </div>
      )}

      <div className="flex items-center justify-between">
        <label className="text-xs font-bold text-foreground font-sans uppercase tracking-wider">Reviews</label>
        <button
          type="button"
          onClick={addItem}
          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 Review
        </button>
      </div>

      {value.length === 0 ? (
        <div className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed" style={{ borderColor: showValidationError ? "#ef4444" : "var(--border)" }}>
          <p className="text-xs text-muted-foreground font-sans">No reviews added yet.</p>
          <button type="button" onClick={addItem} className="text-xs cursor-pointer font-semibold font-sans" style={{ color: "var(--brand-green)" }}>Add your first review</button>
        </div>
      ) : (
        <div className="flex flex-col gap-4">
          {value.map((item, i) => (
            <div key={i} className="rounded-2xl border border-border bg-card overflow-hidden">
              <div
                className="flex items-center justify-between gap-3 px-4 py-2.5 border-b border-border flex-wrap"
                style={{
                  background: item.isFeatured
                    ? "linear-gradient(135deg, rgba(245,158,11,0.10), rgba(43,182,115,0.04))"
                    : "rgba(43,182,115,0.02)",
                }}
              >
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="text-xs font-bold font-sans px-2 py-0.5 rounded-md" style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}>Review {i + 1}</span>
                  <StarRatingPicker value={item.rating} onChange={(v) => updateItem(i, "rating", v)} invalid={showValidationError && item.rating === ""} disabled={sharedValuesLocked} />
                </div>
                <div className="flex items-center gap-2">
                  <FeaturedToggle
                    checked={item.isFeatured}
                    onChange={(next) => updateItem(i, "isFeatured", next)}
                    ariaLabel={`Mark review ${i + 1} as featured`}
                  />
                  <button type="button" onClick={() => removeItem(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 review ${i + 1}`}>
                    <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                  </button>
                </div>
              </div>
              <div className="p-4 flex flex-col gap-3">
                <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">Patient Name</label><input type="text" value={item.patientName} onChange={(e) => updateItem(i, "patientName", e.target.value)} placeholder="e.g. Ahmed K." className="w-full bg-muted bg-white 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]" /></div>
                  <div className="flex flex-col gap-1"><label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Country</label><input type="text" value={item.country} onChange={(e) => updateItem(i, "country", e.target.value)} placeholder="e.g. Saudi Arabia" className="w-full bg-muted bg-white 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]" /></div>
                  <div className="flex flex-col gap-1"><label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Date</label><input type="date" value={item.date} onChange={(e) => updateItem(i, "date", e.target.value)} disabled={sharedValuesLocked} className="w-full bg-muted bg-white border border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans outline-none transition-colors focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] disabled:opacity-60" /></div>
                  <AvatarUploader
                    value={item.avatar}
                    onChange={(url, pid) => patchItem(i, { avatar: url, avatarPublicId: pid })}
                    disabled={sharedValuesLocked}
                    getProcedureSlug={getProcedureSlug}
                    reviewIndex={i}
                    onStageImage={(staged) => onStageReviewAvatar?.(i, staged)}
                    onClearStagedImage={() => onClearStagedReviewAvatar?.(i)}
                  />
                </div>
                <div className="flex flex-col gap-1"><label className="text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider">Review Text</label><textarea value={item.reviewText} onChange={(e) => updateItem(i, "reviewText", e.target.value)} placeholder="The patient's review text..." rows={3} className="w-full bg-muted bg-white border border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none transition-colors resize-none leading-relaxed focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]" /></div>
              </div>
            </div>
          ))}
        </div>
      )}
      {showValidationError && (
        <p className="text-xs font-sans text-red-500">Please add at least one complete review.</p>
      )}
    </div>
  )
}