import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Github, Unlink } from "lucide-react";
import { useState } from "react";

import { BackLink } from "@/client/components/ui/back-link";
import { Button } from "@/client/components/ui/button";
import { Card } from "@/client/components/ui/card";
import { ConfirmButton } from "@/client/components/ui/confirm-button";
import { GoogleIcon } from "@/client/components/ui/google-icon";
import { PageError } from "@/client/components/ui/page-error";
import { PageHeader } from "@/client/components/ui/page-header";
import { PanelRow } from "@/client/components/ui/row";
import { Skeleton } from "@/client/components/ui/skeleton";
import { useRequireSession } from "@/client/hooks/use-auth-guard";
import { authClient } from "@/client/lib/auth-client";
import { type SocialProvider, useClientConfig } from "@/client/lib/config";
import { formatDate } from "@/client/lib/format";
import { queryKeys } from "@/client/lib/query";

interface LinkedAccount {
  id: string;
  providerId: string;
  accountId: string;
  createdAt: string | Date;
}

const PROVIDER_LABEL: Record<string, string> = {
  credential: "Email + password",
  github: "GitHub",
  google: "Google",
};

const IdentityRowsSkeleton = ({ count }: { count: number }) => (
  <div className="flex flex-col gap-3" aria-busy="true">
    {Array.from({ length: count }, (_, i) => (
      <div
        key={i}
        className="flex items-center justify-between rounded-xl border border-zinc-800/60 bg-zinc-900/40 px-4 py-3"
      >
        <div className="space-y-2">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-40" />
        </div>
        <Skeleton className="h-9 w-20 rounded-lg" />
      </div>
    ))}
  </div>
);

const AccountIdentitiesPageSkeleton = () => (
  <div className="mx-auto max-w-3xl" aria-busy="true">
    <Skeleton className="mb-6 h-4 w-24" />
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-36" />
      <Skeleton className="h-4 w-full max-w-lg" />
    </div>
    <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-5 sm:p-6">
      <div className="mb-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
        <Skeleton className="h-5 w-40" />
      </div>
      <IdentityRowsSkeleton count={3} />
    </div>
  </div>
);

export const AccountIdentitiesPage = () => {
  const session = useRequireSession("/account/identities");
  const queryClient = useQueryClient();
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState<string | null>(null);
  const config = useClientConfig();
  const socialProviders: SocialProvider[] = config?.status === "ok" ? config.socialProviders : [];

  const userId = session.data?.user.id ?? null;
  const accountsQueryKey = queryKeys.accountIdentities(userId);
  const accountsQuery = useQuery({
    queryKey: accountsQueryKey,
    queryFn: async () => {
      const res = await authClient.listAccounts();
      if (res.error) throw new Error(res.error.message ?? "Could not load identities.");
      return (res.data ?? []) as unknown as LinkedAccount[];
    },
    enabled: Boolean(userId),
  });
  const accounts = accountsQuery.data ?? null;

  const credentialCount = accounts?.filter((a) => a.providerId === "credential").length ?? 0;
  const totalAccounts = accounts?.length ?? 0;
  const linked = (provider: string) => Boolean(accounts?.find((a) => a.providerId === provider));

  const handleLink = async (provider: "github" | "google") => {
    setError(null);
    setPending(provider);
    try {
      const res = await authClient.linkSocial({ provider, callbackURL: "/account/identities" });
      if (res.error) {
        setError(
          res.error.message ??
            `Could not link ${provider}. The provider may not be configured on this server — ask your operator.`,
        );
        setPending(null);
        return;
      }
      if (res.data?.url) {
        window.location.assign(res.data.url);
        return;
      }
      setError(`Could not link ${provider}: no redirect URL returned.`);
      setPending(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : `Failed to link ${provider}.`);
      setPending(null);
    }
  };

  const handleUnlink = async (account: LinkedAccount) => {
    setError(null);
    if (account.providerId === "credential" && credentialCount <= 1 && (accounts?.length ?? 0) <= 1) {
      setError("Cannot unlink your only credential.");
      return;
    }
    setPending(account.id);
    try {
      const res = await authClient.unlinkAccount({
        accountId: account.id,
      });
      if (res.error) {
        setError(res.error.message ?? `Could not unlink ${account.providerId}.`);
        return;
      }
      await queryClient.invalidateQueries({ queryKey: accountsQueryKey, exact: true });
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to unlink account.");
    } finally {
      setPending(null);
    }
  };

  if (session.isPending || !session.data) {
    return <AccountIdentitiesPageSkeleton />;
  }

  return (
    <div className="mx-auto max-w-3xl">
      <BackLink to="/account">Account</BackLink>
      <PageHeader
        title="Identities"
        description="The credentials you can use to sign in. Link a social provider to skip the password next time."
      />
      <PageError message={error} onDismiss={() => setError(null)} />
      <Card>
        <div className="mb-4 flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
          <h2 className="text-lg font-semibold text-zinc-100">Linked identities</h2>
          {accounts ? (
            <div className="flex flex-wrap gap-2">
              {socialProviders.includes("github") && !linked("github") ? (
                <Button variant="ghost" size="sm" loading={pending === "github"} onClick={() => handleLink("github")}>
                  <Github className="h-4 w-4" aria-hidden="true" />
                  Link GitHub
                </Button>
              ) : null}
              {socialProviders.includes("google") && !linked("google") ? (
                <Button variant="ghost" size="sm" loading={pending === "google"} onClick={() => handleLink("google")}>
                  <GoogleIcon className="h-4 w-4" />
                  Link Google
                </Button>
              ) : null}
            </div>
          ) : null}
        </div>
        {accounts === null ? (
          <IdentityRowsSkeleton count={3} />
        ) : (
          <div className="flex flex-col gap-3">
            {accounts.map((account) => {
              // Block the unlink that would leave the user with zero ways
              // to sign in. That's the credential row when it's the only
              // credential and there are no socials, OR any social row
              // when it's the only account on the user.
              const isLastCredential = account.providerId === "credential" && credentialCount <= 1;
              const isLastAccount = totalAccounts <= 1;
              const canUnlink = !isLastCredential && !isLastAccount;
              return (
                <PanelRow key={account.id} className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-zinc-100">
                      {PROVIDER_LABEL[account.providerId] ?? account.providerId}
                    </p>
                    <p className="text-xs text-zinc-500">Linked {formatDate(account.createdAt)}</p>
                  </div>
                  {canUnlink ? (
                    <ConfirmButton
                      variant="ghost"
                      size="sm"
                      loading={pending === account.id}
                      onConfirm={() => handleUnlink(account)}
                    >
                      <Unlink className="h-4 w-4" aria-hidden="true" />
                      Unlink
                    </ConfirmButton>
                  ) : (
                    <span className="text-xs italic text-zinc-500">Last sign-in method.</span>
                  )}
                </PanelRow>
              );
            })}
          </div>
        )}
      </Card>
    </div>
  );
};