ita-ito-horaires/app/admin/parametres/SettingsForm.tsx

'use client';

import { useState, useTransition } from 'react';

import {
  forgetDevice,
  regenerateDeviceToken,
  saveSettings,
  testTranslation,
  type SettingsInput,
} from './actions';

export type DeviceRow = {
  id: string;
  friendlyId: string;
  macAddress: string;
  lastSeenAt: string | null;
  fwVersion: string | null;
};

export default function SettingsForm({
  canEdit,
  initial,
  devices,
  deviceBaseUrl,
}: {
  canEdit: boolean;
  initial: SettingsInput;
  devices: DeviceRow[];
  deviceBaseUrl: string;
}) {
  const [form, setForm] = useState(initial);
  const [pending, startTransition] = useTransition();
  const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);
  const [issuedToken, setIssuedToken] = useState<{ id: string; token: string } | null>(null);

  function set<K extends keyof SettingsInput>(key: K, value: SettingsInput[K]) {
    setMessage(null);
    setForm((current) => ({ ...current, [key]: value }));
  }

  function run(work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) {
    setMessage(null);
    startTransition(async () => {
      const result = await work();
      setMessage(result.ok ? { kind: 'ok', text: success } : { kind: 'error', text: result.error });
    });
  }

  return (
    <div className="mt-8 space-y-10">
      {message ? (
        <p
          role="status"
          className={`rounded-[var(--radius-md)] px-4 py-3 text-sm ${
            message.kind === 'ok'
              ? 'bg-[var(--success-tint)] text-[var(--success)]'
              : 'bg-[var(--danger-tint)] text-[var(--danger)]'
          }`}
        >
          {message.text}
        </p>
      ) : null}

      <section className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-5">
        <h2 className="text-lg">Boutique</h2>

        <div className="mt-4 grid gap-4 sm:grid-cols-2">
          <Field label="Nom affiché">
            <input
              type="text"
              value={form.shopName}
              disabled={!canEdit}
              onChange={(event) => set('shopName', event.target.value)}
              className={inputClass}
            />
          </Field>
          <Field label="Fuseau horaire">
            <input
              type="text"
              value={form.timezone}
              disabled={!canEdit}
              onChange={(event) => set('timezone', event.target.value)}
              className={inputClass}
            />
          </Field>
          <Field label="Pays (ISO)">
            <input
              type="text"
              value={form.countryIsoCode}
              disabled={!canEdit}
              onChange={(event) => set('countryIsoCode', event.target.value)}
              className={inputClass}
            />
          </Field>
          <Field
            label="Canton / subdivision"
            hint="Détermine les jours fériés synchronisés."
          >
            <input
              type="text"
              value={form.subdivisionCode}
              disabled={!canEdit}
              onChange={(event) => set('subdivisionCode', event.target.value)}
              className={inputClass}
            />
          </Field>
        </div>
      </section>

      <section className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-5">
        <h2 className="text-lg">Écran</h2>
        <p className="mt-1 text-sm text-[var(--ink-muted)]">
          L’écran dort entre deux réveils. Un intervalle court garde l’affichage juste, un intervalle
          long ménage la batterie.
        </p>

        <div className="mt-4 grid gap-4 sm:grid-cols-2">
          <Field label="Réveil quand la boutique est ouverte (secondes)">
            <input
              type="number"
              value={form.refreshRateOpenSec}
              disabled={!canEdit}
              onChange={(event) => set('refreshRateOpenSec', Number(event.target.value))}
              className={inputClass}
            />
          </Field>
          <Field label="Réveil la nuit et jours fermés (secondes)">
            <input
              type="number"
              value={form.refreshRateClosedSec}
              disabled={!canEdit}
              onChange={(event) => set('refreshRateClosedSec', Number(event.target.value))}
              className={inputClass}
            />
          </Field>
          <Field label="Format d’image" hint="Le firmware Seeed référence des .bmp.">
            <select
              value={form.imageFormat}
              disabled={!canEdit}
              onChange={(event) => set('imageFormat', event.target.value as 'bmp' | 'png')}
              className={inputClass}
            >
              <option value="bmp">BMP 1 bit</option>
              <option value="png">PNG 1 bit</option>
            </select>
          </Field>
        </div>
      </section>

      {canEdit ? (
        <button
          type="button"
          disabled={pending}
          onClick={() => run(() => saveSettings(form), 'Paramètres enregistrés.')}
          className="rounded-[var(--radius-md)] bg-[var(--accent)] px-4 py-2.5 font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-40"
        >
          {pending ? 'Enregistrement…' : 'Enregistrer les paramètres'}
        </button>
      ) : null}

      <section className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-5">
        <h2 className="text-lg">Appareils</h2>
        <p className="mt-1 text-sm text-[var(--ink-muted)]">
          À saisir dans le portail captif de l’écran sous <em>Advanced &gt; Custom Server</em>,{' '}
          <strong>sans barre oblique finale</strong>&nbsp;: <code>{deviceBaseUrl}</code>
        </p>

        {devices.length === 0 ? (
          <p className="mt-4 text-sm text-[var(--ink-muted)]">
            Aucun appareil appairé. Le premier écran qui appelle sera enregistré automatiquement.
          </p>
        ) : (
          <ul className="mt-4 divide-y divide-[var(--line)]">
            {devices.map((device) => (
              <li key={device.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 py-3">
                <span className="font-mono">{device.friendlyId}</span>
                <span className="text-sm text-[var(--ink-muted)]">{device.macAddress}</span>
                <span className="text-sm text-[var(--ink-muted)]">
                  {device.lastSeenAt ? `vu ${device.lastSeenAt}` : 'jamais vu'}
                  {device.fwVersion ? ` · firmware ${device.fwVersion}` : ''}
                </span>

                {canEdit ? (
                  <span className="ml-auto flex gap-3 text-sm">
                    <button
                      type="button"
                      disabled={pending}
                      onClick={() => {
                        setMessage(null);
                        setIssuedToken(null);
                        startTransition(async () => {
                          const result = await regenerateDeviceToken(device.id);
                          if (result.ok) {
                            setIssuedToken({ id: device.id, token: result.value.token });
                          } else {
                            setMessage({ kind: 'error', text: result.error });
                          }
                        });
                      }}
                      className="underline-offset-2 hover:underline disabled:opacity-40"
                    >
                      Régénérer le jeton
                    </button>
                    <button
                      type="button"
                      disabled={pending}
                      onClick={() => run(() => forgetDevice(device.id), 'Appareil oublié.')}
                      className="text-[var(--ink-muted)] underline-offset-2 hover:text-[var(--danger)] hover:underline disabled:opacity-40"
                    >
                      Oublier
                    </button>
                  </span>
                ) : null}

                {issuedToken?.id === device.id ? (
                  <div className="mt-2 w-full rounded-[var(--radius-sm)] border border-[var(--accent)] bg-[var(--accent-tint)] p-3 text-sm">
                    <p className="font-medium text-[var(--accent-ink)]">
                      Nouveau jeton — affiché une seule fois&nbsp;:
                    </p>
                    <code className="mt-1 block break-all">{issuedToken.token}</code>
                    <p className="mt-1 text-[var(--accent-ink)]">
                      L’ancien ne fonctionne plus. Réappairez l’écran par le portail captif.
                    </p>
                  </div>
                ) : null}
              </li>
            ))}
          </ul>
        )}
      </section>

      {canEdit ? (
        <section className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-5">
          <h2 className="text-lg">Service de traduction</h2>
          <p className="mt-1 text-sm text-[var(--ink-muted)]">
            Traduit une phrase type pour vérifier la configuration, sans créer de message.
          </p>
          <button
            type="button"
            disabled={pending}
            onClick={() => {
              setMessage(null);
              startTransition(async () => {
                const result = await testTranslation();
                setMessage(
                  result.ok
                    ? { kind: 'ok', text: `Traduction obtenue : « ${result.value.text} »` }
                    : { kind: 'error', text: result.error },
                );
              });
            }}
            className="mt-3 rounded-[var(--radius-md)] border border-[var(--line-strong)] px-4 py-2 transition-colors hover:bg-[var(--surface-muted)] disabled:opacity-40"
          >
            Tester la traduction
          </button>
        </section>
      ) : null}
    </div>
  );
}

const inputClass =
  'mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base disabled:opacity-60';

function Field({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: React.ReactNode;
}) {
  return (
    <label className="block text-sm">
      <span className="block text-[var(--ink-muted)]">{label}</span>
      {children}
      {hint ? <span className="mt-1 block text-xs text-[var(--ink-muted)]">{hint}</span> : null}
    </label>
  );
}