fix #4: wire Profile page to real API data (user comparisons, stats, auth session)

src/app/(main)/profile/page.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
-import { BarChart3, Eye, Calendar, Plus, ArrowRight, RefreshCw, LogIn } from "lucide-react"
+import { BarChart3, Eye, Calendar, Plus, RefreshCw, LogIn } from "lucide-react"
 import Link from "next/link"
 import { useSession } from "@/lib/auth-client"
 
@@ -17,7 +17,8 @@ interface Comparison {
   items: string[]
   tags: string[]
   viewCount: number
-  overallScore: number
+  status: string
+  isPublic: boolean
   createdAt: string
 }
 
@@ -25,6 +26,7 @@ interface UserComparisonsResponse {
   comparisons: Comparison[]
   total: number
   page: number
+  limit: number
 }
 
 interface UserStats {
@@ -33,21 +35,102 @@ interface UserStats {
 }
 
 export default function ProfilePage() {
-  // TODO: Replace with real auth session data
-  const user = { name: "Demo User", email: "demo@example.com", avatar: "" }
-  const stats = [
-    { label: "Comparisons", value: "0", icon: BarChart3 },
-    { label: "Total Views", value: "0", icon: Eye },
+  const { data: session, isPending: sessionLoading } = useSession()
+  const [comparisons, setComparisons] = useState<Comparison[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [stats, setStats] = useState<UserStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const limit = 20
+
+  const fetchComparisons = useCallback(async (pageNum: number) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams({
+        page: pageNum.toString(),
+        limit: limit.toString(),
+      })
+      const res = await fetch(`/api/user/comparisons?${params}`)
+      if (res.status === 401) {
+        setError("Not authenticated")
+        return
+      }
+      if (!res.ok) throw new Error("Failed to fetch comparisons")
+      const data: UserComparisonsResponse = await res.json()
+      setComparisons(data.comparisons)
+      setTotal(data.total)
+      setPage(pageNum)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong")
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const fetchStats = useCallback(async () => {
+    try {
+      const res = await fetch("/api/user/stats")
+      if (res.ok) {
+        const data: UserStats = await res.json()
+        setStats(data)
+      }
+    } catch {
+      // Stats are non-critical, don't block the page
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!sessionLoading && session?.user) {
+      fetchComparisons(1)
+      fetchStats()
+    } else if (!sessionLoading && !session?.user) {
+      setLoading(false)
+    }
+  }, [sessionLoading, session, fetchComparisons, fetchStats])
+
+  // Not authenticated — show sign-in prompt
+  if (!sessionLoading && !session?.user) {
+    return (
+      <div className="max-w-4xl mx-auto p-4 sm:p-6">
+        <Card className="p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="size-12 rounded-full bg-muted flex items-center justify-center">
+              <LogIn className="size-6 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="font-medium">Sign in to view your profile</p>
+              <p className="text-sm text-muted-foreground">
+                View your comparisons and stats
+              </p>
+            </div>
+            <Link href="/sign-in">
+              <Button className="gap-2">
+                <LogIn className="size-4" />
+                Sign In
+              </Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  const user = session.user
+  const statsCards = [
+    { label: "Comparisons", value: stats?.totalComparisons ?? 0, icon: BarChart3 },
+    { label: "Total Views", value: stats?.totalViews ?? 0, icon: Eye },
   ]
-  const comparisons: Comparison[] = []
 
   return (
     <div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-8">
       <div className="flex items-center gap-6">
         <Avatar className="size-20">
-          <AvatarImage src={user.avatar} />
+          <AvatarImage src={user.image ?? undefined} />
           <AvatarFallback className="text-2xl bg-primary/10 text-primary font-semibold">
-            {user.name.split(" ").map((n) => n[0]).join("")}
+            {user.name?.split(" ").map((n) => n[0]).join("") ?? "?"}
           </AvatarFallback>
         </Avatar>
         <div className="space-y-1.5">
@@ -56,15 +139,18 @@ export default function ProfilePage() {
         </div>
       </div>
 
+      {/* Stats cards */}
       <div className="grid gap-4 sm:grid-cols-2">
-        {stats.map((stat) => (
+        {statsCards.map((stat) => (
           <Card key={stat.label}>
             <CardContent className="flex items-center gap-4 p-4">
               <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
                 <stat.icon className="size-5 text-primary" />
               </div>
               <div>
-                <p className="text-2xl font-bold">{stat.value}</p>
+                <p className="text-2xl font-bold">
+                  {loading ? <Skeleton className="h-7 w-16" /> : stat.value.toLocaleString()}
+                </p>
                 <p className="text-sm text-muted-foreground">{stat.label}</p>
               </div>
             </CardContent>
@@ -72,6 +158,7 @@ export default function ProfilePage() {
         ))}
       </div>
 
+      {/* User comparisons */}
       <div className="space-y-4">
         <div className="flex items-center justify-between">
           <h2 className="text-xl font-semibold">My Comparisons</h2>
@@ -83,16 +170,50 @@ export default function ProfilePage() {
           </Link>
         </div>
 
-        {comparisons.length > 0 ? (
+        {loading ? (
+          <div className="grid gap-4 sm:grid-cols-2">
+            {[...Array(4)].map((_, i) => (
+              <Card key={i} className="h-full">
+                <CardHeader className="pb-3">
+                  <Skeleton className="h-5 w-3/4 mb-2" />
+                  <Skeleton className="h-4 w-1/2" />
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <div className="flex gap-1.5">
+                    <Skeleton className="h-5 w-12" />
+                    <Skeleton className="h-5 w-12" />
+                  </div>
+                  <Skeleton className="h-4 w-full" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : error ? (
+          <Card className="p-8 text-center">
+            <div className="flex flex-col items-center gap-4">
+              <div className="size-12 rounded-full bg-destructive/10 flex items-center justify-center">
+                <BarChart3 className="size-6 text-destructive" />
+              </div>
+              <div>
+                <p className="font-medium">Failed to load comparisons</p>
+                <p className="text-sm text-muted-foreground">{error}</p>
+              </div>
+              <Button onClick={() => { fetchComparisons(1); fetchStats() }} className="gap-2">
+                <RefreshCw className="size-4" />
+                Retry
+              </Button>
+            </div>
+          </Card>
+        ) : comparisons.length > 0 ? (
           <div className="grid gap-4 sm:grid-cols-2">
             {comparisons.map((comparison) => (
-              <Link key={comparison.id} href={`/compare/${comparison.id}`}>
+              <Link key={comparison.id} href={`/compare/${comparison.slug}`}>
                 <Card className="h-full transition-all hover:border-primary hover:shadow-md">
                   <CardHeader className="pb-3">
                     <CardTitle className="text-base line-clamp-1">{comparison.title}</CardTitle>
                     <CardDescription className="flex items-center gap-2 text-xs">
                       <Calendar className="size-3.5" />
-                      {comparison.createdAt}
+                      {new Date(comparison.createdAt).toLocaleDateString()}
                     </CardDescription>
                   </CardHeader>
                   <CardContent className="space-y-3">
@@ -112,9 +233,9 @@ export default function ProfilePage() {
                           <Eye className="size-3.5" />
                           {comparison.viewCount.toLocaleString()}
                         </span>
-                        <span className="font-semibold text-foreground">
-                          {comparison.overallScore}/10
-                        </span>
+                        {!comparison.isPublic && (
+                          <Badge variant="outline" className="text-xs">Draft</Badge>
+                        )}
                       </div>
                     </div>
                   </CardContent>
@@ -143,6 +264,19 @@ export default function ProfilePage() {
             </div>
           </Card>
         )}
+
+        {/* Pagination */}
+        {!loading && comparisons.length > 0 && comparisons.length < total && (
+          <div className="flex justify-center">
+            <Button
+              variant="outline"
+              onClick={() => fetchComparisons(page + 1)}
+              className="gap-2"
+            >
+              Load More
+            </Button>
+          </div>
+        )}
       </div>
     </div>
   )