'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 BaseClipsSectionProps {
  contestId: string;
}

export default function BaseClipsSection({ contestId }: BaseClipsSectionProps) {
  const apiClient = useApiClient();
  const queryClient = useQueryClient();
  const { launchDialog } = useDialogModal();
  const [clipIdsInput, setClipIdsInput] = useState('');

  // Fetch contest data to display current base clips
  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 baseClipIds = contestData?.base_clip_ids || [];

  // Add base clips mutation
  const addClipsMutation = useMutation({
    mutationFn: async (clipIds: string[]) => {
      const { error } = await apiClient.POST(
        '/api/contests/contest/{contest_id}/base_clips',
        {
          params: { path: { contest_id: contestId } },
          body: { clip_ids: clipIds },
        }
      );
      if (error) throw new Error('Failed to add base clips');
    },
    onSuccess: () => {
      setClipIdsInput('');
      queryClient.invalidateQueries({
        queryKey: ['contest-detail', contestId],
      });
      queryClient.invalidateQueries({ queryKey: [ADMIN_CONTESTS_QUERY_KEY] });
      toast({
        title: 'Base clips added successfully!',
        status: 'success',
        duration: 2500,
        isClosable: true,
      });
    },
    onError: (error) => {
      toast({
        title: 'Failed to add base clips',
        description: error instanceof Error ? error.message : undefined,
        status: 'error',
        isClosable: true,
      });
    },
  });

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

  const handleAddClips = () => {
    const clipIds = clipIdsInput
      .split(/[\n,]/)
      .map((id) => id.trim())
      .filter((id) => id.length > 0);

    if (clipIds.length === 0) {
      toast({
        title: 'Please enter at least one clip ID',
        status: 'error',
        isClosable: true,
      });
      return;
    }

    addClipsMutation.mutate(clipIds);
  };

  const handleRemoveClip = async (clipId: string) => {
    const confirmed = await launchDialog(
      `Remove clip ${clipId} from base clips?`,
      [
        { label: 'Cancel', action: false, isCancel: true },
        { label: 'Remove', action: true },
      ]
    );

    if (confirmed) {
      removeClipsMutation.mutate([clipId]);
    }
  };

  const isLoading = addClipsMutation.isPending || removeClipsMutation.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'>
        Base Clips Management
      </h3>

      {/* Current Base Clips */}
      <div className='mb-6'>
        <div className='mb-3 text-sm font-medium text-foreground-primary'>
          Current Base Clips ({baseClipIds.length})
        </div>
        {baseClipIds.length === 0 ? (
          <div className='rounded-lg border border-border-secondary bg-background-primary p-4 text-center text-sm text-foreground-secondary'>
            No base clips added yet
          </div>
        ) : (
          <div className='space-y-2'>
            {baseClipIds.map((clipId: string) => (
              <div
                key={clipId}
                className='flex items-center justify-between rounded-lg border border-border-secondary bg-background-primary p-3'
              >
                <div className='font-mono text-sm text-foreground-primary'>
                  {clipId}
                </div>
                <Button
                  onClick={() => handleRemoveClip(clipId)}
                  disabled={isLoading}
                  variant={ButtonVariant.Tertiary}
                  size={ButtonSize.Small}
                  className='text-red-600 dark:text-red-400'
                >
                  Remove
                </Button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Add Base Clips */}
      <div className='border-t border-border-secondary pt-6'>
        <label
          htmlFor='clip_ids'
          className='mb-2 block text-sm font-medium text-foreground-primary'
        >
          Add Base Clips
        </label>
        <textarea
          id='clip_ids'
          rows={4}
          value={clipIdsInput}
          onChange={(e) => setClipIdsInput(e.target.value)}
          placeholder='Enter clip IDs (one per line or comma-separated)&#10;e.g.:&#10;clip-id-1&#10;clip-id-2, clip-id-3'
          className='w-full resize-none 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={handleAddClips}
          disabled={isLoading || !clipIdsInput.trim()}
          variant={ButtonVariant.Primary}
          size={ButtonSize.Medium}
        >
          {isLoading ? 'Processing...' : 'Add Clips'}
        </Button>
      </div>
    </div>
  );
}