CedarCopilot/cedar-mail

'use client';

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { AlertTriangle, CheckCircle2, Linkedin, Loader2, Plus, Unplug } from 'lucide-react';
import { useTRPC } from '@/providers/query-provider';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { toast } from 'sonner';

import { useLinkedinConnect } from '@/modules/integrations/use-linkedin-connect';

/**
 * Connect a LinkedIn account via Unipile hosted auth. The user visits the hosted-auth
 * URL in a new tab; Unipile's account-status webhook upserts the seat server-side, so
 * after opening the tab we poll `linkedin.accounts` until a newly connected seat appears.
 * The connect+poll flow lives in `useLinkedinConnect` (shared with the inbox prompt).
 */
export function LinkedInIntegrationCard() {
  const trpc = useTRPC();
  const queryClient = useQueryClient();
  const [disconnectingId, setDisconnectingId] = useState<string | null>(null);

  const { accounts, refetchAccounts, connectedCount, isConnecting, handleConnect } =
    useLinkedinConnect();

  const { mutateAsync: disconnect } = useMutation(trpc.linkedin.disconnect.mutationOptions());

  const handleDisconnect = async (id: string) => {
    try {
      setDisconnectingId(id);
      await disconnect({ id });
      await refetchAccounts();
      void queryClient.invalidateQueries({ queryKey=[redacted] });
    } catch (error) {
      toast.error(
        `Failed to disconnect: ${error instanceof Error ? error.message : String(error)}`,
      );
    } finally {
      setDisconnectingId(null);
    }
  };

  return (
    <div className="space-y-4">
      {connectedCount > 0 && (
        <div className="space-y-2">
          {accounts
            ?.filter((a) => a.status === 'connected')
            .map((account) => (
              <div
                key=[redacted]
                className="bg-popover flex items-center justify-between gap-3 rounded-lg border p-4"
              >
                <div className="flex min-w-0 items-center gap-3">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#0A66C2]/10">
                    <Linkedin className="h-5 w-5 text-[#0A66C2]" />
                  </div>
                  <div className="flex min-w-0 flex-col gap-0.5">
                    <span className="truncate text-sm font-medium">
                      {account.ownerLinkedinUrn ?? account.unipileAccountId}
                    </span>
                    <div className="text-muted-foreground flex items-center gap-2 text-xs">
                      {account.isHealthy ? (
                        <span className="flex items-center gap-1 text-green-600">
                          <CheckCircle2 className="h-3 w-3" /> Healthy
                        </span>
                      ) : (
                        <span className="flex items-center gap-1 text-amber-600">
                          <AlertTriangle className="h-3 w-3" />
                          {account.unhealthyReason ?? 'Needs attention'}
                        </span>
                      )}
                      {account.premiumTier && account.premiumTier !== 'free' && (
                        <span className="capitalize">· {account.premiumTier}</span>
                      )}
                    </div>
                  </div>
                </div>
                <Dialog>
                  <DialogTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-primary shrink-0"
                      disabled={disconnectingId === account.id}
                    >
                      {disconnectingId === account.id ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Unplug className="h-4 w-4" />
                      )}
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Disconnect LinkedIn</DialogTitle>
                      <DialogDescription>
                        Are you sure you want to disconnect this LinkedIn account?
                      </DialogDescription>
                    </DialogHeader>
                    <div className="flex justify-end gap-4">
                      <DialogClose asChild>
                        <Button variant="outline">Cancel</Button>
                      </DialogClose>
                      <DialogClose asChild>
                        <Button onClick={() => handleDisconnect(account.id)}>Disconnect</Button>
                      </DialogClose>
                    </div>
                  </DialogContent>
                </Dialog>
              </div>
            ))}
        </div>
      )}

      <Button
        size="lg"
        className="flex w-full items-center gap-3 border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50"
        onClick={handleConnect}
        disabled={isConnecting}
      >
        {isConnecting ? (
          <>
            <Loader2 className="h-5 w-5 animate-spin" />
            <span>Waiting for LinkedIn…</span>
          </>
        ) : (
          <>
            {connectedCount > 0 ? (
              <Plus className="h-5 w-5" />
            ) : (
              <Linkedin className="h-5 w-5 text-[#0A66C2]" />
            )}
            <span>{connectedCount > 0 ? 'Connect another account' : 'Connect LinkedIn'}</span>
          </>
        )}
      </Button>

      {isConnecting && (
        <p className="text-muted-foreground text-center text-xs">
          Finish signing in on the LinkedIn tab — this updates automatically once connected.
        </p>
      )}
    </div>
  );
}