my-fullstack-ai-platform/app/dashboard/settings/account/page.tsx

import { createClient } from "@/lib/supabase/server";
import { Suspense } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { CheckCircle2, XCircle, Linkedin } from "lucide-react";
import { ConnectLinkedInButton } from "@/components/connect-linkedin-button";
import { DisconnectLinkedInButton } from "@/components/disconnect-linkedin-button";

async function AccountSettingsContent() {
  const supabase = await createClient();
  const { data: userData } = await supabase.auth.getUser();
  const userId = userData?.user?.id;

  if (!userId) return null;

  const { data: profile } = await supabase
    .from("profiles")
    .select("unipile_account_id, unipile_account_status")
    .eq("id", userId)
    .single();

  const isConnected = !!profile?.unipile_account_id;
  const accountId = profile?.unipile_account_id as string | null;
  const status = profile?.unipile_account_status as string | null;

  return (
    <div className="p-8 max-w-2xl mx-auto space-y-8">
      <div>
        <h1 className="text-2xl font-semibold mb-1 text-foreground">Account Settings</h1>
        <p className="text-sm text-muted-foreground">
          Manage your personal account and integrations.
        </p>
      </div>

      {/* LinkedIn Integration */}
      <div className="space-y-4">
        <h2 className="text-lg font-medium text-foreground border-b border-border pb-2 flex items-center gap-2">
          <Linkedin className="h-5 w-5 text-[#0077B5]" />
          LinkedIn Integration
        </h2>

        <div className="bg-card border border-border rounded-lg p-6 shadow-sm space-y-4">
          <div className="flex items-start justify-between gap-4">
            <div className="space-y-1">
              <p className="text-sm font-medium text-foreground">
                LinkedIn Account
              </p>
              <p className="text-xs text-muted-foreground">
                Connect your LinkedIn profile to enable automated outreach campaigns.
              </p>
            </div>

            {isConnected ? (
              <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-500 bg-emerald-500/10 px-2.5 py-1 rounded-full shrink-0">
                <CheckCircle2 className="h-3.5 w-3.5" />
                Connected
              </span>
            ) : (
              <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground bg-muted px-2.5 py-1 rounded-full shrink-0">
                <XCircle className="h-3.5 w-3.5" />
                Not connected
              </span>
            )}
          </div>

          {isConnected && (
            <div className="bg-muted/50 rounded-md p-3 text-xs font-mono text-muted-foreground break-all">
              <span className="text-foreground/60 mr-2">Account ID:</span>
              {accountId}
              {status && status !== "CONNECTED" && (
                <span className="ml-2 text-amber-500">({status})</span>
              )}
            </div>
          )}

          <div className="pt-2">
            {isConnected ? (
              <DisconnectLinkedInButton />
            ) : (
              <ConnectLinkedInButton />
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function AccountSettingsSkeleton() {
  return (
    <div className="p-8 max-w-2xl mx-auto space-y-8">
      <div>
        <Skeleton className="h-8 w-48 mb-2" />
        <Skeleton className="h-4 w-72" />
      </div>
      <div className="space-y-4">
        <div className="border-b border-border pb-2">
          <Skeleton className="h-6 w-40" />
        </div>
        <div className="bg-card border border-border rounded-lg p-6 shadow-sm space-y-4">
          <div className="flex items-start justify-between">
            <div className="space-y-2">
              <Skeleton className="h-4 w-36" />
              <Skeleton className="h-3 w-64" />
            </div>
            <Skeleton className="h-6 w-24 rounded-full" />
          </div>
          <Skeleton className="h-10 w-40" />
        </div>
      </div>
    </div>
  );
}

export default function AccountSettingsPage() {
  return (
    <Suspense fallback={<AccountSettingsSkeleton />}>
      <AccountSettingsContent />
    </Suspense>
  );
}