import React, { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { TrendingUp, Users, Hash, MoreHorizontal, Play } from 'lucide-react';
import { trackService } from '@/services/trackService';
import { useToast } from '@/context/ToastContext';
import { useAudio } from '@/context/AudioContext';
import { Track } from '@/types/api';
import { logger } from '@/utils/logger';

interface SocialViewProps {
  onViewProfile: (userId: string | null) => void;
}

export const SocialView: React.FC<SocialViewProps> = ({ onViewProfile }) => {
  const { addToast: _addToast } = useToast();
  const { playTrack } = useAudio();
  const [activeTab, setActiveTab] = useState('feed');
  const [feedTracks, setFeedTracks] = useState<Track[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadFeed = async () => {
      setLoading(true);
      try {
        // Using recent tracks as the "Feed"
        const res = await trackService.list({
          limit: 10,
          sort_by: 'created_at',
        });
        setFeedTracks(res.tracks);
      } catch (e) {
        logger.error('Error loading feed tracks', {
          error: e instanceof Error ? e.message : String(e),
          stack: e instanceof Error ? e.stack : undefined,
        });
      } finally {
        setLoading(false);
      }
    };
    loadFeed();
  }, []);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fadeIn pb-20">
      {/* Sidebar */}
      <div className="hidden lg:block lg:col-span-3 space-y-6">
        <Card variant="glass" className="p-0 overflow-hidden">
          <div className="h-20 bg-gradient-gaming"></div>
          <div className="px-4 pb-4">
            <div
              className="relative -mt-10 mb-3 cursor-pointer"
              onClick={() => onViewProfile(null)}
            >
              <div className="w-20 h-20 rounded-full border-4 border-kodo-graphite overflow-hidden bg-black">
                <img
                  src="https://picsum.photos/id/237/200/200"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
            <h3 className="font-bold text-white text-lg">My Profile</h3>
            <p className="text-sm text-gray-400 mb-4">View your stats</p>
          </div>
        </Card>

        <Card variant="default" className="p-2">
          <nav className="space-y-1">
            <button
              onClick={() => setActiveTab('feed')}
              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium ${activeTab === 'feed' ? 'bg-kodo-cyan/10 text-kodo-cyan' : 'text-gray-400 hover:text-white'}`}
            >
              <TrendingUp className="w-4 h-4" /> Fresh Tracks
            </button>
            <button className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-white">
              <Users className="w-4 h-4" /> Communities
            </button>
          </nav>
        </Card>
      </div>

      {/* Feed Content */}
      <div className="col-span-1 lg:col-span-6 space-y-6">
        <div className="mb-4">
          <h2 className="text-2xl font-bold text-white mb-1">Community Feed</h2>
          <p className="text-gray-400 text-xs">New uploads from the network</p>
        </div>

        {loading ? (
          <div className="text-center py-10">Loading feed...</div>
        ) : (
          feedTracks.map((track) => (
            <Card
              key={track.id}
              variant="default"
              className="p-0 overflow-hidden mb-4 border-transparent hover:border-kodo-steel/50"
            >
              <div className="p-4 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden">
                  <img
                    src={track.coverUrl}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <div className="font-bold text-white text-sm">
                    {track.artist}
                  </div>
                  <div className="text-xs text-gray-500">
                    uploaded a new track
                  </div>
                </div>
                <Button variant="ghost" size="sm" className="ml-auto">
                  <MoreHorizontal className="w-4 h-4" />
                </Button>
              </div>

              {/* Track Embed Look */}
              <div className="px-4 pb-4">
                <div
                  className="bg-kodo-ink p-3 rounded-xl flex items-center gap-4 border border-kodo-steel group cursor-pointer"
                  onClick={() => playTrack(track)}
                >
                  <div className="w-16 h-16 rounded overflow-hidden relative">
                    <img
                      src={track.coverUrl}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                      <Play className="w-6 h-6 text-white fill-current" />
                    </div>
                  </div>
                  <div className="flex-1">
                    <h4 className="font-bold text-white">{track.title}</h4>
                    <p className="text-xs text-gray-400">
                      {track.genre || 'Electronic'}
                    </p>
                  </div>
                  <div className="text-xs text-gray-500 font-mono pr-2">
                    {track.duration}
                  </div>
                </div>
              </div>

              <div className="px-4 py-3 border-t border-kodo-steel/30 flex gap-4 text-xs text-gray-400">
                <button className="hover:text-white">
                  Like ({track.like_count})
                </button>
                <button className="hover:text-white">Comment</button>
                <button className="hover:text-white">Share</button>
              </div>
            </Card>
          ))
        )}

        {feedTracks.length === 0 && !loading && (
          <div className="text-center py-20 text-gray-500">
            No recent activity.
          </div>
        )}
      </div>

      {/* Right Sidebar */}
      <div className="hidden lg:block lg:col-span-3 space-y-6">
        <Card variant="manga">
          <h3 className="font-bold text-sm text-gray-300 uppercase tracking-wider mb-4 flex items-center gap-2">
            <Hash className="w-4 h-4 text-kodo-magenta" /> Trending Tags
          </h3>
          <div className="flex flex-wrap gap-2">
            {['#Techno', '#Synthwave', '#NewGear', '#Tutorial'].map((t) => (
              <span
                key={t}
                className="text-xs bg-black/20 px-2 py-1 rounded text-gray-400 cursor-pointer hover:text-white hover:bg-black/40"
              >
                {t}
              </span>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
};
