import Layout from "@/components/Layout";
import { useAuth } from "@/contexts/AuthContext";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import LoadingScreen from "@/components/LoadingScreen";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { aethexSocialService } from "@/lib/aethex-social-service";
import { UserPlus, UserCheck } from "lucide-react";

export default function Network() {
  const { user, profile, loading } = useAuth();
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(true);
  const [recommended, setRecommended] = useState<any[]>([]);
  const [following, setFollowing] = useState<string[]>([]);

  useEffect(() => {
    if (!loading && !user) {
      navigate("/login", { replace: true });
      return;
    }
    if (!user) return;

    const load = async () => {
      setIsLoading(true);
      try {
        const recs = await aethexSocialService.listRecommended(user.id, 12);
        setRecommended(recs);
        const flw = await aethexSocialService.getFollowing(user.id);
        setFollowing(flw);
      } finally {
        setIsLoading(false);
      }
    };
    load();
  }, [user, loading, navigate]);

  const isFollowing = (id: string) => following.includes(id);

  const toggleFollow = async (targetId: string) => {
    if (!user) return;
    if (isFollowing(targetId)) {
      await aethexSocialService.unfollowUser(user.id, targetId);
      setFollowing((s) => s.filter((x) => x !== targetId));
    } else {
      await aethexSocialService.followUser(user.id, targetId);
      setFollowing((s) => Array.from(new Set([...s, targetId])));
    }
  };

  if (loading || isLoading) {
    return (
      <LoadingScreen
        message="Loading your network..."
        showProgress
        duration={1000}
      />
    );
  }

  if (!user) return null;

  return (
    <Layout>
      <div className="min-h-screen bg-aethex-gradient py-8">
        <div className="container mx-auto px-4 max-w-7xl grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Public Profile */}
          <div className="lg:col-span-4 space-y-6">
            <Card className="bg-card/50 border-border/50">
              <CardContent className="p-6 space-y-4">
                <div className="flex items-center gap-4">
                  <Avatar className="h-16 w-16">
                    <AvatarImage src={profile?.avatar_url} />
                    <AvatarFallback>
                      {profile?.full_name?.[0] ||
                        user.email?.[0]?.toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <h2 className="text-xl font-semibold">
                      {profile?.full_name || user.email?.split("@")[0]}
                    </h2>
                    <p className="text-sm text-muted-foreground">
                      {profile?.role || "Member"}
                    </p>
                    <div className="mt-2 flex gap-2">
                      <Badge
                        variant="outline"
                        className="border-aethex-400/50 text-aethex-400"
                      >
                        Level {profile?.level || 1}
                      </Badge>
                      <Badge variant="outline">
                        {(profile as any)?.experience_level || "beginner"}
                      </Badge>
                    </div>
                  </div>
                </div>
                {profile?.bio && (
                  <p className="text-sm text-muted-foreground">{profile.bio}</p>
                )}
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    onClick={() => navigate("/dashboard")}
                  >
                    Edit Profile
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => navigate("/onboarding")}
                  >
                    Improve Profile
                  </Button>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-card/50 border-border/50">
              <CardHeader>
                <CardTitle>Recommendations</CardTitle>
                <CardDescription>
                  People who align with your interests
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {recommended.slice(0, 3).map((r) => (
                  <div key={r.id} className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Avatar className="h-10 w-10">
                        <AvatarImage src={r.avatar_url} />
                        <AvatarFallback>
                          {(r.full_name || r.username || "U")[0]}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">
                          {r.full_name || r.username}
                        </div>
                        <div className="text-xs text-muted-foreground">
                          {r.bio?.slice(0, 40) || "Member"}
                        </div>
                      </div>
                    </div>
                    <Button
                      size="sm"
                      variant={isFollowing(r.id) ? "outline" : "default"}
                      onClick={() => toggleFollow(r.id)}
                    >
                      {isFollowing(r.id) ? (
                        <span className="flex items-center gap-1">
                          <UserCheck className="h-4 w-4" /> Following
                        </span>
                      ) : (
                        <span className="flex items-center gap-1">
                          <UserPlus className="h-4 w-4" /> Follow
                        </span>
                      )}
                    </Button>
                  </div>
                ))}
                {recommended.length === 0 && (
                  <div className="text-sm text-muted-foreground">
                    No recommendations yet.
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Discover People */}
          <div className="lg:col-span-8">
            <Card className="bg-card/50 border-border/50">
              <CardHeader>
                <CardTitle>Discover People</CardTitle>
                <CardDescription>
                  Connect with creators, clients, and members
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {recommended.map((r) => (
                  <div
                    key={r.id}
                    className="flex items-center justify-between p-3 rounded-lg border border-border/50 hover:border-aethex-400/50 transition-all"
                  >
                    <div className="flex items-center gap-3">
                      <Avatar className="h-12 w-12">
                        <AvatarImage src={r.avatar_url} />
                        <AvatarFallback>
                          {(r.full_name || r.username || "U")[0]}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-semibold">
                          {r.full_name || r.username}
                        </div>
                        <div className="text-xs text-muted-foreground">
                          {r.bio?.slice(0, 80) || "Member"}
                        </div>
                      </div>
                    </div>
                    <Button
                      size="sm"
                      variant={isFollowing(r.id) ? "outline" : "default"}
                      onClick={() => toggleFollow(r.id)}
                    >
                      {isFollowing(r.id) ? (
                        <span className="flex items-center gap-1">
                          <UserCheck className="h-4 w-4" /> Following
                        </span>
                      ) : (
                        <span className="flex items-center gap-1">
                          <UserPlus className="h-4 w-4" /> Follow
                        </span>
                      )}
                    </Button>
                  </div>
                ))}
                {recommended.length === 0 && (
                  <div className="text-sm text-muted-foreground">
                    No people found yet.
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </Layout>
  );
}