'use client';

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

import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
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 MasterClipSectionProps {
  contestId: string;
}

export default function MasterClipSection({
  contestId,
}: MasterClipSectionProps) {
  const apiClient = useApiClient();
  const queryClient = useQueryClient();
  const { launchDialog } = useDialogModal();
  const [clipIdInput, setClipIdInput] = useState('');

  // Fetch the master clip using the dedicated endpoint
  const { data: masterClipData } = useQuery({
    queryKey: ['contest-master-clip', contestId],
    queryFn: async () => {
      const { data } = await apiClient.GET(
        '/api/contests/contest/{contest_id}/master_clip',
        {
          params: { path: { contest_id: contestId } },
        }
      );
      return data;
    },
    staleTime: 30_000,
  });

  // Fetch contest data to display base clips list
  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 masterClipId = masterClipData?.clip_id || null;
  const baseClipIds = contestData?.base_clip_ids || [];

  // Set master clip mutation
  const setMasterClipMutation = useMutation({
    mutationFn: async (clipId: string) => {
      const { error } = await apiClient.PUT(
        '/api/contests/contest/{contest_id}/master_clip',
        {
          params: { path: { contest_id: contestId } },
          body: { clip_id: clipId },
        }
      );
      if (error) throw new Error('Failed to set featured clip');
    },
    onSuccess: () => {
      setClipIdInput('');
      queryClient.invalidateQueries({
        queryKey: ['contest-master-clip', contestId],
      });
      queryClient.invalidateQueries({
        queryKey: ['contest-detail', contestId],
      });
      queryClient.invalidateQueries({ queryKey: [ADMIN_CONTESTS_QUERY_KEY] });
      toast({
        title: 'Featured clip set successfully!',
        status: 'success',
        duration: 2500,
        isClosable: true,
      });
    },
    onError: (error) => {
      toast({
        title: 'Failed to set featured clip',
        description: error instanceof Error ? error.message : undefined,
        status: 'error',
        isClosable: true,
      });
    },
  });

  const handleSetMasterClip = async () => {
    const clipId = clipIdInput.trim();

    if (!clipId) {
      toast({
        title: 'Please enter a clip ID',
        status: 'error',
        isClosable: true,
      });
      return;
    }

    // Check if clip is in base clips
    if (!baseClipIds.includes(clipId)) {
      const confirmed = await launchDialog(
        'This clip is not in the base clips list. Are you sure you want to set it as master?',
        [
          { label: 'Cancel', action: false, isCancel: true },
          { label: 'Set as Master', action: true },
        ]
      );

      if (!confirmed) {
        return;
      }
    }

    setMasterClipMutation.mutate(clipId);
  };

  const isLoading = setMasterClipMutation.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'>
        Featured Clip
      </h3>

      {/* Current Master Clip */}
      <div className='mb-6'>
        <div className='mb-3 text-sm font-medium text-foreground-primary'>
          Current Featured Clip
        </div>
        {masterClipId ? (
          <div className='rounded-lg border border-green-500 bg-green-500/10 p-4'>
            <div className='flex items-center justify-between'>
              <div>
                <div className='mb-1 text-xs text-green-700 dark:text-green-400'>
                  FEATURED CLIP
                </div>
                <div className='font-mono text-sm text-green-900 dark:text-green-300'>
                  {masterClipId}
                </div>
              </div>
              <div className='text-2xl'>⭐</div>
            </div>
          </div>
        ) : (
          <div className='rounded-lg border border-border-secondary bg-background-primary p-4 text-center text-sm text-foreground-secondary'>
            No featured clip set
          </div>
        )}
      </div>

      {/* Set Master Clip */}
      <div className='border-t border-border-secondary pt-6'>
        <label
          htmlFor='master_clip_id'
          className='mb-2 block text-sm font-medium text-foreground-primary'
        >
          Set Featured Clip
        </label>
        <div className='flex flex-col gap-3 sm:flex-row'>
          <input
            id='master_clip_id'
            type='text'
            value={clipIdInput}
            onChange={(e) => setClipIdInput(e.target.value)}
            placeholder='Enter clip ID'
            className='flex-1 rounded-lg border border-border-secondary bg-background-primary px-4 py-2.5 font-mono text-sm text-foreground-primary focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none'
            disabled={isLoading}
          />
          <Button
            onClick={handleSetMasterClip}
            disabled={isLoading || !clipIdInput.trim()}
            variant={ButtonVariant.Primary}
            size={ButtonSize.Medium}
          >
            {isLoading ? 'Setting...' : 'Set Featured'}
          </Button>
        </div>
        <p className='mt-2 text-xs text-foreground-secondary'>
          The featured clip is the default clip for remixing in the contest.
        </p>
      </div>

      {/* Available Base Clips Helper */}
      {baseClipIds.length > 0 && (
        <div className='mt-4 border-t border-border-secondary pt-4'>
          <div className='mb-2 text-xs font-medium text-foreground-secondary'>
            Available Base Clips (click to use):
          </div>
          <div className='flex flex-wrap gap-2'>
            {baseClipIds.map((clipId: string) => (
              <Button
                key={clipId}
                onClick={() => setClipIdInput(clipId)}
                variant={ButtonVariant.Secondary}
                size={ButtonSize.Mini}
                className='font-mono text-xs'
              >
                {clipId}
              </Button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}