// 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 = { userId: string; role: string; label: string };

const DEV_USERS: DevUser[] = [
  { userId: 'user-001', role: 'rep', label: 'Rafael — Rep (user-001)' },
  { userId: 'user-002', role: 'rep', label: 'Rep 2 (user-002)' },
  { userId: 'user-sandra-01', role: 'supervisor', label: 'Sandra — Supervisora' },
  { userId: 'user-manager-01', role: 'manager', label: 'Gerente (user-manager-01)' },
];

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.userId);
    setError(null);
    try {
      const raw = await apiFetch('/auth/dev/token', {
        method: 'POST',
        body: { userId: user.userId, workspaceId: 'dev-workspace', 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 direction="vertical" size={16} style={{ width: '100%' }}>
          <Typography.Title level={3} style={{ margin: 0 }}>
            SAR · Login Dev
          </Typography.Title>
          <Alert
            type="warning"
            message="Ambiente de desenvolvimento"
            description="Este login automático não existe em produção."
            showIcon
          />
          {error && <Alert type="error" message={error} showIcon />}
          <Divider style={{ margin: '4px 0' }}>Entrar como</Divider>
          {DEV_USERS.map((u) => (
            <Button
              key={u.userId}
              block
              type={u.role === 'rep' ? 'primary' : 'default'}
              loading={loading === u.userId}
              onClick={() => void handleLogin(u)}
            >
              {u.label}
            </Button>
          ))}
        </Space>
      </Card>
    </Flex>
  );
}