"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { Button, Card } from "./ui";

export type WorkspaceOption = {
  workspaceId: string;
  workspaceName: string;
  role: string;
  moduleEnabled: boolean;
};

/**
 * Escolha do workspace ativo. A seleção grava apenas preferência: o servidor
 * revalida a associação em toda requisição.
 */
export function WorkspacePicker({ memberships, next }: { memberships: WorkspaceOption[]; next: string }) {
  const router = useRouter();
  const [pending, setPending] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  return (
    <Card className="mt-6">
      <h2 className="text-lg font-semibold">Selecione o workspace</h2>
      <p className="mt-1 text-sm text-ink/80">
        Você participa de mais de um workspace. O Adaptador trabalha em um por vez.
      </p>
      <div className="mt-4 space-y-2">
        {memberships.map((membership) => (
          <Button
            key={membership.workspaceId}
            variant="secondary"
            className="w-full justify-between"
            loading={pending === membership.workspaceId}
            onClick={async () => {
              setPending(membership.workspaceId);
              setMessage(null);
              try {
                const response = await fetch("/api/auth/workspace", {
                  method: "POST",
                  headers: { "Content-Type": "application/json" },
                  body: JSON.stringify({ workspaceId: membership.workspaceId }),
                });
                if (!response.ok) {
                  setMessage("Não foi possível selecionar este workspace.");
                  return;
                }
                router.push(next);
                router.refresh();
              } finally {
                setPending(null);
              }
            }}
          >
            <span>{membership.workspaceName}</span>
            <span className="text-xs font-normal text-ink/70">
              {membership.role}
              {membership.moduleEnabled ? "" : " · módulo desligado"}
            </span>
          </Button>
        ))}
      </div>
      {message ? (
        <p role="alert" className="mt-3 text-sm text-danger">
          {message}
        </p>
      ) : null}
    </Card>
  );
}