"use client";

import { Badge } from "@/components/ui/badge";
import type { AuthMethod } from "@/types";
import type { AuthPolicyPreview } from "@/hooks/use-auth-policy-preview";

const METHOD_LABELS: Record<AuthMethod, string> = {
  password: "Password",
  magic_link: "Magic link",
  google: "Google",
  github: "GitHub",
  azure: "Microsoft",
};

interface AuthPolicyNoticeProps {
  preview: AuthPolicyPreview;
}

export function AuthPolicyNotice({ preview }: AuthPolicyNoticeProps) {
  if (preview.matchedOrganizations.length === 0) return null;

  return (
    <div className="rounded-lg border border-border bg-muted/40 px-3 py-3 text-sm text-muted-foreground">
      <p className="font-medium text-foreground">
        Organization access rules detected for {preview.domain}
      </p>
      <p className="mt-1">
        This email matches{" "}
        {preview.matchedOrganizations.map((organization) => organization.name).join(", ")}.
      </p>
      <div className="mt-3 flex flex-wrap gap-2">
        {preview.allowedMethods.map((method) => (
          <Badge key={method} variant="outline">
            {METHOD_LABELS[method]}
          </Badge>
        ))}
      </div>
      {(preview.autoJoinEnabled ||
        preview.matchedOrganizations.some((organization) => organization.enforce_sso)) && (
        <div className="mt-3 space-y-1">
          {preview.autoJoinEnabled ? (
            <p className="text-xs">Domain auto-join is enabled for at least one organization.</p>
          ) : null}
          {preview.matchedOrganizations.some((organization) => organization.enforce_sso) ? (
            <p className="text-xs">SSO enforcement is active for at least one matching organization.</p>
          ) : null}
        </div>
      )}
    </div>
  );
}