automaker/apps/app/src/components/views/settings-view/api-keys/authentication-status-display.tsx

import { Label } from "@/components/ui/label";
import {
  CheckCircle2,
  AlertCircle,
  Info,
  Terminal,
  Sparkles,
} from "lucide-react";
import type { ClaudeAuthStatus } from "@/store/setup-store";

interface AuthenticationStatusDisplayProps {
  claudeAuthStatus: ClaudeAuthStatus | null;
  apiKeyStatus: {
    hasAnthropicKey: boolean;
    hasGoogleKey: boolean;
  } | null;
  apiKeys: {
    anthropic: string;
    google: string;
  };
}

export function AuthenticationStatusDisplay({
  claudeAuthStatus,
  apiKeyStatus,
  apiKeys,
}: AuthenticationStatusDisplayProps) {
  return (
    <div className="space-y-4 pt-4 border-t border-border">
      <div className="flex items-center gap-2 mb-3">
        <Info className="w-4 h-4 text-brand-500" />
        <Label className="text-foreground font-semibold">
          Current Authentication Configuration
        </Label>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Claude Authentication Status */}
        <div className="p-3 rounded-lg bg-card border border-border">
          <div className="flex items-center gap-2 mb-1.5">
            <Terminal className="w-4 h-4 text-brand-500" />
            <span className="text-sm font-medium text-foreground">
              Claude (Anthropic)
            </span>
          </div>
          <div className="space-y-1.5 text-xs min-h-12">
            {claudeAuthStatus?.authenticated ? (
              <>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
                  <span className="text-green-400 font-medium">
                    Authenticated
                  </span>
                </div>
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Info className="w-3 h-3 shrink-0" />
                  <span>
                    {claudeAuthStatus.method === "oauth_token"
                      ? "Using stored OAuth token (subscription)"
                      : claudeAuthStatus.method === "api_key_env"
                      ? "Using ANTHROPIC_API_KEY"
                      : claudeAuthStatus.method === "api_key"
                      ? "Using stored API key"
                      : claudeAuthStatus.method === "credentials_file"
                      ? "Using credentials file"
                      : claudeAuthStatus.method === "cli_authenticated"
                      ? "Using Claude CLI authentication"
                      : `Using ${
                          claudeAuthStatus.method || "detected"
                        } authentication`}
                  </span>
                </div>
              </>
            ) : apiKeyStatus?.hasAnthropicKey ? (
              <div className="flex items-center gap-2 text-blue-400">
                <Info className="w-3 h-3 shrink-0" />
                <span>Using environment variable (ANTHROPIC_API_KEY)</span>
              </div>
            ) : apiKeys.anthropic ? (
              <div className="flex items-center gap-2 text-blue-400">
                <Info className="w-3 h-3 shrink-0" />
                <span>Using manual API key from settings</span>
              </div>
            ) : (
              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
                <AlertCircle className="w-3 h-3 shrink-0" />
                <span className="text-xs">Not configured</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}