kandev/apps/web/components/github/github-status.tsx

"use client";

import { IconCheck, IconX, IconRefresh } from "@tabler/icons-react";
import { Badge } from "@kandev/ui/badge";
import { Button } from "@kandev/ui/button";
import { Spinner } from "@kandev/ui/spinner";
import { useGitHubStatus } from "@/hooks/domains/github/use-github-status";
import type { AuthDiagnostics } from "@/lib/types/github";

function DiagnosticsOutput({ diagnostics }: { diagnostics: AuthDiagnostics }) {
  return (
    <div className="mt-3 space-y-2">
      <div className="flex items-center gap-2 text-xs text-muted-foreground">
        <code className="bg-muted px-1.5 py-0.5 rounded">{diagnostics.command}</code>
        <Badge
          variant={diagnostics.exit_code === 0 ? "secondary" : "destructive"}
          className="text-xs"
        >
          exit code: {diagnostics.exit_code}
        </Badge>
      </div>
      {diagnostics.exit_code !== 0 && (
        <p className="text-xs text-muted-foreground">
          A non-zero exit code means the command failed. Review the output below for details.
        </p>
      )}
      <pre className="text-xs bg-muted/50 border rounded-md p-3 overflow-x-auto whitespace-pre-wrap max-h-48">
        {diagnostics.output.trim()}
      </pre>
    </div>
  );
}

export function GitHubStatusCard() {
  const { status, loaded, loading, refresh } = useGitHubStatus();

  if (loading || !loaded) {
    return (
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Spinner className="h-4 w-4" />
        Checking GitHub connection...
      </div>
    );
  }

  if (!status || !status.authenticated) {
    return (
      <div className="space-y-3">
        <div className="flex items-center gap-2">
          <IconX className="h-4 w-4 text-red-500" />
          <span className="text-sm font-medium">Not connected to GitHub</span>
          <Button variant="ghost" size="sm" onClick={refresh} className="cursor-pointer h-6 px-2">
            <IconRefresh className="h-3.5 w-3.5" />
            Refresh
          </Button>
        </div>
        <div className="text-xs text-muted-foreground space-y-1.5">
          <p>Connect using one of these methods:</p>
          <ol className="list-decimal list-inside space-y-1 pl-1">
            <li>
              <strong>Environment variable</strong> — set{" "}
              <code className="bg-muted px-1 rounded">GITHUB_TOKEN</code> or{" "}
              <code className="bg-muted px-1 rounded">GH_TOKEN</code> when starting Kandev
            </li>
            <li>
              <strong>Kandev secret</strong> — add a secret named{" "}
              <code className="bg-muted px-1 rounded">GITHUB_TOKEN</code> in{" "}
              <a href="/settings/general/secrets" className="underline cursor-pointer">
                Settings &gt; Secrets
              </a>
              , then click Refresh above
            </li>
            <li>
              <strong>GitHub CLI</strong> — install{" "}
              <code className="bg-muted px-1 rounded">gh</code> and run{" "}
              <code className="bg-muted px-1 rounded">gh auth login</code>
            </li>
          </ol>
        </div>
        {status?.diagnostics && <DiagnosticsOutput diagnostics={status.diagnostics} />}
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2">
      <IconCheck className="h-4 w-4 text-green-500" />
      <span className="text-sm">
        Connected as <strong>{status.username}</strong>
      </span>
      <Badge variant="secondary" className="text-xs">
        {status.auth_method === "gh_cli" ? "gh CLI" : "PAT"}
      </Badge>
    </div>
  );
}