OPEN_CODEX_API/src/components/auth/NoAccessScreen.tsx

import { useMemo, useState } from "react";
import { Loader2, ShieldX } from "lucide-react";
import { BorderBeam } from "@/components/ui/border-beam";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { InteractiveHoverButton } from "@/components/ui/interactive-hover-button";
import { Label } from "@/components/ui/label";
import type { AccessBlockReason } from "@/contexts/AuthAccessContext";
import { authMeService } from "@/services/fechamento/authMe";
import { GlobalFunctions, TransferAreaProperties } from "@/GlobalFunctions";

type NoAccessScreenProps = {
  reason: AccessBlockReason | null;
  errorMessage?: string | null;
};

function getMessage(reason: AccessBlockReason | null): string {
  if (reason === "inativo") {
    return "Seu usuário está inativo neste módulo. Solicite a reativação ao administrador.";
  }
  if (reason === "erro") {
    return "Não foi possível validar seu acesso agora. Tente novamente em instantes.";
  }
  return "Você não tem acesso a este módulo no momento. Solicite acesso ao administrador.";
}

export function NoAccessScreen({ reason, errorMessage }: NoAccessScreenProps) {
  const [unidadeNome, setUnidadeNome] = useState("");
  const [adminNome, setAdminNome] = useState("");
  const [adminEmail, setAdminEmail] = useState("");
  const [saving, setSaving] = useState(false);

  /** Código do estabelecimento: prioriza área de transferência (Codex), depois o valor repassado pelo AuthGate. */
  const estabelecimentoId = useMemo(() => {
    const fromTransfer = String(
      GlobalFunctions.getTransferProperty(TransferAreaProperties.EstabelecimentoCodigo) ?? "",
    ).trim();
    const fromGate = (errorMessage ?? "").trim();
    return fromTransfer || fromGate;
  }, [errorMessage]);

  const handleBootstrap = async () => {
    if (!estabelecimentoId) {
      return;
    }
    if (!unidadeNome.trim() || !adminNome.trim() || !adminEmail.trim()) {
      alert("Preencha nome da unidade, nome do admin e e-mail.");
      return;
    }
    try {
      setSaving(true);
      await authMeService.bootstrapInitialize({
        estabelecimentoId,
        unidadeNome: unidadeNome.trim(),
        adminNome: adminNome.trim(),
        adminEmail: adminEmail.trim(),
      });
      window.location.reload();
    } catch (error) {
      alert(error instanceof Error ? error.message : "Erro ao inicializar ambiente.");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <Card className="relative w-full max-w-xl overflow-hidden">
        <CardHeader className="text-center">
          {reason === "bootstrap" ? (
            <>
              <CardTitle>Bem-vindo! Configuração inicial</CardTitle>
              <CardDescription className="text-base leading-relaxed text-muted-foreground">
                Este é o <strong className="font-medium text-foreground">primeiro acesso</strong> ao Fechamento HGTX
                para este estabelecimento. Em poucos passos você cadastra a unidade e o primeiro usuário administrador
                para começar a usar o sistema.
              </CardDescription>
            </>
          ) : (
            <>
              <div className="mb-3 flex justify-center">
                <ShieldX className="h-10 w-10 text-destructive" />
              </div>
              <CardTitle>Você não tem acesso a este módulo</CardTitle>
            </>
          )}
        </CardHeader>
        <CardContent className="space-y-3 text-center">
          {reason !== "bootstrap" ? <p className="text-muted-foreground">{getMessage(reason)}</p> : null}
          {reason === "bootstrap" ? (
            <div className="space-y-4 rounded-md border p-4 text-left">
              <div className="space-y-1">
                <Label>Código do estabelecimento</Label>
                <Input value={estabelecimentoId} disabled className="font-mono bg-muted" />
                <p className="text-xs text-muted-foreground">Preenchimento automático.</p>
                {!estabelecimentoId ? (
                  <p className="text-xs text-amber-700 dark:text-amber-200">
                    Não foi possível obter o código do estabelecimento. Abra o Intelligence Score a partir do Commander com o
                    estabelecimento carregado no transfer.
                  </p>
                ) : null}
              </div>
              <div className="space-y-1">
                <Label htmlFor="bootstrap-unidade">Nome da unidade</Label>
                <Input
                  id="bootstrap-unidade"
                  value={unidadeNome}
                  onChange={(e) => setUnidadeNome(e.target.value)}
                  placeholder="Ex.: Unidade Matriz"
                />
              </div>
              <div className="space-y-1">
                <Label htmlFor="bootstrap-admin-nome">Nome do primeiro admin</Label>
                <Input
                  id="bootstrap-admin-nome"
                  value={adminNome}
                  onChange={(e) => setAdminNome(e.target.value)}
                  placeholder="Ex.: João Silva"
                />
              </div>
              <div className="space-y-1">
                <Label htmlFor="bootstrap-admin-email">E-mail do primeiro admin</Label>
                <Input
                  id="bootstrap-admin-email"
                  type="email"
                  value={adminEmail}
                  onChange={(e) => setAdminEmail(e.target.value)}
                  placeholder="admin@empresa.com"
                />
              </div>
              <div className="flex justify-end">
                <InteractiveHoverButton
                  type="button"
                  onClick={handleBootstrap}
                  disabled={saving || !estabelecimentoId}
                  className="disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {saving ? (
                    <span className="inline-flex items-center gap-2">
                      <Loader2 className="h-4 w-4 shrink-0 animate-spin" aria-hidden />
                      Inicializando...
                    </span>
                  ) : (
                    "Iniciar ambiente"
                  )}
                </InteractiveHoverButton>
              </div>
            </div>
          ) : null}
          {reason !== "bootstrap" && errorMessage ? (
            <p className="text-sm text-muted-foreground">{errorMessage}</p>
          ) : null}
        </CardContent>
        <BorderBeam duration={8} size={100} />
      </Card>
    </div>
  );
}