'use client';

import { useLeaderboard } from '@/lib/hooks/use-leaderboard';
import { cn } from '@/lib/utils';
import { useMemo, useState } from 'react';
import AvatarComponent from './Avatar';
import Select from './Select';
import { type ScoreEvent } from '@/lib/leaderboard';
import useSWRSubscription, { type SWRSubscription } from 'swr/subscription';
import { useGroups } from '@/lib/hooks/use-groups';

const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];

export default function Leaderboard({ token }: { token: string }) {
  // const { data, isLoading } = useLeaderboard({ token });

  const CHAPITRE_EVENT = 3;

  const subscription: SWRSubscription<string, ScoreEvent, Error> = (key, { next }) => {
    const socket = new WebSocket(key);

    socket.addEventListener('message', (event) => {
      next(null, JSON.parse(event.data));
    });

    socket.addEventListener('error', (event) => {
      console.error(event);
    });

    return () => socket.close();
  };

  const { data } = useSWRSubscription(
    `wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard${CHAPITRE_EVENT}`,
    subscription
  );

  const [filter, setFilter] = useState('');

  let options = [] as { value: string; title: string }[];

  const { data: groups } = useGroups({ token });

  console.log(groups);

  if (groups) {
    options = groups
      .filter((group) => group.chapter === null)
      .map((group) => ({ value: group.name, title: group.name }))
      .filter((group, index, self) => self.findIndex((g) => g.value === group.value) === index)
      .sort((a, b) => a.title.localeCompare(b.title));

    options.unshift({ value: '', title: 'Tous' });
  }

  const filteredData = useMemo(() => {
    if (filter) {
      return data?.groups.filter((group) => group.name === filter);
    }
    return data;
  }, [data, filter]);

  return (
    <section className="flex h-full w-full flex-col space-y-4">
      <header className="sticky flex items-center justify-between">
        <div className="flex flex-col">
          <h1 className="text-xl font-semibold">Tableau des scores</h1>
          <p className="text-muted">Suivez la progression des élèves en direct</p>
        </div>
        {/* {(filteredData && (
          <Select
            className="w-32"
            options={options || []}
            value={filter}
            onChange={(event) => setFilter(event.target.value)}
          />
        )) || (
          <span
            className="inline-block h-12 w-32 animate-pulse rounded-lg bg-primary-600"
            style={{
              animationDuration: '1s'
            }}
          />
        )} */}
      </header>
      <main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
        <ul className="flex flex-col space-y-2">
          {data?.groups.map((group, key) => (
            <li key={key} className="flex justify-between space-x-2">
              <div className="flex items-center space-x-4">
                <span className={cn('font-semibold', SCORE_COLORS[group.rank - 1])}>
                  {group.rank}
                </span>
                <div className="flex items-center space-x-2">
                  <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
                    <span className="text-lg">{group.name}</span>
                    <span className="text-sm text-muted">
                      {group.players && group.players.length > 1
                        ? group.players
                            .map((player) => player.pseudo || 'Anonyme')
                            .sort((a, b) => a.localeCompare(b))
                            .join(', ')
                        : group.players[0].pseudo}
                    </span>
                  </div>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <div className="flex flex-col">
                  <span className="text-sm font-semibold">Essaies</span>
                  <span className="text-lg text-muted">
                    {group.players.reduce((a, b) => a + b.tries, 0)}
                  </span>
                </div>
                {/* <div className="flex flex-col">
                  <span className="text-sm font-semibold">Puzzles</span>
                  <span className="text-lg text-muted">
                    {group.players.reduce((a, b) => a + b.completion, 0)}
                  </span>
                </div> */}
                <div className="flex flex-col">
                  <span className="text-sm font-semibold">Score</span>
                  <span className="text-lg text-muted">
                    {group.players.reduce((a, b) => a + b.score, 0)}
                  </span>
                </div>
              </div>
            </li>
          )) ||
            [...Array(20).keys()].map((i) => (
              <span
                key={i}
                className="inline-block h-12 animate-pulse rounded-lg bg-primary-600"
                style={{
                  animationDelay: `${i * 0.05}s`,
                  animationDuration: '1s'
                }}
              />
            ))}
        </ul>
      </main>
    </section>
  );
}