import React, { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ProviderIcon } from '../utils/provider';
import { normalizeLinkedInInput } from './linkedin';
import type { ConnectAccountsProps } from './types';
import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Eye, Lock, InfoIcon, EyeClosed, EyeOffIcon } from 'lucide-react';
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { Button, Input, Spinner, Card, CardHeader, CardContent, CardTitle, ConnectProgress } from '../ui';
import Link from 'next/link';
import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';

function byPriority(a: string, b: string) {
  const pr = (id: string) => (id === 'github' ? 0 : id === 'linkedin' ? 1 : 2);
  const da = pr(a.toLowerCase());
  const db = pr(b.toLowerCase());
  return da - db;
}

export function ConnectAccounts(props: ConnectAccountsProps) {
  const {
    providers,
    connected,
    idToken,
    apiGatewayUrl,
    companyId,
    needsReconnectIds,
    sort = true,
    buildOAuthState,
    redirectUriOverrides,
    onConnected,
    onDisconnected,
    onError,
    className,
    oauthClientIds,
    providerPickCallback,
    handleBackButton,
    headerTitle,
    headerDescription,
    requiredProviders,
    companyName,
    initialProviderId, // = process.env.NEXT_PUBLIC_STAGE === 'dev' ? 'githubapp' : undefined,
    githubAppSlugId,
    userId,
    inviteId,
    shouldShowContinueButton,
    shouldDisableContinueButton,
    onContinue,
  } = props;

  const router = useRouter();
  const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
  const [linkUrl, setLinkUrl] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isDisconnecting, setIsDisconnecting] = useState<string | null>(null);
  const [showDataHandling, setShowDataHandling] = useState(false);
  const [previewProviderId, setPreviewProviderId] = useState<string | null>(null);
  const [previewAction, setPreviewAction] = useState<'connect' | 'disconnect' | null>(null);

  const apiBase = apiGatewayUrl || (typeof process !== 'undefined' ? (process.env.NEXT_PUBLIC_API_GATEWAY_URL as string) : '');
  const connectedIds = useMemo(() => {
    const set = new Set((connected || []).map(c => (c.id ? c.id.toLowerCase() : c.name.toLowerCase())));
    // Include virtual provider 'githubapp' when the GitHub App is installed
    try {
      const gh = (connected || []).find(c => (c?.name || '').toLowerCase() === 'github');
      const setupAction = gh?.app_installation_info?.setupAction;
      if (setupAction === 'install' || setupAction === 'created') {
        set.add('githubapp');
      }
    } catch {}
    return set;
  }, [connected]);
  const reconnectIds = useMemo(() => new Set((needsReconnectIds || []).map(id => id.toLowerCase())), [needsReconnectIds]);

  // React to upstream changes to initialProviderId (e.g., after oauth success)
  useEffect(() => {
    if (initialProviderId && initialProviderId !== selectedProviderId) {
      setSelectedProviderIdAndCallback(initialProviderId);
    }
    // Do not clear selection if initialProviderId becomes falsy later
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialProviderId]);

  const list = useMemo(() => {
    const arr = [...providers];
    if (!sort) return arr;
    return arr.sort((a, b) => {
      const pr = byPriority(a.id, b.id);
      if (pr !== 0) return pr;
      return a.name.localeCompare(b.name);
    });
  }, [providers, sort]);

  const getRedirectUri = (providerId: string) => {
    if (redirectUriOverrides && redirectUriOverrides[providerId as keyof typeof redirectUriOverrides]) {
      return redirectUriOverrides[providerId as keyof typeof redirectUriOverrides] as string;
    }
    if (typeof window !== 'undefined') {
      const origin = window.location.origin;
      return `${origin}/api/auth/${providerId}/callback`;
    }
    return '';
  };

  const buildState = () => {
    const baseStateObj: Record<string, string> = {};
    if (companyId) baseStateObj.companyId = companyId;
    const extra = typeof buildOAuthState === 'function' ? buildOAuthState() : undefined;
    if (typeof extra === 'string') return extra;
    const obj = { ...baseStateObj, ...(extra || {}) } as Record<string, string | number | boolean>;
    // default to JSON string for safety across providers
    try { return JSON.stringify(obj); } catch { return ''; }
  };

  const onDisconnect = async (providerId: string) => {
    setIsDisconnecting(providerId);
    try {
      const res = await fetch(`${apiBase}/user/disconnect`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${idToken}`,
        },
        body: JSON.stringify({ provider: providerId, companyId })
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data?.error || `Failed to disconnect ${providerId}.`);
      if (onDisconnected) onDisconnected(providerId);
    } catch (e) {
      const err = e as Error;
      if (onError) onError(err.message || 'Failed to disconnect');
    } finally {
      setIsDisconnecting(null);
    }
  };

  const setSelectedProviderIdAndCallback = (providerId: string | null) => {
    setSelectedProviderId(providerId);
    providerPickCallback(providerId);
  };

  const onSubmitLink = async (providerId: string) => {
    const provider = providers.find(p => p.id.toLowerCase() === providerId.toLowerCase());
    if (!provider || !provider.endpoint) return;
    if (!linkUrl) return onError && onError(`Please enter your ${provider.name} profile URL.`);
    try {
      setIsSubmitting(true);
      const urlToSend = provider.id.toLowerCase() === 'linkedin' ? normalizeLinkedInInput(linkUrl) : linkUrl;
      const res = await fetch(`${apiBase}${provider.endpoint}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${idToken}`,
        },
        body: JSON.stringify(companyId ? { profileUrl: urlToSend, companyId } : { profileUrl: urlToSend })
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data?.error || `Failed to sync ${provider.name} profile.`);
      setSelectedProviderIdAndCallback(null);

      setLinkUrl('');
      if (onConnected) onConnected(providerId);
    } catch (e) {
      const err = e as Error;
      if (onError) onError(err.message || 'Failed to connect');
    } finally {
      setIsSubmitting(false);
    }
  };

  const onOAuth = (providerId: string) => {
    const id = providerId.toLowerCase();
    const redirectUri = getRedirectUri(id);
    const state = buildState();
    // Lazy import builder to avoid circular deps
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const { buildOAuthUrl } = require('./oauth');
    const url = buildOAuthUrl({ providerId: id, redirectUri, state, clientIds: oauthClientIds });
    if (url) router.push(url);
  };

  const onGithubAppInstall = () => {
    const opaqueState = window.crypto?.randomUUID?.() || Math.random().toString(36).substring(2);
    const stateObj = { opaqueState, userId, companyId, inviteId };
    const stateString = encodeURIComponent(JSON.stringify(stateObj));
    const redirectUrl = `https://github.com/apps/${githubAppSlugId}/installations/new?state=${stateString}`;
    window.location.href = redirectUrl;
  };

  const selectedProvider = useMemo(() => {
    if (!selectedProviderId) return null;
    if (selectedProviderId.toLowerCase() === 'githubapp') {
      // Special virtual provider for github app, not in providers list
      return {
        id: 'githubapp',
        name: 'GitHub App',
        connectionType: 'githubapp',
        iconColor: 'text-gray-900',
        placeholder: 'Install the GitHub App to connect your repositories.',
      };
    }
    return providers.find(
      (p) => p.id.toLowerCase() === selectedProviderId.toLowerCase()
    ) || null;
  }, [selectedProviderId, providers]);

  const setPreview = (providerId: string, action: 'connect' | 'disconnect') => {
    setPreviewProviderId(providerId.toLowerCase());
    setPreviewAction(action);
  };
  const clearPreview = () => {
    setPreviewProviderId(null);
    setPreviewAction(null);
  };

  const handleConnectBack = () => {
    setSelectedProviderIdAndCallback(null);
    setLinkUrl('');
    setShowDataHandling(false);
    setPreviewProviderId(null);
    setPreviewAction(null);
  };

  const cardVariants = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -20 },
  };
  const shouldReduceMotion = useReducedMotion();
  const ease = [0.22, 1, 0.36, 1] as const;
  const fadeOnly = {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
  };
  const fadeIn = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 8 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease } },
    exit: { opacity: 0, y: shouldReduceMotion ? 0 : -4, transition: { duration: 0.2, ease } }
  };
  
  // GitHub status helpers
  const githubConnectedAccount = useMemo(() => {
    return (connected || []).find(c => (c?.name || '').toLowerCase() === 'github');
  }, [connected]);
  const isGithubConnected = !!githubConnectedAccount;
  const isGithubAppInstalled = useMemo(() => {
    const setupAction = githubConnectedAccount?.app_installation_info?.setupAction;
    return setupAction === 'install' || setupAction === 'created';
  }, [githubConnectedAccount]);
  
  // Progress UI is outsourced to ConnectProgress

  return (
    <div className="w-full grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_380px] lg:justify-center gap-6 items-start max-w-7xl">
      <div className="w-full flex justify-end">
        <div className="w-full max-w-lg">
          {/* Mobile: show progress above accounts, left-aligned */}
          <div className="lg:hidden mb-4">
            <ConnectProgress
              layout="inline"
              providers={providers}
              connectedIds={connectedIds}
              previewProviderId={previewProviderId}
              previewAction={previewAction}
              selectedProviderId={selectedProvider?.id || null}
            />
          </div>
          {showDataHandling ? (
            <motion.div
              key="data-handling-card"
              className="rounded-xl border max-w-xl w-full"
              initial="initial" animate="animate" exit="exit" variants={fadeOnly}
              style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
            >
              <div className="sm:p-6 p-4">
                <button onClick={() => setShowDataHandling(false)} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
                  <ArrowLeft className="w-4 h-4" />
                  Back
                </button>
                <div className="text-center">
                  <div className="flex justify-center mb-4">
                    <InfoIcon className="w-10 h-10 text-[var(--text-main)]" />
                  </div>
                  <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>How your data is handled</h3>
                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-2 leading-relaxed">
                    We understand that giving access to your private repositories can be a bit scary. So here's the deal: We install the KYD GitHub App in your account. The app has 
                    <span className="mx-1"><Link href="https://docs.github.com/en/rest/authentication/permissions-required-for-github-apps?apiVersion=2022-11-28#repository-permissions-for-contents" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>Contents <ExternalLink className="size-3 inline-block" /></Link></span>
                    read access - only to the repositories you select. Then, once you request a badge assessment, we read the repositories and analyze the code, then its deleted, forever. Your code is not accessible to anyone, not even us. 
                  </p>
                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto max-w-md mt-3 leading-relaxed">
                    For other details, see our{' '}
                    <Link href="https://www.knowyourdeveloper.ai/privacy-policy" target="_blank" rel="noopener noreferrer" className="underline" style={{ color: 'var(--icon-accent)'}}>
                      Privacy Policy <ExternalLink className="size-3 inline-block ml-1" />
                    </Link>.
                  </p>
                </div>
              </div>
            </motion.div>
          ) : selectedProvider && selectedProvider.id !== 'githubapp' ? (
            <motion.div
              key="connect-card"
              initial="initial" animate="animate" exit="exit" variants={fadeOnly}
              className="rounded-xl border max-w-xl w-full"
              style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}
            >
              <div className="sm:p-6 p-4">
                <button onClick={handleConnectBack} className="flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors mb-4">
                  <ArrowLeft className="w-4 h-4" />
                  Back
                </button>
                <div className="text-center">
                  <div className="flex justify-center mb-4">
                    <ProviderIcon name={selectedProvider.id} className={`w-10 h-10 ${selectedProvider.iconColor || 'text-gray-500'}`} />
                  </div>
                  <h3 className="sm:text-lg text-base font-semibold" style={{ color: 'var(--text-main)'}}>
                    {selectedProvider.connectionType === 'url' || (selectedProvider.connectionType || 'url') === 'link'
                      ? `Use Public ${selectedProvider.name} Profile`
                      : `Connect ${selectedProvider.name}`}
                  </h3>
                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] mx-auto">
                    {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link')
                      ? (selectedProvider.placeholder || 'Enter your public profile URL.')
                      : `Authorize with ${selectedProvider.name} to connect your account.`}
                  </p>
                </div>

                {(selectedProvider.connectionType === 'url' || selectedProvider.connectionType === 'link') ? (
                  <motion.form
                    onSubmit={(e) => { e.preventDefault(); onSubmitLink(selectedProvider.id); }}
                    className="mt-6 space-y-4"
                    initial="initial" animate="animate" exit="exit" variants={cardVariants}
                  >
                    {selectedProvider.id === 'linkedin' && (
                      <>
                        <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
                          <Link
                            href="https://www.linkedin.com/public-profile/settings"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="underline"
                            style={{ color: 'var(--icon-accent)' }}
                          >
                            LinkedIn <ExternalLink className="size-3 inline-block ml-1 underline-0" />
                          </Link>
                          . This opens your public profile settings (you’ll see your shareable URL if you’re signed in).
                        </p>
                        <p className="sm:text-xs items-center text-[10px] text-[var(--text-secondary)] leading-relaxed max-w-xs mx-auto -mt-2">
                          LinkedIn data is not used to contribute to your score.
                        </p>
                      </>

                    )}
                    <div className="relative">
                      <LinkIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" />
                      <Input
                        type="url"
                        value={linkUrl}
                        onChange={(e) => setLinkUrl(e.target.value)}
                        placeholder={selectedProvider.placeholder || 'https://example.com/your-profile'}
                        required
                        className="w-full border bg-transparent p-2 pl-9"
                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
                        onPaste={selectedProvider.id === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
                        onBlur={selectedProvider.id === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
                      />
                    </div>
                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                      <Button type="submit" className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors" disabled={isSubmitting}>
                        {isSubmitting ? (
                          <div className="flex items-center justify-center">
                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                            Connecting...
                          </div>
                        ) : (
                          'Connect'
                        )}
                      </Button>
                    </motion.div>
                  </motion.form>
                ) : (
                  <div className="mt-6">
                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                      <Button onClick={() => onOAuth(selectedProvider.id)} className="w-full bg-[var(--icon-accent)] text-white hover:bg-[var(--icon-accent-hover)] transition-colors">
                        <ExternalLink className="w-4 h-4 mr-2" />
                        Connect with {selectedProvider.name}
                      </Button>
                    </motion.div>
                  </div>
                )}
              </div>
            </motion.div>
          ) : selectedProvider && selectedProvider.id === 'githubapp' ? (
              <div
                key="github-card"
                className="rounded-xl border max-w-xl w-full"
                style={{
                  backgroundColor: 'var(--content-card-background)',
                  borderColor: 'var(--icon-button-secondary)',
                }}
              >
                <motion.div className="p-6 flex flex-col items-center" initial="initial" animate="animate" exit="exit" variants={fadeOnly}>
                  <div className="w-full flex items-center gap-3 mb-2 justify-center">
                    <ProviderIcon name="github" className="w-8 h-8 inline-block" />
                    <span className="sm:text-xl text-base font-semibold text-[var(--text-main)]">Connect Private GitHub Repositories</span>
                  </div>
                  <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed mt-1 mb-6 text-center max-w-md">
                    You&apos;ve successfully linked your GitHub account! 
                    <br />
                    To complete your profile, you can optionally allow access to your <b>private repositories</b>. This is useful if you&apos;d like to highlight private work or share additional contributions for verification.
                    <br /><br />
                    <span className="text-[var(--text-main)] font-medium">
                      Would you like to connect your private repositories?
                    </span>
                    <button
                      type="button"
                      onClick={() => setShowDataHandling(true)}
                      className="sm:text-sm text-xs underline text-[var(--icon-accent)] hover:text-[var(--icon-accent-hover)]"
                    >
                      How KYD Handles Your Data
                    </button>
                  </p>
                  <div className="flex flex-col sm:flex-row w-full gap-3 mt-2 justify-center items-center">
                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                      <Button
                        className="w-full sm:w-auto text-[var(--text-main)] transition-colors border border-[var(--icon-button-secondary)]"
                        variant="destructive"
                        onClick={() => {
                          handleConnectBack();
                        }}
                      >
                        No, don&#39;t connect
                      </Button>
                    </motion.div>
                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              className="w-full sm:w-auto bg-[var(--icon-accent)] text-white transition-colors font-semibold"
                              onClick={onGithubAppInstall}
                            >
                              <span className="flex items-center justify-center">
                                <ExternalLink className="w-4 h-4 mr-2" />
                                Yes, connect my private repos
                              </span>
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>Connect your private repositories</p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    </motion.div>
                  </div>
                </motion.div>
              </div>
          ) : (
            <Card className="border-[var(--icon-button-secondary)] pt-2" style={{ backgroundColor: 'var(--content-card-background)'}}>
              <AnimatePresence mode="wait">
                <motion.div key="platform-list-shared" variants={cardVariants} initial="initial" animate="animate" exit="exit" transition={{ duration: 0.3 }}>
                  <CardHeader className="pb-4">
                    {handleBackButton && (
                      <button onClick={() => handleBackButton()} className="flex items-center gap-2 text-sm mb-4 text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors">
                        <ArrowLeft className="w-4 h-4" /> Back
                      </button>
                    )}
                    <CardTitle className="sm:text-xl text-base font-semibold text-[var(--text-main)] mb-2">{headerTitle}</CardTitle>
                    <p className="sm:text-sm text-xs text-[var(--text-secondary)] leading-relaxed">{headerDescription}</p>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    {(() => {
                      const oauthList = list.filter(p => p.connectionType === 'oauth');
                      const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');

                      const Row = (provider: typeof list[number]) => {
                        const providerId = provider.id;
                        const isRequired = requiredProviders?.includes(providerId);
                        const isConnected = connectedIds.has(providerId.toLowerCase());
                        const needsReconnect = reconnectIds.has(providerId.toLowerCase());
                        const isOauth = provider.connectionType === 'oauth'
                        const connectedUrl = connected.find(c => c.name.toLowerCase() === providerId.toLowerCase())?.url;
                        const betaFlag = () => (
                          <span
                            className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
                            style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
                          >
                            Beta
                          </span>
                        );

                        const requiredFlag = () => (
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger>
                                <div className="flex items-center justify-center size-4 sm:size-5 rounded-full bg-[var(--icon-accent)] cursor-help">
                                  <span className="text-white text-xs font-bold -translate-y-px select-none">!</span>
                                </div>
                              </TooltipTrigger>
                              <TooltipContent>
                                <p>Required by <span className="font-semibold">{companyName || 'your recruiter'}</span></p>
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        );

                        return (
                          <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10 transform transition-transform hover:-translate-y-px">
                            <div className="flex items-center gap-3">

                              {isConnected && connectedUrl ? (
                                <Link href={connectedUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:underline">
                                  <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
                                  <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
                                  {isRequired && !isConnected ? (requiredFlag()) : null}
                                </Link>
                              ) : (
                                <div className="flex items-center gap-3">
                                  <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
                                  <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
                                  {isRequired && !isConnected ? (requiredFlag()) : null}
                                </div>
                              )}
                              {provider.beta ? betaFlag() : null}
                            </div>

                            {providerId.toLowerCase() === 'github' ? (
                              <div className="flex items-center gap-2">
                                {/* Public (OAuth) */}
                                {isGithubConnected ? (
                                  <div className="relative flex items-center">
                                    <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
                                      <CheckCircle className="size-3 sm:size-4" />
                                      <span className="text-sm font-medium">Connected</span>
                                    </div>
                                    <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
                                      <button
                                        onClick={() => onDisconnect('github')}
                                        onMouseEnter={() => setPreview('github', 'disconnect')}
                                        onMouseLeave={clearPreview}
                                        className="inline-flex items-center gap-1.5 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
                                        disabled={isDisconnecting === 'github'}
                                      >
                                        {isDisconnecting === 'github' ? <Spinner /> : <Unlink className="size-3 sm:size-4" />}
                                        <span>Disconnect</span>
                                      </button>
                                    </div>
                                  </div>
                                ) : (
                                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                                    <TooltipProvider>
                                      <Tooltip>
                                        <TooltipTrigger asChild>
                                          <Button
                                            onClick={() => setSelectedProviderIdAndCallback('github')}
                                            onMouseEnter={() => setPreview('github', 'connect')}
                                            onMouseLeave={clearPreview}
                                            className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
                                          >
                                            <Eye className="size-3 sm:size-4" />
                                            <span className="sm:text-base text-sm">Connect</span>
                                          </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>
                                          <p>Connect your public repositories</p>
                                        </TooltipContent>
                                      </Tooltip>
                                    </TooltipProvider>
                                  </motion.div>
                                )}

                                {/* Private (GitHub App) */}
                                {isGithubAppInstalled ? (
                                  <div className="relative flex items-center">
                                    <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
                                      <CheckCircle className="size-3 sm:size-4" />
                                      <span className="text-sm font-medium">Connected</span>
                                    </div>
                                    <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
                                      <button
                                        onClick={() => { window.location.href = 'https://github.com/settings/installations'; }}
                                        onMouseEnter={() => setPreview('githubapp', 'disconnect')}
                                        onMouseLeave={clearPreview}
                                        className="inline-flex items-center gap-1.5 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
                                      >
                                        <Unlink className="size-3 sm:size-4" />
                                        <span>Uninstall</span>
                                      </button>
                                    </div>
                                  </div>
                                ) : (
                                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                                    <TooltipProvider>
                                      <Tooltip>
                                        <TooltipTrigger asChild>
                                          <Button
                                            onClick={() => setSelectedProviderIdAndCallback('githubapp')}
                                            onMouseEnter={() => setPreview('githubapp', 'connect')}
                                            onMouseLeave={clearPreview}
                                            className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
                                          >
                                            <EyeOffIcon className="size-3 sm:size-4" />
                                            <span className="sm:text-base text-sm">Connect</span>
                                          </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>
                                          <p>Connect your private repositories</p>
                                        </TooltipContent>
                                      </Tooltip>
                                    </TooltipProvider>
                                  </motion.div>
                                )}
                              </div>
                            ) : isConnected && isDisconnecting !== providerId ? (
                              <div className="relative flex items-center">
                                <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
                                  <CheckCircle className="size-3 sm:size-4" />
                                  <span className="text-sm font-medium">Connected</span>
                                </div>
                                <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
                                  <button
                                    onClick={() => onDisconnect(providerId)}
                                    onMouseEnter={() => setPreview(providerId, 'disconnect')}
                                    onMouseLeave={clearPreview}
                                    className="inline-flex items-center gap-1.5 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
                                  >
                                    <Unlink className="size-3 sm:size-4" />
                                    <span>Disconnect</span>
                                  </button>
                                </div>
                              </div>
                            ) : isDisconnecting === providerId ? (
                              <div className="relative flex items-center">
                                <Spinner />
                              </div>
                            ) : (
                              <div className="flex items-center gap-2">
                                <>
                                  <Button
                                    onClick={() => setSelectedProviderIdAndCallback(providerId)}
                                    onMouseEnter={() => setPreview(providerId, 'connect')}
                                    onMouseLeave={clearPreview}
                                    className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
                                  >
                                    {isOauth ? (
                                      <Link2 className="size-3 sm:size-4" />
                                    ) : (
                                      <LinkIcon className="size-3 sm:size-4" />
                                    )}
                                    <span className="sm:text-base text-sm">Connect</span>
                                  </Button>
                                  {needsReconnect && !isRequired && (
                                    <Button
                                      onClick={() => onDisconnect(providerId)}
                                      onMouseEnter={() => setPreview(providerId, 'disconnect')}
                                      onMouseLeave={clearPreview}
                                      className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
                                      style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
                                      variant="destructive"
                                    >
                                      <Unlink className="size-3 sm:size-4" />
                                      <span>Remove</span>
                                    </Button>
                                  )}
                                </>
                              </div>
                            )}
                          </div>
                        );
                      };

                      return (
                        <>
                          {oauthList.length ? (
                            <>
                              <div className="flex items-center my-2">
                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
                                <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>OAuth</span>
                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
                              </div>
                              {oauthList.map(p => Row(p))}
                            </>
                          ) : null}

                          {urlList.length ? (
                            <>
                              <div className="flex items-center my-2">
                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
                                <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>Public Urls</span>
                                <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
                              </div>
                              {urlList.map(p => Row(p))}
                            </>
                          ) : null}
                        </>
                      );
                    })()}
                  </CardContent>
                </motion.div>
              </AnimatePresence>
            </Card>
          )}
          {shouldShowContinueButton && (
            <motion.div className="mt-6 w-full" initial="hidden" animate="visible" variants={fadeIn}>
              <motion.div whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }}>
                <Button
                  onClick={onContinue}
                  disabled={shouldDisableContinueButton}
                  className="w-full text-white font-medium py-2.5 bg-[var(--icon-accent)] disabled:opacity-50"
                >
                  Continue
                </Button>
              </motion.div>
            </motion.div>
          )}
          </div>
        </div>

        {/* Desktop: progress card to the right, sticky while scrolling */}
        <div className="hidden lg:block lg:sticky lg:top-6">
          <ConnectProgress
            layout="inline"
            providers={providers}
            connectedIds={connectedIds}
            previewProviderId={previewProviderId}
            previewAction={previewAction}
            selectedProviderId={selectedProvider?.id || null}
          />
        </div>
      </div>
  );
}

export default ConnectAccounts;