"use client";

import { useActionState, useRef } from "react";
import { useTranslations } from "next-intl";
import { addOrderAttachmentsAction } from "@/lib/actions/orders";

export function AddAttachmentsForm({ orderId }: { orderId: string }) {
  const t = useTranslations("orders");
  const [state, formAction, pending] = useActionState(addOrderAttachmentsAction.bind(null, orderId), {});
  const formRef = useRef<HTMLFormElement>(null);

  return (
    <form
      ref={formRef}
      action={async (formData) => {
        await formAction(formData);
        formRef.current?.reset();
      }}
      className="flex flex-wrap items-center gap-2"
    >
      <input
        name="attachments"
        type="file"
        multiple
        accept="image/jpeg,image/png,image/webp,image/heic,application/pdf"
        className="text-xs text-[var(--rk-ink-muted)] file:mr-2 file:border file:border-white/20 file:bg-transparent file:text-[var(--rk-ink)] file:rounded-lg file:px-3 file:py-1.5 file:text-xs file:uppercase file:tracking-[0.1em] hover:file:border-white/50"
      />
      <button
        type="submit"
        disabled={pending}
        className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50 transition-colors shrink-0"
      >
        {pending ? "…" : t("addAttachmentsUpload")}
      </button>
      {state.error && <p className="w-full text-xs text-red-400">{state.error}</p>}
    </form>
  );
}