import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Play, Clock, User, TrendingUp } from 'lucide-react';
import { apiService } from '@/services/api';

interface PlayRecord {
  id: number;
  played_at: string;
  user: {
    id: number;
    name: string;
    email: string;
  } | null;
  sound: {
    id: number;
    name: string;
    filename: string;
    type: string;
  } | null;
}

interface UserStats {
  total_plays: number;
  unique_sounds: number;
  favorite_sound: {
    sound: any;
    play_count: number;
  } | null;
  first_play: string | null;
  last_play: string | null;
}

interface PopularSound {
  sound: any;
  play_count: number;
  last_played: string | null;
}

export function ActivityPage() {
  const [recentPlays, setRecentPlays] = useState<PlayRecord[]>([]);
  const [myStats, setMyStats] = useState<UserStats | null>(null);
  const [popularSounds, setPopularSounds] = useState<PopularSound[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<'recent' | 'mystats' | 'popular'>('recent');

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      setLoading(true);
      await Promise.all([
        fetchRecentPlays(),
        fetchMyStats(),
        fetchPopularSounds(),
      ]);
    } catch (err) {
      console.error('Error fetching activity data:', err);
    } finally {
      setLoading(false);
    }
  };

  const fetchRecentPlays = async () => {
    try {
      const response = await apiService.get('/api/soundboard/history?per_page=20');
      const data = await response.json();
      setRecentPlays(data.plays || []);
    } catch (err) {
      console.error('Error fetching recent plays:', err);
    }
  };

  const fetchMyStats = async () => {
    try {
      const response = await apiService.get('/api/soundboard/my-stats');
      const data = await response.json();
      setMyStats(data);
    } catch (err) {
      console.error('Error fetching my stats:', err);
    }
  };

  const fetchPopularSounds = async () => {
    try {
      const response = await apiService.get('/api/soundboard/popular?limit=10');
      const data = await response.json();
      setPopularSounds(data.popular_sounds || []);
    } catch (err) {
      console.error('Error fetching popular sounds:', err);
    }
  };

  const formatRelativeTime = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return 'Just now';
    if (minutes < 60) return `${minutes}m ago`;
    if (hours < 24) return `${hours}h ago`;
    return `${days}d ago`;
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="text-lg">Loading activity...</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Tab Navigation */}
      <div className="flex space-x-4 border-b">
        <button
          onClick={() => setActiveTab('recent')}
          className={`pb-2 px-1 ${
            activeTab === 'recent'
              ? 'border-b-2 border-blue-500 text-blue-600'
              : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          Recent Activity
        </button>
        <button
          onClick={() => setActiveTab('mystats')}
          className={`pb-2 px-1 ${
            activeTab === 'mystats'
              ? 'border-b-2 border-blue-500 text-blue-600'
              : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          My Statistics
        </button>
        <button
          onClick={() => setActiveTab('popular')}
          className={`pb-2 px-1 ${
            activeTab === 'popular'
              ? 'border-b-2 border-blue-500 text-blue-600'
              : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          Popular Sounds
        </button>
      </div>

      {/* Recent Activity Tab */}
      {activeTab === 'recent' && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Clock className="w-5 h-5" />
              Recent Activity
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentPlays.map((play) => (
                <div key={play.id} className="flex items-center justify-between border-b pb-3">
                  <div className="flex items-center gap-3">
                    <Play className="w-4 h-4 text-blue-500" />
                    <div>
                      <div className="font-medium">
                        {play.sound?.name || 'Unknown Sound'}
                      </div>
                      <div className="text-sm text-muted-foreground">
                        by {play.user?.name || 'Unknown User'}
                      </div>
                    </div>
                  </div>
                  <div className="text-sm text-muted-foreground">
                    {formatRelativeTime(play.played_at)}
                  </div>
                </div>
              ))}
              {recentPlays.length === 0 && (
                <div className="text-center text-muted-foreground py-8">
                  No recent activity found.
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* My Statistics Tab */}
      {activeTab === 'mystats' && myStats && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Plays</CardTitle>
              <Play className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{myStats.total_plays}</div>
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Unique Sounds</CardTitle>
              <User className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{myStats.unique_sounds}</div>
            </CardContent>
          </Card>

          {myStats.favorite_sound && (
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Favorite Sound</CardTitle>
                <TrendingUp className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-sm font-medium">{myStats.favorite_sound.sound.name}</div>
                <div className="text-xs text-muted-foreground">
                  {myStats.favorite_sound.play_count} plays
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      )}

      {/* Popular Sounds Tab */}
      {activeTab === 'popular' && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="w-5 h-5" />
              Popular Sounds
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {popularSounds.map((item, index) => (
                <div key={item.sound.id} className="flex items-center justify-between border-b pb-3">
                  <div className="flex items-center gap-3">
                    <div className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-bold">
                      {index + 1}
                    </div>
                    <div>
                      <div className="font-medium">{item.sound.name}</div>
                      <div className="text-sm text-muted-foreground">
                        {item.play_count} plays
                      </div>
                    </div>
                  </div>
                  {item.last_played && (
                    <div className="text-sm text-muted-foreground">
                      Last: {formatRelativeTime(item.last_played)}
                    </div>
                  )}
                </div>
              ))}
              {popularSounds.length === 0 && (
                <div className="text-center text-muted-foreground py-8">
                  No popular sounds found.
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}