"use client"

import { useState, useEffect } from "react"
import { useParams } from 'next/navigation'
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { PostCard } from "@/components/posts/post-card"
import { FrindleButton } from "@/components/frindle/frindle-button"
import { ArrowLeft, MessageCircle, Loader2 } from 'lucide-react'
import Link from "next/link"
import { useRouter } from 'next/navigation'
import type { Post } from "@/types/post"
import type { FrindleStatus } from "@/types/frindle"
import { getProfileById } from "@/actions/profile-actions"
import { logout } from "@/actions/auth-actions"

const MOCK_USER_POSTS: Post[] = [
  {
    id: "1",
    author: {
      id: "user-1",
      username: "user",
      displayName: "User",
      avatar: "/placeholder.svg?key=2sjn8",
    },
    content: "Just launched my first PWA! The feeling of seeing your code come to life is unmatched.",
    type: "thought",
    timestamp: "2h ago",
    likes: 24,
    comments: 5,
    isLiked: false,
  },
]

export default function UserProfilePage() {
  const params = useParams()
  const router = useRouter()
  const userId = params.userId as string

  const [userData, setUserData] = useState<any>(null)
  const [posts, setPosts] = useState<Post[]>(MOCK_USER_POSTS)
  const [activeTab, setActiveTab] = useState("posts")
  const [frindleStatus, setFrindleStatus] = useState<FrindleStatus>("none")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Fetch user profile from backend
  useEffect(() => {
    const fetchProfile = async () => {
      setIsLoading(true)
      setError(null)

      try {
        const result = await getProfileById(userId)

        if (result.success && result.profile) {
          setUserData(result.profile)
        } else {
          // Check if error is related to invalid token
          const errorMsg = result.error || "Failed to load profile"
          
          if (errorMsg.includes("token") || errorMsg.includes("authenticated") || errorMsg.includes("auth")) {
            // Invalid token - logout and redirect
            await logout()
            router.push("/login")
            return
          }
          
          setError(errorMsg)
        }
      } catch (err) {
        setError("An unexpected error occurred")
      } finally {
        setIsLoading(false)
      }
    }

    if (userId) {
      fetchProfile()
    }
  }, [userId, router])

  const handleLike = (postId: string) => {
    setPosts(
      posts.map((post) =>
        post.id === postId
          ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1 }
          : post,
      ),
    )
  }

  const handleSendRequest = (targetUserId: string) => {
    console.log("Sending Frindle request to:", targetUserId)
    setFrindleStatus("pending_sent")
  }

  const handleAcceptRequest = (targetUserId: string) => {
    console.log("Accepting Frindle request from:", targetUserId)
    setFrindleStatus("connected")
  }

  const handleRejectRequest = (targetUserId: string) => {
    console.log("Rejecting Frindle request from:", targetUserId)
    setFrindleStatus("rejected")
  }

  const handleCancelRequest = (targetUserId: string) => {
    console.log("Canceling Frindle request to:", targetUserId)
    setFrindleStatus("none")
  }

  const handleRemoveConnection = (targetUserId: string) => {
    console.log("Removing Frindle connection with:", targetUserId)
    setFrindleStatus("none")
  }

  if (isLoading) {
    return (
      <div className="p-2 sm:p-4 flex items-center justify-center min-h-screen">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-primary" />
          <p className="text-muted-foreground">Loading profile...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="p-2 sm:p-4">
        <div className="mb-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="w-5 h-5" />
          </Button>
        </div>
        <div className="bg-destructive/10 border border-destructive/20 rounded-xl p-6 text-center">
          <p className="text-destructive font-semibold mb-2">Error loading profile</p>
          <p className="text-sm text-muted-foreground mb-4">{error}</p>
          <Button onClick={() => window.location.reload()}>Retry</Button>
        </div>
      </div>
    )
  }

  if (!userData) {
    return (
      <div className="p-2 sm:p-4">
        <div className="mb-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="w-5 h-5" />
          </Button>
        </div>
        <div className="bg-card border border-border rounded-xl p-6 text-center">
          <p className="text-muted-foreground">Profile not found</p>
        </div>
      </div>
    )
  }

  // Get initials for avatar fallback
  const initials = userData.name
    ? userData.name.split(' ').map((n: string) => n[0]).join('').toUpperCase()
    : userData.username?.[0]?.toUpperCase() || '?'

  return (
    <div className="p-2 sm:p-4">
      <div className="relative">
        <div className="h-32 bg-gradient-to-br from-primary/20 to-primary/5 relative">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => router.back()}
            className="absolute top-2 left-2 bg-card/80 backdrop-blur-sm hover:bg-card"
          >
            <ArrowLeft className="w-5 h-5" />
            Back
          </Button>
        </div>

        <div className="px-4 pb-4">
          <div className="flex items-end gap-4 -mt-16">
            <Avatar className="w-32 h-32 border-4 border-card">
              <AvatarImage src={userData.image || "/placeholder.svg?height=200&width=200"} alt={userData.name} />
              <AvatarFallback className="text-2xl font-medium">{initials}</AvatarFallback>
            </Avatar>

            <div className="flex-1 pb-2">
              <div className="flex items-center justify-between">
                <div>
                  <h1 className="text-2xl font-bold text-foreground">{userData.name}</h1>
                  <p className="text-muted-foreground">@{userData.username}</p>
                </div>

                <div className="flex gap-2">
                  <FrindleButton
                    userId={userId}
                    status={frindleStatus}
                    onSendRequest={handleSendRequest}
                    onAcceptRequest={handleAcceptRequest}
                    onRejectRequest={handleRejectRequest}
                    onCancelRequest={handleCancelRequest}
                    onRemoveConnection={handleRemoveConnection}
                  />
                  <Button size="icon" variant="outline">
                    <MessageCircle className="w-5 h-5" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          <p className="mt-4 text-foreground">{userData.bio || "No bio yet"}</p>

          <div className="flex gap-6 mt-4">
            <div>
              <span className="font-bold text-foreground">{userData.postsCount || 0}</span>
              <span className="text-muted-foreground ml-1">Posts</span>
            </div>
            <div>
              <span className="font-bold text-foreground">{userData.starsRetained || 0}</span>
              <span className="text-muted-foreground ml-1">Frindles</span>
            </div>
            <div>
              <span className="font-bold text-foreground">{userData.totalStars || 5}</span>
              <span className="text-muted-foreground ml-1">Following</span>
            </div>
          </div>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
        <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
          <TabsTrigger
            value="posts"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
          >
            Posts
          </TabsTrigger>
          <TabsTrigger
            value="videos"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
          >
            Videos
          </TabsTrigger>
          <TabsTrigger
            value="likes"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
          >
            Likes
          </TabsTrigger>
        </TabsList>

        <TabsContent value="posts" className="p-4 space-y-4">
          {posts.map((post) => (
            <PostCard key={post.id} post={post} onLike={handleLike} />
          ))}
        </TabsContent>

        <TabsContent value="videos" className="p-4">
          <div className="grid grid-cols-3 gap-2">
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <div key={i} className="aspect-square bg-secondary rounded-lg"></div>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="likes" className="p-4 space-y-4">
          <p className="text-center text-muted-foreground py-8">No liked posts yet</p>
        </TabsContent>
      </Tabs>
    </div>
  )
}