'use client';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';

import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
import Link from '@/components/link/Link';
import { useDialogModal } from '@/components/modal/DialogModal';
import { toast } from '@/components/toast/Toast';
import { useApiClient } from '@/lib/apiClient';

import { ADMIN_CONTESTS_QUERY_KEY } from '../../ContestManagementClient';

interface WinnersPlaylistSectionProps {
  contestId: string;
}

export default function WinnersPlaylistSection({
  contestId,
}: WinnersPlaylistSectionProps) {
  const apiClient = useApiClient();
  const queryClient = useQueryClient();
  const { launchDialog } = useDialogModal();
  const [playlistIdInput, setPlaylistIdInput] = useState('');

  // Fetch contest data to get current winners playlist
  const { data: contestData } = useQuery({
    queryKey: ['contest-detail', contestId],
    queryFn: async () => {
      const { data } = await apiClient.GET(
        '/api/contests/contest/{contest_id}',
        {
          params: { path: { contest_id: contestId } },
        }
      );
      return data;
    },
    staleTime: 30_000,
  });

  const winnersPlaylistId = contestData?.winners_playlist_id || null;

  // Set winners playlist mutation
  const setWinnersPlaylistMutation = useMutation({
    mutationFn: async (playlistId: string) => {
      const { error } = await apiClient.PUT(
        '/api/contests/contest/{contest_id}/winners_playlist',
        {
          params: { path: { contest_id: contestId } },
          body: { playlist_id: playlistId },
        }
      );
      if (error)
        throw new Error(error.detail || 'Failed to set winners playlist');
    },
    onSuccess: () => {
      setPlaylistIdInput('');
      queryClient.invalidateQueries({
        queryKey: ['contest-detail', contestId],
      });
      queryClient.invalidateQueries({ queryKey: [ADMIN_CONTESTS_QUERY_KEY] });
      toast({
        title: 'Winners playlist set successfully!',
        status: 'success',
        duration: 2500,
        isClosable: true,
      });
    },
    onError: (error) => {
      toast({
        title: 'Failed to set winners playlist',
        description: error instanceof Error ? error.message : undefined,
        status: 'error',
        isClosable: true,
      });
    },
  });

  // Remove winners playlist mutation
  const removeWinnersPlaylistMutation = useMutation({
    mutationFn: async () => {
      const { error } = await apiClient.DELETE(
        '/api/contests/contest/{contest_id}/winners_playlist',
        {
          params: { path: { contest_id: contestId } },
        }
      );
      if (error)
        throw new Error(error.detail || 'Failed to remove winners playlist');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ['contest-detail', contestId],
      });
      queryClient.invalidateQueries({ queryKey: [ADMIN_CONTESTS_QUERY_KEY] });
      toast({
        title: 'Winners playlist removed successfully!',
        status: 'success',
        duration: 2500,
        isClosable: true,
      });
    },
    onError: (error) => {
      toast({
        title: 'Failed to remove winners playlist',
        description: error instanceof Error ? error.message : undefined,
        status: 'error',
        isClosable: true,
      });
    },
  });

  const handleSetWinnersPlaylist = async () => {
    let playlistId = playlistIdInput.trim();

    if (!playlistId) {
      toast({
        title: 'Please enter a playlist URL or ID',
        status: 'error',
        isClosable: true,
      });
      return;
    }

    // Extract playlist ID from URL if a URL is provided
    // Supports formats like: /playlist/{id}, https://suno.com/playlist/{id}, etc.
    if (playlistId.includes('/playlist/')) {
      const match = playlistId.match(/\/playlist\/([^/?&#]+)/);
      if (match && match[1]) {
        playlistId = match[1].trim();
      } else {
        toast({
          title: 'Invalid playlist URL format',
          description: 'Could not extract playlist ID from URL',
          status: 'error',
          isClosable: true,
        });
        return;
      }
    }

    // Validate that we have a non-empty playlist ID after extraction
    if (!playlistId) {
      toast({
        title: 'Invalid playlist ID',
        description: 'Please enter a valid playlist URL or ID',
        status: 'error',
        isClosable: true,
      });
      return;
    }

    setWinnersPlaylistMutation.mutate(playlistId);
  };

  const handleRemoveWinnersPlaylist = async () => {
    const confirmed = await launchDialog(
      'Are you sure you want to remove the winners playlist?',
      [
        { label: 'Cancel', action: false, isCancel: true },
        { label: 'Remove', action: true },
      ]
    );

    if (!confirmed) {
      return;
    }

    removeWinnersPlaylistMutation.mutate();
  };

  const isLoading =
    setWinnersPlaylistMutation.isPending ||
    removeWinnersPlaylistMutation.isPending;

  return (
    <div className='rounded-lg border border-border-primary bg-background-secondary p-6'>
      <h3 className='mb-4 text-lg font-semibold text-foreground-primary'>
        Winners Playlist
      </h3>

      {/* Current Winners Playlist */}
      <div className='mb-6'>
        <div className='mb-3 text-sm font-medium text-foreground-primary'>
          Current Winners Playlist
        </div>
        {winnersPlaylistId ? (
          <div className='rounded-lg border border-border-secondary bg-background-primary p-4'>
            <div className='flex items-center justify-between'>
              <div>
                <div className='mb-1 text-xs text-foreground-secondary'>
                  WINNERS PLAYLIST
                </div>
                <div className='font-mono text-sm text-foreground-primary'>
                  {winnersPlaylistId}
                </div>
              </div>
              <div className='flex items-center gap-2'>
                <Link
                  href={`/playlist/${winnersPlaylistId}`}
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  <Button
                    variant={ButtonVariant.Secondary}
                    size={ButtonSize.Small}
                  >
                    View →
                  </Button>
                </Link>
                <Button
                  variant={ButtonVariant.Tertiary}
                  size={ButtonSize.Small}
                  onClick={handleRemoveWinnersPlaylist}
                  disabled={isLoading}
                >
                  Remove
                </Button>
              </div>
            </div>
          </div>
        ) : (
          <div className='rounded-lg border border-border-secondary bg-background-primary p-4 text-center text-sm text-foreground-secondary'>
            No winners playlist set
          </div>
        )}
      </div>

      {/* Set Winners Playlist */}
      <div className='border-t border-border-secondary pt-6'>
        <label
          htmlFor='winners-playlist-input'
          className='mb-2 block text-sm font-medium text-foreground-primary'
        >
          Set Winners Playlist
        </label>
        <div className='flex flex-col gap-3 sm:flex-row'>
          <input
            id='winners-playlist-input'
            type='text'
            value={playlistIdInput}
            onChange={(e) => setPlaylistIdInput(e.target.value)}
            placeholder='Enter playlist URL or ID'
            className='focus:border-border-focus focus:ring-border-focus flex-1 rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 font-mono text-sm text-foreground-primary focus:ring-1 focus:outline-none'
            disabled={isLoading}
          />
          <Button
            onClick={handleSetWinnersPlaylist}
            disabled={isLoading || !playlistIdInput.trim()}
            variant={ButtonVariant.Primary}
            size={ButtonSize.Medium}
          >
            {isLoading ? 'Setting...' : 'Set Playlist'}
          </Button>
        </div>
        <p className='mt-2 text-xs text-foreground-secondary'>
          Enter the playlist URL or ID for the contest winners. You can paste a
          full URL or just the playlist ID.
        </p>
      </div>
    </div>
  );
}