import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/AuthContext";
import { useAethexToast } from "@/hooks/use-aethex-toast";
import { supabase } from "@/lib/supabase";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import LoadingScreen from "@/components/LoadingScreen";
import {
  User,
  Settings,
  Activity,
  Globe,
  Shield,
  Bell,
  Database,
  Monitor,
  Network,
  Zap,
  TrendingUp,
  Users,
  Server,
  Eye,
  Link2,
  Wifi,
  Cloud,
  Lock,
  ChevronRight,
  RefreshCw,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Circle,
} from "lucide-react";

interface SiteStatus {
  name: string;
  url: string;
  status: 'online' | 'offline' | 'maintenance';
  lastCheck: string;
  responseTime: number;
  version: string;
}

interface CrossSiteCommunication {
  siteName: string;
  lastSync: string;
  dataExchanged: number;
  status: 'connected' | 'disconnected' | 'syncing';
}

export default function Profile() {
  const navigate = useNavigate();
  const { user, profile, loading: authLoading, updateProfile } = useAuth();
  const { success: toastSuccess, error: toastError } = useAethexToast();
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  
  // Profile settings state
  const [profileData, setProfileData] = useState({
    displayName: '',
    bio: '',
    company: '',
    location: '',
    website: '',
    githubUsername: '',
    twitterUsername: '',
    linkedinUrl: '',
  });

  // Notification settings
  const [notifications, setNotifications] = useState({
    emailNotifications: true,
    pushNotifications: true,
    projectUpdates: true,
    marketingEmails: false,
    securityAlerts: true,
  });

  // Privacy settings
  const [privacy, setPrivacy] = useState({
    profileVisibility: 'public',
    showEmail: false,
    showProjects: true,
    allowAnalytics: true,
  });

  // Overseer dashboard data
  const [overseerData, setOverseerData] = useState({
    systemHealth: 98.5,
    activeUsers: 1247,
    totalProjects: 3592,
    serverLoad: 23,
    dataProcessed: 15.7, // GB
    apiCalls: 45231,
    errorRate: 0.03,
  });

  // Cross-site communication data
  const [crossSiteData, setCrossSiteData] = useState<CrossSiteCommunication[]>([
    {
      siteName: 'AeThex Labs',
      lastSync: '2 minutes ago',
      dataExchanged: 1.2,
      status: 'connected',
    },
    {
      siteName: 'Development Portal',
      lastSync: '5 minutes ago',
      dataExchanged: 0.8,
      status: 'syncing',
    },
    {
      siteName: 'Community Hub',
      lastSync: '12 minutes ago',
      dataExchanged: 2.1,
      status: 'connected',
    },
  ]);

  // Site monitoring data
  const [siteStatuses, setSiteStatuses] = useState<SiteStatus[]>([
    {
      name: 'Main Site',
      url: 'https://core.aethex.biz',
      status: 'online',
      lastCheck: 'Just now',
      responseTime: 245,
      version: '1.0.0',
    },
    {
      name: 'API Gateway',
      url: 'https://api.aethex.biz',
      status: 'online',
      lastCheck: '30 seconds ago',
      responseTime: 123,
      version: '2.1.3',
    },
    {
      name: 'Labs Portal',
      url: 'https://labs.aethex.biz',
      status: 'maintenance',
      lastCheck: '2 minutes ago',
      responseTime: 0,
      version: '1.5.2',
    },
  ]);

  useEffect(() => {
    if (!authLoading && !user) {
      navigate('/login');
      return;
    }

    if (profile) {
      setProfileData({
        displayName: profile.full_name || '',
        bio: profile.bio || '',
        company: (profile as any).company || '',
        location: profile.location || '',
        website: (profile as any).website || '',
        githubUsername: (profile as any).github_username || '',
        twitterUsername: (profile as any).twitter_username || '',
        linkedinUrl: profile.linkedin_url || '',
      });
    }

    setIsLoading(false);
  }, [authLoading, user, profile, navigate]);

  const handleProfileSave = async () => {
    if (!user) return;

    setIsSaving(true);
    console.log("Starting profile save...", {
      user: user.id,
      profile: !!profile,
      profileData
    });

    try {
      // Check if profile exists, create if it doesn't
      if (!profile) {
        console.log("No profile exists, creating one...");

        try {
          // Try using the AuthContext updateProfile (which works with mock too)
          await updateProfile({
            username: profileData.displayName || user.email?.split('@')[0] || `user_${Date.now()}`,
            full_name: profileData.displayName,
            bio: profileData.bio,
            location: profileData.location,
            linkedin_url: profileData.linkedinUrl,
            github_url: profileData.githubUsername ? `https://github.com/${profileData.githubUsername}` : null,
            twitter_url: profileData.twitterUsername ? `https://twitter.com/${profileData.twitterUsername}` : null,
            user_type: "community_member",
            experience_level: "beginner",
            level: 1,
            total_xp: 0,
          } as any);

          console.log("Profile created successfully via AuthContext");
        } catch (authError) {
          console.warn("AuthContext creation failed, trying direct database:", authError);

          // Fallback to direct database call
          const { data, error } = await supabase
            .from("user_profiles")
            .insert({
              id: user.id,
              username: profileData.displayName || user.email?.split('@')[0] || `user_${Date.now()}`,
              user_type: "community_member",
              experience_level: "beginner",
              full_name: profileData.displayName,
              bio: profileData.bio,
              location: profileData.location,
              linkedin_url: profileData.linkedinUrl,
              github_url: profileData.githubUsername ? `https://github.com/${profileData.githubUsername}` : null,
              twitter_url: profileData.twitterUsername ? `https://twitter.com/${profileData.twitterUsername}` : null,
              level: 1,
              total_xp: 0,
              created_at: new Date().toISOString(),
              updated_at: new Date().toISOString(),
            })
            .select()
            .single();

          if (error) {
            console.error("Error creating profile:", error);
            throw error;
          }

          console.log("Profile created successfully via direct DB:", data);
        }
      } else {
        console.log("Updating existing profile...");
        await updateProfile({
          full_name: profileData.displayName,
          bio: profileData.bio,
          location: profileData.location,
          linkedin_url: profileData.linkedinUrl,
          github_url: profileData.githubUsername ? `https://github.com/${profileData.githubUsername}` : null,
          twitter_url: profileData.twitterUsername ? `https://twitter.com/${profileData.twitterUsername}` : null,
          updated_at: new Date().toISOString(),
        } as any);
      }

      toastSuccess({
        title: "Profile Updated",
        description: "Your profile has been successfully updated.",
      });
    } catch (error: any) {
      console.error("Profile save error:", error);
      toastError({
        title: "Update Failed",
        description: error.message || "Failed to update profile. Please try again.",
      });
    } finally {
      setIsSaving(false);
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'online':
      case 'connected':
        return <CheckCircle className="h-4 w-4 text-green-500" />;
      case 'offline':
      case 'disconnected':
        return <XCircle className="h-4 w-4 text-red-500" />;
      case 'maintenance':
      case 'syncing':
        return <RefreshCw className="h-4 w-4 text-yellow-500 animate-spin" />;
      default:
        return <Circle className="h-4 w-4 text-gray-400" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'online':
      case 'connected':
        return 'bg-green-500';
      case 'offline':
      case 'disconnected':
        return 'bg-red-500';
      case 'maintenance':
      case 'syncing':
        return 'bg-yellow-500';
      default:
        return 'bg-gray-400';
    }
  };

  if (authLoading || isLoading) {
    return <LoadingScreen />;
  }

  return (
    <Layout>
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
        <div className="container mx-auto px-4 py-8">
          {/* Header */}
          <div className="mb-8">
            <div className="flex items-center space-x-4 mb-4">
              <Avatar className="h-16 w-16">
                <AvatarImage src={profile?.avatar_url} />
                <AvatarFallback className="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xl">
                  {profile?.full_name?.[0] || user?.email?.[0]?.toUpperCase()}
                </AvatarFallback>
              </Avatar>
              <div>
                <h1 className="text-3xl font-bold text-white">
                  {profile?.full_name || 'User Profile'}
                </h1>
                <p className="text-gray-300">{user?.email}</p>
              </div>
            </div>
          </div>

          <Tabs defaultValue="profile" className="space-y-6">
            <TabsList className="grid w-full grid-cols-4 bg-slate-800/50 border border-slate-700">
              <TabsTrigger value="profile" className="text-white data-[state=active]:bg-purple-600">
                <User className="h-4 w-4 mr-2" />
                Profile
              </TabsTrigger>
              <TabsTrigger value="settings" className="text-white data-[state=active]:bg-purple-600">
                <Settings className="h-4 w-4 mr-2" />
                Settings
              </TabsTrigger>
              <TabsTrigger value="overseer" className="text-white data-[state=active]:bg-purple-600">
                <Monitor className="h-4 w-4 mr-2" />
                Overseer
              </TabsTrigger>
              <TabsTrigger value="network" className="text-white data-[state=active]:bg-purple-600">
                <Network className="h-4 w-4 mr-2" />
                Network
              </TabsTrigger>
            </TabsList>

            {/* Profile Settings Tab */}
            <TabsContent value="profile" className="space-y-6">
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-white flex items-center">
                    <User className="h-5 w-5 mr-2" />
                    Profile Information
                  </CardTitle>
                  <CardDescription className="text-gray-300">
                    Update your profile information and social links.
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="displayName" className="text-white">Display Name</Label>
                      <Input
                        id="displayName"
                        value={profileData.displayName}
                        onChange={(e) => setProfileData({ ...profileData, displayName: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                    <div>
                      <Label htmlFor="company" className="text-white">Company</Label>
                      <Input
                        id="company"
                        value={profileData.company}
                        onChange={(e) => setProfileData({ ...profileData, company: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                    <div>
                      <Label htmlFor="location" className="text-white">Location</Label>
                      <Input
                        id="location"
                        value={profileData.location}
                        onChange={(e) => setProfileData({ ...profileData, location: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                    <div>
                      <Label htmlFor="website" className="text-white">Website</Label>
                      <Input
                        id="website"
                        value={profileData.website}
                        onChange={(e) => setProfileData({ ...profileData, website: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="bio" className="text-white">Bio</Label>
                    <Textarea
                      id="bio"
                      value={profileData.bio}
                      onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
                      className="bg-slate-900/50 border-slate-600 text-white"
                      rows={3}
                    />
                  </div>
                  <Separator className="bg-slate-600" />
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                      <Label htmlFor="github" className="text-white">GitHub Username</Label>
                      <Input
                        id="github"
                        value={profileData.githubUsername}
                        onChange={(e) => setProfileData({ ...profileData, githubUsername: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                    <div>
                      <Label htmlFor="twitter" className="text-white">Twitter Username</Label>
                      <Input
                        id="twitter"
                        value={profileData.twitterUsername}
                        onChange={(e) => setProfileData({ ...profileData, twitterUsername: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                    <div>
                      <Label htmlFor="linkedin" className="text-white">LinkedIn URL</Label>
                      <Input
                        id="linkedin"
                        value={profileData.linkedinUrl}
                        onChange={(e) => setProfileData({ ...profileData, linkedinUrl: e.target.value })}
                        className="bg-slate-900/50 border-slate-600 text-white"
                      />
                    </div>
                  </div>
                  <Button onClick={handleProfileSave} disabled={isSaving} className="bg-purple-600 hover:bg-purple-700">
                    {isSaving ? 'Saving...' : 'Save Profile'}
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>

            {/* Settings Tab */}
            <TabsContent value="settings" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card className="bg-slate-800/50 border-slate-700">
                  <CardHeader>
                    <CardTitle className="text-white flex items-center">
                      <Bell className="h-5 w-5 mr-2" />
                      Notifications
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {Object.entries(notifications).map(([key, value]) => (
                      <div key={key} className="flex items-center justify-between">
                        <Label className="text-white capitalize">
                          {key.replace(/([A-Z])/g, ' $1').trim()}
                        </Label>
                        <Switch
                          checked={value}
                          onCheckedChange={(checked) => 
                            setNotifications({ ...notifications, [key]: checked })
                          }
                        />
                      </div>
                    ))}
                  </CardContent>
                </Card>

                <Card className="bg-slate-800/50 border-slate-700">
                  <CardHeader>
                    <CardTitle className="text-white flex items-center">
                      <Shield className="h-5 w-5 mr-2" />
                      Privacy
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {Object.entries(privacy).map(([key, value]) => (
                      <div key={key} className="flex items-center justify-between">
                        <Label className="text-white capitalize">
                          {key.replace(/([A-Z])/g, ' $1').trim()}
                        </Label>
                        <Switch
                          checked={typeof value === 'boolean' ? value : value === 'public'}
                          onCheckedChange={(checked) => 
                            setPrivacy({ 
                              ...privacy, 
                              [key]: typeof value === 'boolean' ? checked : (checked ? 'public' : 'private')
                            })
                          }
                        />
                      </div>
                    ))}
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            {/* Overseer Dashboard Tab */}
            <TabsContent value="overseer" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <Card className="bg-slate-800/50 border-slate-700">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-400">System Health</p>
                        <p className="text-2xl font-bold text-green-400">{overseerData.systemHealth}%</p>
                      </div>
                      <Activity className="h-8 w-8 text-green-400" />
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-slate-800/50 border-slate-700">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-400">Active Users</p>
                        <p className="text-2xl font-bold text-blue-400">{overseerData.activeUsers}</p>
                      </div>
                      <Users className="h-8 w-8 text-blue-400" />
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-slate-800/50 border-slate-700">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-400">Server Load</p>
                        <p className="text-2xl font-bold text-yellow-400">{overseerData.serverLoad}%</p>
                      </div>
                      <Server className="h-8 w-8 text-yellow-400" />
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-slate-800/50 border-slate-700">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-400">Error Rate</p>
                        <p className="text-2xl font-bold text-red-400">{overseerData.errorRate}%</p>
                      </div>
                      <AlertTriangle className="h-8 w-8 text-red-400" />
                    </div>
                  </CardContent>
                </Card>
              </div>

              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-white flex items-center">
                    <Monitor className="h-5 w-5 mr-2" />
                    Site Monitoring
                  </CardTitle>
                  <CardDescription className="text-gray-300">
                    Real-time status of all AeThex sites and services
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {siteStatuses.map((site, index) => (
                      <div key={index} className="flex items-center justify-between p-4 bg-slate-900/50 rounded-lg border border-slate-600">
                        <div className="flex items-center space-x-4">
                          {getStatusIcon(site.status)}
                          <div>
                            <h4 className="text-white font-medium">{site.name}</h4>
                            <p className="text-sm text-gray-400">{site.url}</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <Badge variant="outline" className={`${getStatusColor(site.status)} text-white border-0`}>
                            {site.status}
                          </Badge>
                          <p className="text-sm text-gray-400 mt-1">{site.responseTime}ms</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            {/* Network/Cross-Site Communication Tab */}
            <TabsContent value="network" className="space-y-6">
              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-white flex items-center">
                    <Network className="h-5 w-5 mr-2" />
                    Cross-Site Communication
                  </CardTitle>
                  <CardDescription className="text-gray-300">
                    Monitor data exchange between AeThex network sites
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {crossSiteData.map((site, index) => (
                      <div key={index} className="flex items-center justify-between p-4 bg-slate-900/50 rounded-lg border border-slate-600">
                        <div className="flex items-center space-x-4">
                          {getStatusIcon(site.status)}
                          <div>
                            <h4 className="text-white font-medium">{site.siteName}</h4>
                            <p className="text-sm text-gray-400">Last sync: {site.lastSync}</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p className="text-white font-medium">{site.dataExchanged} MB</p>
                          <Badge variant="outline" className={`${getStatusColor(site.status)} text-white border-0 mt-1`}>
                            {site.status}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-slate-800/50 border-slate-700">
                <CardHeader>
                  <CardTitle className="text-white flex items-center">
                    <Wifi className="h-5 w-5 mr-2" />
                    Network Configuration
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-4 bg-slate-900/50 rounded-lg border border-slate-600">
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="text-white font-medium">Auto-Sync</h4>
                        <Switch defaultChecked />
                      </div>
                      <p className="text-sm text-gray-400">Automatically sync data between sites</p>
                    </div>
                    <div className="p-4 bg-slate-900/50 rounded-lg border border-slate-600">
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="text-white font-medium">Real-time Updates</h4>
                        <Switch defaultChecked />
                      </div>
                      <p className="text-sm text-gray-400">Enable real-time cross-site communication</p>
                    </div>
                    <div className="p-4 bg-slate-900/50 rounded-lg border border-slate-600">
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="text-white font-medium">Data Encryption</h4>
                        <Switch defaultChecked />
                      </div>
                      <p className="text-sm text-gray-400">Encrypt data during transmission</p>
                    </div>
                    <div className="p-4 bg-slate-900/50 rounded-lg border border-slate-600">
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="text-white font-medium">Monitoring Alerts</h4>
                        <Switch defaultChecked />
                      </div>
                      <p className="text-sm text-gray-400">Get notified of connection issues</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </Layout>
  );
}