import { useNavigate } from 'react-router-dom';
import { useUser } from '@/features/auth/hooks/useUser';
import {
  useLibraryItems,
  useLibraryActions,
  useLibraryStatus,
} from '@/utils/storeSelectors';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Music, MessageSquare, Library, Users, Heart } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useEffect } from 'react'; // Added useEffect import

function DashboardPage() {
  const navigate = useNavigate();
  const { data: user } = useUser();
  const items = useLibraryItems();
  const { fetchItems } = useLibraryActions();
  const { isLoading } = useLibraryStatus();

  useEffect(() => {
    fetchItems({ limit: 5 });
  }, [fetchItems]);

  const stats = [
    {
      title: 'Tracks Listened',
      value: '1,234',
      change: '+12%',
      icon: Music,
      color: 'text-cyan-500',
      shadow: 'drop-shadow-[0_0_8px_rgba(var(--cyan-500),0.5)]',
    },
    {
      title: 'Messages Sent',
      value: '567',
      change: '+8%',
      icon: MessageSquare,
      color: 'text-lime-500',
      shadow: 'drop-shadow-[0_0_8px_rgba(var(--lime-500),0.5)]',
    },
    {
      title: 'Favorites',
      value: '89',
      change: '+23%',
      icon: Heart,
      color: 'text-destructive',
      shadow: 'drop-shadow-[0_0_8px_rgba(var(--destructive),0.5)]',
    },
    {
      title: 'Active Friends',
      value: '45',
      change: '+5%',
      icon: Users,
      color: 'text-magenta-500',
      shadow: 'drop-shadow-[0_0_8px_rgba(var(--magenta-500),0.5)]',
    },
  ];

  return (
    <div className="space-y-6 p-6 pb-24">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-display font-bold tracking-tight text-white mb-2">
          Welcome back, <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-magenta-500">{user?.first_name || user?.username}</span>
        </h1>
        <p className="text-muted-foreground">
          Your command center overview.
        </p>
      </div>

      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.title} variant="glass" className="group hover:border-primary/50 transition-all duration-300">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-white transition-colors">
                {stat.title}
              </CardTitle>
              <stat.icon className={cn("h-4 w-4 transition-all duration-300", stat.color, stat.shadow, "group-hover:scale-110")} />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-white tracking-tight">{stat.value}</div>
              <p className="text-xs text-muted-foreground mt-1">
                <span className="text-lime-500 font-medium">{stat.change}</span> from last month
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {/* Recent Activity */}
        <Card className="md:col-span-2" variant="glass">
          <CardHeader>
            <CardTitle>Recent Activity</CardTitle>
            <CardDescription>
              Your latest interactions on the platform
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
                <div className="w-2 h-2 bg-cyan-500 rounded-full shadow-[0_0_8px_rgba(var(--cyan-500),0.8)] animate-pulse" />
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium text-white">New track added</p>
                  <p className="text-xs text-muted-foreground">2 hours ago</p>
                </div>
              </div>
              <div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
                <div className="w-2 h-2 bg-lime-500 rounded-full shadow-[0_0_8px_rgba(var(--lime-500),0.8)]" />
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium text-white">Message from @alice</p>
                  <p className="text-xs text-muted-foreground">4 hours ago</p>
                </div>
              </div>
              <div className="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
                <div className="w-2 h-2 bg-magenta-500 rounded-full shadow-[0_0_8px_rgba(var(--magenta-500),0.8)]" />
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium text-white">New favorite added</p>
                  <p className="text-xs text-muted-foreground">6 hours ago</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Recent Tracks */}
        <Card variant="glass">
          <CardHeader>
            <CardTitle>Recent Tracks</CardTitle>
            <CardDescription>
              Latest additions to your library
            </CardDescription>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-4">
                {[...Array(3)].map((_, i) => (
                  <div key={i} className="flex items-center space-x-4 animate-pulse">
                    <div className="w-10 h-10 bg-white/10 rounded" />
                    <div className="flex-1 space-y-2">
                      <div className="h-3 bg-white/10 rounded w-3/4" />
                      <div className="h-2 bg-white/10 rounded w-1/2" />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="space-y-4">
                {items.slice(0, 3).map((item) => (
                  <div key={item.id} className="flex items-center space-x-4 p-2 rounded-lg hover:bg-white/5 transition-colors cursor-pointer group border border-transparent hover:border-white/5">
                    <div className="w-10 h-10 bg-black/40 rounded flex items-center justify-center border border-white/10 group-hover:border-cyan-500/50 transition-colors shadow-lg">
                      <Music className="h-4 w-4 text-muted-foreground group-hover:text-cyan-500 transition-colors" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate text-white group-hover:text-primary transition-colors">
                        {item.title}
                      </p>
                      <p className="text-xs text-muted-foreground truncate group-hover:text-white/70">
                        {item.description || 'No description'}
                      </p>
                    </div>
                  </div>
                ))}
                {items.length === 0 && (
                  <p className="text-sm text-muted-foreground text-center py-8">
                    No tracks in your library
                  </p>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}
      <Card variant="glass" className="overflow-hidden">
        <CardHeader>
          <CardTitle>Quick Actions</CardTitle>
          <CardDescription>
            Fast access to main features
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {[
              { label: 'New Track', icon: Music, color: 'hover:text-cyan-500', border: 'hover:border-cyan-500/50', action: () => navigate('/library?action=upload') },
              { label: 'New Chat', icon: MessageSquare, color: 'hover:text-lime-500', border: 'hover:border-lime-500/50', action: () => navigate('/chat') },
              { label: 'Library', icon: Library, color: 'hover:text-magenta-500', border: 'hover:border-magenta-500/50', action: () => navigate('/library') },
              { label: 'Invite Friends', icon: Users, color: 'hover:text-white', border: 'hover:border-white/50', action: () => navigate('/social') }
            ].map((action, i) => (
              <Button
                key={i}
                variant="outline"
                onClick={action.action}
                className={cn(
                  "h-24 flex-col gap-3 bg-black/20 border-white/10 hover:bg-white/5 transition-all duration-300 group",
                  action.border
                )}
              >
                <div className={cn(
                  "w-10 h-10 rounded-full bg-white/5 flex items-center justify-center transition-all duration-300 group-hover:scale-110",
                  action.color
                )}>
                  <action.icon className="h-5 w-5" />
                </div>
                <span className="text-muted-foreground group-hover:text-white transition-colors">{action.label}</span>
              </Button>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export { DashboardPage };
export default DashboardPage;
