'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, MapPin } from 'lucide-react';
import { trpc } from '@/lib/trpc/client';

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

type PickerState =
  | { step: 'list' }
  | { step: 'pin'; operator: Operator }
  | { step: 'workstation'; 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,
  onSuccess,
  t,
  tc,
}: {
  operator: Operator;
  onBack: () => void;
  onSuccess: () => void;
  t: ReturnType<typeof useTranslations<'auth'>>;
  tc: ReturnType<typeof useTranslations<'common'>>;
}) {
  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 {
        // Authenticated — next step is binding to a workstation (badge-in).
        onSuccess();
      }
    } 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>
  );
}

function WorkstationStep({
  operator,
  ts,
}: {
  operator: Operator;
  ts: ReturnType<typeof useTranslations<'session'>>;
}) {
  const router = useRouter();
  const { data: workstations = [], isLoading } = trpc.workstation.list.useQuery(undefined, {
    staleTime: 60 * 60 * 1000,
  });
  const startSession = trpc.operatorSession.start.useMutation({
    onSuccess: () => {
      router.push('/');
      router.refresh();
    },
  });

  return (
    <div className="flex flex-col gap-6">
      <div>
        <p className="text-xs text-muted-foreground">{operator.email}</p>
        <h2 className="mt-1 text-xl font-bold tracking-tight">{ts('badgeInTitle')}</h2>
        <p className="mt-1 text-sm text-muted-foreground">{ts('badgeInSubtitle')}</p>
      </div>

      {isLoading ? (
        <p className="text-sm text-muted-foreground">{ts('loadingStations')}</p>
      ) : workstations.length === 0 ? (
        <p className="text-sm text-muted-foreground">{ts('noStations')}</p>
      ) : (
        <div className="flex flex-col gap-3">
          {workstations.map((ws) => (
            <button
              key={ws.id}
              onClick={() => startSession.mutate({ workstationId: ws.id })}
              disabled={startSession.isPending}
              className="flex w-full items-center gap-3 rounded-xl border border-border bg-card px-6 py-5 text-left transition-colors hover:bg-accent active:scale-[0.98] disabled:opacity-50"
            >
              <MapPin className="h-5 w-5 shrink-0 text-primary" />
              <span>
                <span className="block text-base font-medium">
                  {ws.code} — {ws.name}
                </span>
                <span className="block text-xs text-muted-foreground">{ws.area}</span>
              </span>
            </button>
          ))}
        </div>
      )}

      {startSession.isPending && (
        <p className="text-center text-sm text-muted-foreground">{ts('starting')}</p>
      )}
    </div>
  );
}

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

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

  if (state.step === 'workstation') {
    return <WorkstationStep operator={state.operator} ts={ts} />;
  }

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