"use client";

import { FileUp, Loader2 } from "lucide-react";
import { useId, useState } from "react";
import { cn } from "@/lib/utils";

type AdminModelUploadProps = {
  label: string;
  accept: string;
  helperText?: string;
  name?: string;
  defaultValue?: string;
  value?: string;
  onChange?: (url: string) => void;
  className?: string;
};

export function AdminModelUpload({
  label,
  accept,
  helperText,
  name,
  defaultValue = "",
  value,
  onChange,
  className,
}: AdminModelUploadProps) {
  const inputId = useId();
  const [fileUrl, setFileUrl] = useState(value ?? defaultValue);
  const [status, setStatus] = useState("");
  const [isUploading, setIsUploading] = useState(false);

  async function uploadModel(file: File) {
    const body = new FormData();
    body.append("file", file);
    body.append("kind", "model");
    setIsUploading(true);
    setStatus("");

    try {
      const response = await fetch("/api/admin/upload", {
        method: "POST",
        body,
      });
      const result = (await response.json()) as { ok?: boolean; url?: string; message?: string };
      if (!response.ok || !result.ok || !result.url) {
        throw new Error(result.message || "Upload failed.");
      }

      setFileUrl(result.url);
      onChange?.(result.url);
      setStatus("File uploaded.");
    } catch (error) {
      setStatus(error instanceof Error ? error.message : "Upload failed.");
    } finally {
      setIsUploading(false);
    }
  }

  return (
    <div className={cn("rounded-xl border border-border bg-white p-3", className)}>
      {name ? <input name={name} type="hidden" value={fileUrl} readOnly /> : null}
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-sm font-bold text-navy-deep">{label}</p>
          <p className="mt-1 text-xs text-navy-muted">
            {helperText ?? `Upload file (${accept}).`}
          </p>
        </div>
        <input
          id={inputId}
          className="sr-only"
          type="file"
          accept={accept}
          onChange={(event) => {
            const file = event.target.files?.[0];
            if (file) {
              void uploadModel(file);
            }
            event.currentTarget.value = "";
          }}
        />
        <label
          className="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border border-primary/30 bg-white px-3 text-sm font-semibold text-primary-deep transition hover:border-primary hover:bg-primary-soft"
          htmlFor={inputId}
        >
          {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileUp className="h-4 w-4" />}
          {isUploading ? "Uploading" : "Upload"}
        </label>
      </div>
      <p className="mt-3 truncate rounded-lg border border-border bg-primary-soft/40 px-3 py-2 text-xs text-navy-muted">
        {fileUrl || "No file uploaded yet"}
      </p>
      {status ? <p className="mt-2 text-xs font-semibold text-navy-muted">{status}</p> : null}
    </div>
  );
}