import { useQueryClient } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { ACCOUNT_NOTICES_KEY } from "~/components/AccountNotices";
import { revokeToken } from "~/fns/account";
import { listTokenGrants } from "~/fns/tokens";
import { useAction } from "~/hooks/use-action";
import { FineGrainedTokenForm } from "~/components/settings/FineGrainedTokenForm";
import { Button } from "~/ui/Button";
import { CodeBlock } from "~/ui/CodeBlock";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { SecretReveal } from "~/ui/Callout";

export const Route = createFileRoute("/settings/tokens")({
  loader: () => listTokenGrants(),
  component: TokensPage,
});

function GitUsage({ token }: { token: string | null }) {
  const host = typeof window === "undefined" ? "gitfor.dev" : window.location.host;
  const secret = token ?? "gitfor_pat_...";
  const source = `# Option A: have git prompt once and remember the token for ${host}
git config --global credential.helper store
git clone https://${host}/<owner>/<repo>.git
# Username: any value   Password: ${secret}

# Option B: rewrite every ${host} URL to carry the token
git config --global url."https://x:${secret}@${host}/".insteadOf "https://${host}/"

# REST API
curl -H "Authorization: Bearer ${secret}" https://${host}/api/user`;
  return (
    <div className="space-y-3 p-4 text-sm text-kumo-subtle">
      <p>
        Over HTTPS, git sends the token as the password; the username is ignored. Both options below store the token in
        plain text in your home directory, so keep the scope as narrow as possible.
      </p>
      <CodeBlock title="terminal" language="bash" source={source} />
    </div>
  );
}

function TokensPage() {
  const tokens = Route.useLoaderData();
  const revoke = useAction(revokeToken);
  const [created, setCreated] = useState<string | null>(null);
  const queryClient = useQueryClient();
  const onCreated = (token: string) => {
    setCreated(token);
    void queryClient.invalidateQueries({ queryKey: [ACCOUNT_NOTICES_KEY] });
  };

  return (
    <div className="space-y-6">
      {created && <SecretReveal value={created} />}
      {created && (
        <Panel title="Use it from the command line">
          <GitUsage token={created} />
        </Panel>
      )}
      <Panel title="New personal access token">
        <FineGrainedTokenForm onCreated={onCreated} />
      </Panel>
      <Panel title="Tokens">
        {tokens.length === 0 ? (
          <EmptyState title="No tokens yet" icon="key" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {tokens.map((token) => (
              <li key={token.id} className="flex items-start gap-3 px-4 py-3 text-sm">
                <div className="min-w-0 flex-1 space-y-1">
                  <div className="font-medium text-kumo-strong">{token.name}</div>
                  <div className="font-mono text-xs text-kumo-subtle">{token.prefix}…</div>
                  <div className="text-xs text-kumo-subtle">
                    {token.allRepos ? "All repositories" : token.repos.join(", ") || "No repositories"} ·{" "}
                    {Object.entries(token.permissions)
                      .map(([area, access]) => `${area}: ${access}`)
                      .join(", ") || "no permissions"}
                  </div>
                </div>
                <div className="text-right text-xs text-kumo-subtle">
                  {token.lastUsedAt ? (
                    <>
                      Used <RelativeTime timestamp={token.lastUsedAt} />
                    </>
                  ) : (
                    "Never used"
                  )}
                  <div>
                    {token.expiresAt ? <>Expires {new Date(token.expiresAt).toLocaleDateString()}</> : "No expiry"}
                  </div>
                </div>
                <Button variant="danger" size="sm" onClick={() => revoke.run({ data: { id: token.id } })}>
                  Revoke
                </Button>
              </li>
            ))}
          </ul>
        )}
      </Panel>
      {!created && (
        <Panel title="Using a token from the command line">
          <GitUsage token={null} />
        </Panel>
      )}
    </div>
  );
}