"use client";

import { useState, type ChangeEvent } from "react";
import Image from "next/image";
import { Upload, Loader2 } from "lucide-react";

export function PhotoUploader({
  name,
  defaultValue,
}: {
  name: string;
  defaultValue?: string | null;
}) {
  const [url, setUrl] = useState(defaultValue ?? "");
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleFile(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    setUploading(true);
    setError(null);
    try {
      const formData = new FormData();
      formData.append("file", file);
      const res = await fetch("/api/upload", { method: "POST", body: formData });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Upload failed");
      setUrl(data.url);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Upload failed");
    } finally {
      setUploading(false);
      event.target.value = "";
    }
  }

  return (
    <div className="flex flex-col gap-3">
      <input type="hidden" name={name} value={url} />
      {url ? (
        <div className="relative aspect-video w-full max-w-sm overflow-hidden rounded-xl border border-charcoal-950/10">
          <Image src={url} alt="" fill sizes="384px" className="object-cover" />
        </div>
      ) : null}
      <label className="inline-flex w-fit cursor-pointer items-center gap-2 rounded-full border border-charcoal-950/15 px-4 py-2 text-sm font-medium text-charcoal-700 transition-colors hover:bg-charcoal-50">
        {uploading ? <Loader2 size={16} className="animate-spin" /> : <Upload size={16} />}
        {uploading ? "Uploading..." : url ? "Replace image" : "Upload image"}
        <input type="file" accept="image/*" className="hidden" onChange={handleFile} />
      </label>
      {error ? <p className="text-xs text-red-600">{error}</p> : null}
    </div>
  );
}