import { useState } from 'react';
import { Users, Heart, MessageCircle, Share2, TrendingUp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/useToast';

export function SocialPage() {
  const { toast } = useToast();
  const [posts] = useState([
    {
      id: 1,
      author: 'DJ Nova',
      avatar: '🎧',
      content: 'Just dropped a new track! Check it out on my profile.',
      likes: 42,
      comments: 8,
      timestamp: '2h ago',
    },
    {
      id: 2,
      author: 'Producer Mike',
      avatar: '🎹',
      content:
        'Working on a collaboration with some amazing artists. Stay tuned!',
      likes: 28,
      comments: 5,
      timestamp: '4h ago',
    },
  ]);

  return (
    <div className="min-h-screen p-6 space-y-6">
      {/* Header */}
      <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-kodo-cyan/20 flex items-center justify-center border border-kodo-cyan/30">
              <Users className="w-6 h-6 text-kodo-cyan" />
            </div>
            <div>
              <h1 className="text-2xl font-display font-bold text-white">
                Community Feed
              </h1>
              <p className="text-sm text-kodo-secondary">
                Connect with artists worldwide
              </p>
            </div>
          </div>
          <Button
            className="bg-kodo-cyan hover:bg-kodo-cyan/80 text-black"
            onClick={() =>
              toast({ message: 'Post creation coming soon!', type: 'info' })
            }
          >
            Create Post
          </Button>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="glass-hud rounded-xl border-white/10 p-4">
          <div className="flex items-center gap-3">
            <TrendingUp className="w-5 h-5 text-kodo-lime" />
            <div>
              <p className="text-xs text-kodo-secondary">Trending</p>
              <p className="text-lg font-bold text-white">156 Posts</p>
            </div>
          </div>
        </div>
        <div className="glass-hud rounded-xl border-white/10 p-4">
          <div className="flex items-center gap-3">
            <Users className="w-5 h-5 text-kodo-cyan" />
            <div>
              <p className="text-xs text-kodo-secondary">Following</p>
              <p className="text-lg font-bold text-white">42 Artists</p>
            </div>
          </div>
        </div>
        <div className="glass-hud rounded-xl border-white/10 p-4">
          <div className="flex items-center gap-3">
            <Heart className="w-5 h-5 text-kodo-magenta" />
            <div>
              <p className="text-xs text-kodo-secondary">Likes</p>
              <p className="text-lg font-bold text-white">1.2K Total</p>
            </div>
          </div>
        </div>
      </div>

      {/* Feed */}
      <div className="space-y-4">
        {posts.map((post) => (
          <div
            key={post.id}
            className="glass-hud rounded-xl border-white/10 p-6 hud-corner"
          >
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-xl bg-kodo-graphite border border-white/10 flex items-center justify-center text-2xl">
                {post.avatar}
              </div>
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <div>
                    <h3 className="font-bold text-white">{post.author}</h3>
                    <p className="text-xs text-kodo-secondary">
                      {post.timestamp}
                    </p>
                  </div>
                </div>
                <p className="text-white mb-4">{post.content}</p>
                <div className="flex items-center gap-6">
                  <button className="flex items-center gap-2 text-kodo-secondary hover:text-kodo-magenta transition-colors">
                    <Heart className="w-4 h-4" />
                    <span className="text-sm">{post.likes}</span>
                  </button>
                  <button className="flex items-center gap-2 text-kodo-secondary hover:text-kodo-cyan transition-colors">
                    <MessageCircle className="w-4 h-4" />
                    <span className="text-sm">{post.comments}</span>
                  </button>
                  <button className="flex items-center gap-2 text-kodo-secondary hover:text-white transition-colors">
                    <Share2 className="w-4 h-4" />
                    <span className="text-sm">Share</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Empty State for new users */}
      <div className="glass-hud rounded-xl border-white/10 p-12 text-center">
        <Users className="w-16 h-16 text-kodo-secondary mx-auto mb-4 opacity-50" />
        <h3 className="text-lg font-bold text-white mb-2">
          Start Following Artists
        </h3>
        <p className="text-kodo-secondary mb-4">
          Follow artists to see their latest updates in your feed
        </p>
        <Button
          variant="outline"
          className="border-kodo-cyan/30 text-kodo-cyan hover:bg-kodo-cyan/10"
        >
          Discover Artists
        </Button>
      </div>
    </div>
  );
}
