"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { saveShopAction } from "@/app/shop-actions";
import { SHOP_TEMPLATES, type Shop, type ShopTemplateId } from "@/lib/shop";

export function ShopSetupForm({ shop }: { shop: Shop | null }) {
  const t = useTranslations("shop");
  const [template, setTemplate] = useState<ShopTemplateId>(shop?.template ?? "luxe");
  const [error, setError] = useState("");
  const [pending, setPending] = useState(false);

  async function onSubmit(formData: FormData) {
    setPending(true);
    setError("");
    formData.set("template", template);
    const result = await saveShopAction(formData);
    setPending(false);
    if (result && "error" in result && result.error) setError(t(`err_${result.error}`));
  }

  return (
    <form action={onSubmit} className="card space-y-4 p-5">
      <h2 className="text-lg font-semibold">{t("setupTitle")}</h2>
      {error ? <p className="text-sm text-red-700">{error}</p> : null}
      <label className="block text-sm">
        {t("storeName")}
        <input name="name" required defaultValue={shop?.name ?? ""} className="field mt-1" />
      </label>
      <label className="block text-sm">
        {t("slug")}
        <input name="slug" defaultValue={shop?.slug ?? ""} className="field mt-1" dir="ltr" />
        <span className="mt-1 block text-xs text-muted">{t("slugHint")}</span>
      </label>
      <label className="block text-sm">
        {t("bio")}
        <textarea name="bio" rows={3} defaultValue={shop?.bio ?? ""} className="field mt-1" />
      </label>
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="block text-sm">
          {t("currency")}
          <input name="currency" defaultValue={shop?.currency ?? "EGP"} className="field mt-1" dir="ltr" />
        </label>
        <label className="block text-sm">
          {t("storeLang")}
          <select name="locale" defaultValue={shop?.locale ?? "ar"} className="field mt-1">
            <option value="ar">{t("langAr")}</option>
            <option value="en">{t("langEn")}</option>
          </select>
        </label>
      </div>
      <label className="block text-sm">
        {t("paymentNote")}
        <textarea name="paymentNote" rows={3} defaultValue={shop?.paymentNote ?? ""} className="field mt-1" />
      </label>
      <p className="text-sm font-medium">{t("pickTemplate")}</p>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
        {SHOP_TEMPLATES.map((item) => (
          <button
            key={item.id}
            type="button"
            onClick={() => setTemplate(item.id)}
            className={`rounded-2xl border p-3 text-start ${
              template === item.id ? "border-brand ring-2 ring-brand" : "border-line"
            }`}
          >
            <span className={`mb-2 block h-10 rounded-lg tpl-${item.id}`} />
            <span className="block text-sm font-semibold">{t(`tpl_${item.id}`)}</span>
          </button>
        ))}
      </div>
      <button disabled={pending} className="btn-primary">
        {shop ? t("save") : t("create")}
      </button>
    </form>
  );
}