'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { signIn } from 'next-auth/react';

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

export function OperatorPicker({ operators }: { operators: Operator[] }) {
  const router = useRouter();
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleSelect(email: string) {
    setBusy(email);
    setError(null);
    try {
      const result = await signIn('credentials', { email, redirect: false });
      if (result?.error) {
        setError(`Não foi possível entrar como ${email}`);
      } else {
        router.push('/');
        router.refresh();
      }
    } catch {
      setError('Erro inesperado. Tente novamente.');
    } finally {
      setBusy(null);
    }
  }

  if (operators.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">
        Nenhum operador encontrado. Execute <code>pnpm db:seed</code>.
      </p>
    );
  }

  return (
    <div className="flex flex-col gap-3">
      {operators.map((op) => (
        <button
          key={op.id}
          onClick={() => handleSelect(op.email)}
          disabled={busy !== null}
          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] disabled:opacity-50"
        >
          {busy === op.email ? 'A entrar…' : op.email}
        </button>
      ))}
      {error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  );
}