"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { addProductAction } from "@/app/shop-actions";

const DEFAULT_SIZES = ["S", "M", "L", "XL", "XXL"];

export function ShopProductForm() {
  const t = useTranslations("shop");
  const [rows, setRows] = useState(DEFAULT_SIZES.map((label) => ({ label, qty: "0" })));
  const [error, setError] = useState("");
  const [ok, setOk] = useState("");
  const [pending, setPending] = useState(false);

  async function onSubmit(formData: FormData) {
    setPending(true);
    setError("");
    setOk("");
    const result = await addProductAction(formData);
    setPending(false);
    if (result && "error" in result && result.error) {
      setError(t(`err_${result.error}`));
      return;
    }
    setOk(t("productAdded"));
  }

  return (
    <form action={onSubmit} className="card space-y-4 p-5">
      <h2 className="text-lg font-semibold">{t("addProduct")}</h2>
      {error ? <p className="text-sm text-red-700">{error}</p> : null}
      {ok ? <p className="text-sm text-brand">{ok}</p> : null}
      <label className="block text-sm">
        {t("productTitle")}
        <input name="title" required className="field mt-1" />
      </label>
      <label className="block text-sm">
        {t("details")}
        <textarea name="details" required rows={5} className="field mt-1" />
      </label>
      <label className="block text-sm">
        {t("photos")}
        <input name="photos" type="file" accept="image/jpeg,image/png,image/webp" multiple required className="mt-1 w-full text-sm" />
      </label>
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="block text-sm">
          {t("price")}
          <input name="price" type="number" min={1} step="0.01" required className="field mt-1" />
        </label>
        <label className="block text-sm">
          {t("currencyHint")}
          <input disabled className="field mt-1 opacity-70" value={t("fromStore")} />
        </label>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="block text-sm">
          {t("offerQty")}
          <input name="offerQty" type="number" min={0} defaultValue={2} className="field mt-1" />
        </label>
        <label className="block text-sm">
          {t("offerPrice")}
          <input name="offerPrice" type="number" min={0} step="0.01" className="field mt-1" />
        </label>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="block text-sm">
          {t("weightFrom")}
          <input name="weightFrom" type="number" min={0} step="0.1" className="field mt-1" />
        </label>
        <label className="block text-sm">
          {t("weightTo")}
          <input name="weightTo" type="number" min={0} step="0.1" className="field mt-1" />
        </label>
      </div>
      <div>
        <p className="text-sm font-medium">{t("sizes")}</p>
        <p className="mb-2 text-xs text-muted">{t("sizesHint")}</p>
        <div className="space-y-2">
          {rows.map((row, index) => (
            <div key={`${row.label}-${index}`} className="grid grid-cols-2 gap-2">
              <input name="sizeLabel" defaultValue={row.label} className="field" placeholder={t("sizeLabel")} />
              <input name="sizeQty" type="number" min={0} defaultValue={row.qty} className="field" placeholder={t("sizeQty")} />
            </div>
          ))}
        </div>
        <button
          type="button"
          className="btn-ghost mt-2 text-sm"
          onClick={() => setRows((list) => [...list, { label: "", qty: "0" }])}
        >
          {t("addSize")}
        </button>
      </div>
      <button disabled={pending} className="btn-primary">
        {t("publish")}
      </button>
    </form>
  );
}