import { getTranslations } from "next-intl/server";
import { PageHead } from "@/components/mockup-ui";
import { ActionForm } from "@/components/work-orders/action-form";
import { SettingsTemplatesNav, templatesPageContext } from "@/components/work-orders/settings-nav";
import { Field, inputCls, Section } from "@/components/work-orders/ui";
import { updateNumberingAction } from "@/server/actions/work_orders/settings";
import { listNumberSequences } from "@/server/services/work-orders/settings";

/** Number sequences: prefix and digits (the counter itself is never reset). */
export default async function NumberingPage() {
  const { ctx } = await templatesPageContext();
  const t = await getTranslations("settingsTemplates");
  const sequences = await listNumberSequences(ctx);

  return (
    <main className="flex-1 p-4 md:p-6">
      <PageHead crumb={t("crumb")} title={t("numbering.title")} sub={t("numbering.sub")} />
      <SettingsTemplatesNav active="numbering" />
      <Section>
        <ul className="divide-y">
          {sequences.map((s) => (
            <li key={s.key} className="py-3">
              <ActionForm action={updateNumberingAction} namespace="settingsTemplates" submitLabel={t("numbering.save")} variant="outline" successText={t("saved")} className="grid items-end gap-3 sm:grid-cols-2 md:grid-cols-[1fr_140px_120px_1fr_auto]" footerClassName="mt-0">
                <input type="hidden" name="key" value={s.key} />
                <Field label={t("numbering.key")}>
                  <p className="flex min-h-11 items-center font-semibold">{t(`numbering.keys.${s.key}`)}</p>
                </Field>
                <Field label={t("numbering.prefix")} htmlFor={`n-prefix-${s.key}`}>
                  <input id={`n-prefix-${s.key}`} name="prefix" maxLength={12} pattern="[A-Za-z0-9\-_/]*" defaultValue={s.prefix} className={inputCls} />
                </Field>
                <Field label={t("numbering.padding")} htmlFor={`n-pad-${s.key}`}>
                  <input id={`n-pad-${s.key}`} name="padding" type="number" min={1} max={10} defaultValue={s.padding} className={inputCls} />
                </Field>
                <Field label={t("numbering.next")}>
                  <p className="flex min-h-11 items-center font-mono text-sm">{`${s.prefix}${String(s.nextValue).padStart(s.padding, "0")}`}</p>
                </Field>
              </ActionForm>
            </li>
          ))}
        </ul>
      </Section>
    </main>
  );
}