"use client"

import { useEffect, useRef, useState } from "react"

import { PhotoPreview } from "@/components/invite/photo-preview"
import { allowedImageContentTypes, allowedImageExtensions, getUploadContentType, maxUploadSizeBytes } from "@/lib/validation/upload"

interface PhotoUploadLabels {
  title: string; description: string; current: string; choose: string; upload: string
  replace: string; uploading: string; success: string; error: string; disabled: string
  requirements: string; saved: string; selected: string; invalid: string; refresh: string
  previewUnavailable: string
}
type Photo = { filename: string | null; url: string }

export function PhotoUpload({ token, labels, disabled, existingPhoto }: {
  token: string; labels: PhotoUploadLabels; disabled: boolean; existingPhoto: Photo | null
}) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [savedPhoto, setSavedPhoto] = useState(existingPhoto)
  const [selected, setSelected] = useState<{ file: File; url: string } | null>(null)
  const [status, setStatus] = useState<"idle" | "uploading" | "success" | "error">("idle")

  useEffect(() => () => { if (selected) URL.revokeObjectURL(selected.url) }, [selected])

  function chooseFile(file: File | undefined) {
    if (!file) return
    if (!getUploadContentType(file) || file.size > maxUploadSizeBytes || file.size === 0) {
      setSelected((previous) => {
        if (previous) URL.revokeObjectURL(previous.url)
        return null
      })
      setStatus("error")
      return
    }
    setStatus("idle")
    setSelected((previous) => {
      if (previous) URL.revokeObjectURL(previous.url)
      return { file, url: URL.createObjectURL(file) }
    })
  }

  async function uploadSelectedFile() {
    if (!selected) return
    setStatus("uploading")
    try {
      const contentType = getUploadContentType(selected.file)
      if (!contentType) throw new Error("invalid-file")
      const input = { token, filename: selected.file.name, contentType, sizeBytes: selected.file.size }
      const presign = await fetch("/api/uploads/presign", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(input) })
      if (!presign.ok) throw new Error("presign")
      const { uploadUrl, objectKey } = await presign.json() as { uploadUrl: string; objectKey: string }
      const upload = await fetch(uploadUrl, { method: "PUT", headers: { "content-type": contentType }, body: selected.file })
      if (!upload.ok) throw new Error("upload")
      const complete = await fetch("/api/uploads/complete", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...input, objectKey }) })
      if (!complete.ok) throw new Error("complete")
      const result = await complete.json() as { photo: Photo }
      setSavedPhoto(result.photo)
      setSelected(null)
      if (inputRef.current) inputRef.current.value = ""
      setStatus("success")
    } catch { setStatus("error") }
  }

  return (
    <section className="border-t border-wedding-line pt-10">
      <div className="mx-auto grid max-w-3xl gap-4"><p className="wedding-section-label">04</p><div><h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{labels.description}</p></div><p className="font-wedding-ui text-sm">{labels.requirements}</p></div>
      <div className="mx-auto mt-6 max-w-3xl space-y-5">
        {savedPhoto ? <div><p className="mb-2 font-wedding-ui text-sm">{labels.saved}</p><PhotoPreview photo={{ ...savedPhoto, fallback: labels.refresh }} alt={labels.current.replace("{filename}", savedPhoto.filename ?? "")} /></div> : null}
        {selected ? <div><p className="mb-2 font-wedding-ui text-sm">{labels.selected}</p><PhotoPreview photo={{ url: selected.url, fallback: labels.previewUnavailable }} alt={labels.selected} /></div> : null}
        {disabled ? <p className="border border-wedding-line bg-wedding-cream px-4 py-3 font-wedding-ui text-sm">{labels.disabled}</p> : <div className="flex flex-col gap-4 wedding-md:flex-row wedding-md:items-end"><label className="flex-1 font-wedding-ui text-sm"><span>{labels.choose}</span><input ref={inputRef} type="file" accept={[...allowedImageContentTypes, ...allowedImageExtensions].join(",")} disabled={status === "uploading"} onChange={(event) => chooseFile(event.target.files?.[0])} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3 disabled:opacity-60" /></label><button type="button" onClick={uploadSelectedFile} disabled={!selected || status === "uploading"} className="wedding-primary-cta disabled:cursor-not-allowed disabled:opacity-60">{status === "uploading" ? labels.uploading : savedPhoto ? labels.replace : labels.upload}</button></div>}
        {status === "success" ? <p aria-live="polite" className="font-wedding-ui text-sm text-wedding-olive">{labels.success}</p> : null}
        {status === "error" ? <p aria-live="polite" className="font-wedding-ui text-sm text-wedding-terracotta">{selected ? labels.error : labels.invalid}</p> : null}
      </div>
    </section>
  )
}