FieldOps/apps/operator-pwa/app/select-operator/operator-picker.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { signIn } from 'next-auth/react';
import { ArrowLeft, Delete } from 'lucide-react';

interface Operator {
  id: string;
  email: string;
}

type PickerState =
  | { step: 'list' }
  | { step: 'pin'; operator: Operator };

const PIN_MIN = 4;
const PIN_MAX = 6;

function OperatorList({
  operators,
  onSelect,
  t,
}: {
  operators: Operator[];
  onSelect: (op: Operator) => void;
  t: ReturnType<typeof useTranslations<'auth'>>;
}) {
  if (operators.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">{t('noOperators')}</p>
    );
  }
  return (
    <div className="flex flex-col gap-3">
      {operators.map((op) => (
        <button
          key={op.id}
          onClick={() => onSelect(op)}
          className="w-full rounded-xl border border-border bg-card px-6 py-5 text-left text-base font-medium transition-colors hover:bg-accent active:scale-[0.98]"
        >
          {op.email}
        </button>
      ))}
    </div>
  );
}

function PinPad({
  operator,
  onBack,
  t,
  tc,
}: {
  operator: Operator;
  onBack: () => void;
  t: ReturnType<typeof useTranslations<'auth'>>;
  tc: ReturnType<typeof useTranslations<'common'>>;
}) {
  const router = useRouter();
  const [digits, setDigits] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function press(d: string) {
    if (digits.length >= PIN_MAX) return;
    setDigits((prev) => prev + d);
    setError(null);
  }

  function erase() {
    setDigits((prev) => prev.slice(0, -1));
    setError(null);
  }

  async function submit() {
    if (digits.length < PIN_MIN || busy) return;
    setBusy(true);
    setError(null);
    try {
      const result = await signIn('credentials', {
        email: operator.email,
        pin: digits,
        redirect: false,
      });
      if (result?.error) {
        setDigits('');
        setError(t('invalidPin'));
      } else {
        router.push('/');
        router.refresh();
      }
    } catch {
      setDigits('');
      setError(t('unexpectedError'));
    } finally {
      setBusy(false);
    }
  }

  const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del'];

  return (
    <div className="flex flex-col gap-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <button
          onClick={onBack}
          disabled={busy}
          className="rounded-lg p-2 hover:bg-accent disabled:opacity-50"
          aria-label={t('back')}
        >
          <ArrowLeft className="h-5 w-5" />
        </button>
        <div>
          <p className="text-xs text-muted-foreground">{t('operatorSelected')}</p>
          <p className="text-sm font-medium">{operator.email}</p>
        </div>
      </div>

      {/* PIN dots */}
      <div className="flex justify-center gap-4">
        {Array.from({ length: PIN_MAX }).map((_, i) => (
          <div
            key={i}
            className={`h-4 w-4 rounded-full border-2 transition-colors ${
              i < digits.length
                ? 'border-primary bg-primary'
                : 'border-muted-foreground bg-transparent'
            }`}
          />
        ))}
      </div>

      {/* Error */}
      {error && (
        <p className="text-center text-sm text-destructive">{error}</p>
      )}

      {/* Numpad */}
      <div className="grid grid-cols-3 gap-3">
        {keys.map((key, idx) => {
          if (key === '') {
            return <div key={idx} />;
          }
          if (key === 'del') {
            return (
              <button
                key={idx}
                onClick={erase}
                disabled={busy || digits.length === 0}
                className="flex items-center justify-center rounded-2xl border border-border bg-card py-5 text-lg font-medium transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
                aria-label={t('deleteDigit')}
              >
                <Delete className="h-5 w-5" />
              </button>
            );
          }
          return (
            <button
              key={idx}
              onClick={() => press(key)}
              disabled={busy || digits.length >= PIN_MAX}
              className="rounded-2xl border border-border bg-card py-5 text-xl font-semibold transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
            >
              {key}
            </button>
          );
        })}
      </div>

      {/* Submit */}
      <button
        onClick={submit}
        disabled={digits.length < PIN_MIN || busy}
        className="w-full rounded-xl bg-primary py-4 text-base font-semibold text-primary-foreground transition-opacity hover:opacity-90 active:scale-[0.98] disabled:opacity-40"
      >
        {busy ? tc('entering') : tc('enter')}
      </button>
    </div>
  );
}

export function OperatorPicker({ operators }: { operators: Operator[] }) {
  const t = useTranslations('auth');
  const tc = useTranslations('common');
  const [state, setState] = useState<PickerState>({ step: 'list' });

  if (state.step === 'pin') {
    return (
      <PinPad
        operator={state.operator}
        onBack={() => setState({ step: 'list' })}
        t={t}
        tc={tc}
      />
    );
  }

  return (
    <OperatorList
      operators={operators}
      onSelect={(op) => setState({ step: 'pin', operator: op })}
      t={t}
    />
  );
}