"use client";

import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Avatar } from "./Avatar";
import { Icon } from "./Icon";

type Props = {
  endpoint: string;
  currentUrl: string | null;
  name: string;
  size?: number;
  square?: boolean;
  label?: string;
};

/** Lädt ein Bild hoch (POST → { url }) und aktualisiert die Ansicht. */
export function AvatarUploader({
  endpoint,
  currentUrl,
  name,
  size = 96,
  square = false,
  label = "Bild ändern",
}: Props) {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [url, setUrl] = useState<string | null>(currentUrl);

  const onPick = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file) return;
    setBusy(true);
    setError(null);
    try {
      const fd = new FormData();
      fd.append("file", file);
      const res = await fetch(endpoint, { method: "POST", body: fd });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        setError(d.error ?? "Upload fehlgeschlagen.");
        return;
      }
      const d = await res.json();
      setUrl(d.url);
      router.refresh();
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="flex items-center gap-4">
      <Avatar name={name} src={url} size={size} square={square} />
      <div>
        <input
          type="file"
          accept="image/png,image/jpeg,image/webp,image/gif"
          hidden
          ref={inputRef}
          onChange={onPick}
        />
        <button
          type="button"
          className="btn btn-sm"
          onClick={() => inputRef.current?.click()}
          disabled={busy}
        >
          <Icon name="user" size={15} />
          {busy ? "Lädt …" : label}
        </button>
        <p className="text-muted mt-1 text-xs">PNG, JPG, WEBP · max. 4 MB</p>
        {error ? <p className="field-error mt-1">{error}</p> : null}
      </div>
    </div>
  );
}