"use client";

import { useState } from "react";

export default function FileUpload({
  name,
  label,
  accept,
  defaultUrl,
  preview,
}: {
  name: string;
  label?: string;
  accept?: string;
  defaultUrl?: string | null;
  preview?: boolean;
}) {
  const [url, setUrl] = useState(defaultUrl || "");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setBusy(true);
    setError("");
    try {
      const fd = new FormData();
      fd.append("file", file);
      const res = await fetch("/api/upload", { method: "POST", body: fd });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Error al subir");
      setUrl(data.url);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al subir");
    } finally {
      setBusy(false);
    }
  }

  const isImage = url && /\.(png|jpe?g|gif|webp|avif)$/i.test(url);

  return (
    <div>
      {label ? <label className="label">{label}</label> : null}
      <input type="hidden" name={name} value={url} readOnly />
      <input
        type="file"
        accept={accept}
        onChange={onChange}
        className="block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-blue-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-blue-700 hover:file:bg-blue-100"
      />
      {busy ? <p className="mt-1 text-xs text-slate-400">Subiendo…</p> : null}
      {error ? <p className="mt-1 text-xs text-red-600">{error}</p> : null}
      {url && !busy ? (
        <div className="mt-2 text-xs text-slate-500">
          {preview && isImage ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={url} alt="preview" className="h-20 w-20 rounded-lg object-cover ring-1 ring-slate-200" />
          ) : (
            <a href={url} target="_blank" className="text-blue-600 underline" rel="noreferrer">
              Ver archivo subido
            </a>
          )}
        </div>
      ) : null}
    </div>
  );
}