// Componente de login dev — visível apenas quando NODE_ENV !== 'production' e sem token.
// Em produção o token vem do master-login real (fora do escopo do MVP).

import { useState } from 'react';
import { Alert, Button, Card, Divider, Flex, Space, Typography } from 'antd';
import { apiFetch } from '../../lib/api-client';
import { authStore } from '../../lib/auth-store';
import { AuthTokenResponseSchema } from '@sar/api-interface';

type DevUser = { key: string; userId: string; role: string; label: string };

// userId = cod_vendedor como string; idEmpresa fica a cargo do backend (DEV_EMPRESA_ID).
// Usuários provisórios para testar as telas por papel enquanto o cadastro de
// usuários não existe: Pavei (carteira própria), Sidnei (equipe via
// vw_representantes.cod_supervisor = 191), Lucas (empresa toda).
const DEV_USERS: DevUser[] = [
  { key: 'rep-29', userId: '29', role: 'rep', label: 'Pavei — Representante (cód. 29)' },
  { key: 'sup-191', userId: '191', role: 'supervisor', label: 'Sidnei — Supervisor (cód. 191)' },
  { key: 'mgr-156', userId: '156', role: 'manager', label: 'Lucas — Gerente/Admin (cód. 156)' },
];

export function DevLogin({ onLogin }: { onLogin: () => void }) {
  const [loading, setLoading] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleLogin(user: DevUser) {
    setLoading(user.key);
    setError(null);
    try {
      const raw = await apiFetch('/auth/dev/token', {
        method: 'POST',
        body: { userId: user.userId, role: user.role },
      });
      const { accessToken } = AuthTokenResponseSchema.parse(raw);
      authStore.set(accessToken);
      onLogin();
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Erro ao obter token');
    } finally {
      setLoading(null);
    }
  }

  return (
    <Flex justify="center" align="center" style={{ minHeight: '100vh' }}>
      <Card style={{ width: 380 }}>
        <Space orientation="vertical" size={16} style={{ width: '100%' }}>
          <Typography.Title level={3} style={{ margin: 0 }}>
            SAR · Login Dev
          </Typography.Title>
          <Alert
            type="warning"
            title="Ambiente de desenvolvimento"
            description="Este login automático não existe em produção."
            showIcon
          />
          {error && <Alert type="error" title={error} showIcon />}
          <Divider style={{ margin: '4px 0' }}>Entrar como</Divider>
          {DEV_USERS.map((u) => (
            <Button
              key={u.key}
              block
              type={u.role === 'rep' ? 'primary' : 'default'}
              loading={loading === u.key}
              onClick={() => void handleLogin(u)}
            >
              {u.label}
            </Button>
          ))}
        </Space>
      </Card>
    </Flex>
  );
}
