'use client';

import {
  Button,
  Input,
  Progress,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
} from '@chakra-ui/react';
import { useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';

import CustomButton, {
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { toast } from '@/components/toast/Toast';
import CopyIcon from '@/icons/generated/CopyIcon';
import { useApiClient } from '@/lib/apiClient';

type DescriptionResponse = {
  clip_id: string;
  description: {
    description: string;
    transcription: string;
    genre_summary: string;
  };
};

const DescribeClipClient = () => {
  const [clipId, setClipId] = useState('');
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [descriptionData, setDescriptionData] =
    useState<DescriptionResponse | null>(null);
  const apiClient = useApiClient();
  const searchParams = useSearchParams();

  const handleFetchDescriptions = async () => {
    setLoading(true);
    setProgress(0);

    try {
      const { data, error } = await apiClient.POST(
        '/api/generate/{clip_id}/describe',
        {
          params: { path: { clip_id: clipId } },
        }
      );

      if (error) {
        throw new Error('Error fetching descriptions');
      }

      // Handle the new response format
      if (data && data.description) {
        setDescriptionData(data as DescriptionResponse);
      } else {
        throw new Error('Invalid response format');
      }
    } catch (error) {
      console.error('Error fetching descriptions:', error);
      toast({
        title: 'Error',
        description: 'Failed to fetch descriptions.',
        status: 'error',
        duration: 4000,
        isClosable: true,
      });
    } finally {
      setLoading(false);
    }
  };

  const handleCopyToClipboard = (text: string, label: string) => {
    navigator.clipboard.writeText(text);
    toast({
      title: 'Copied!',
      description: `${label} copied to clipboard.`,
      status: 'success',
      duration: 2000,
      isClosable: true,
    });
  };

  useEffect(() => {
    const clipId = searchParams.get('clipId');
    if (clipId) {
      setClipId(clipId);
    }
  }, [searchParams]);

  useEffect(() => {
    if (loading) {
      const interval = setInterval(() => {
        setProgress((oldProgress) => {
          if (oldProgress === 100) {
            clearInterval(interval);
            return 100;
          }
          return Math.min(oldProgress + 10, 100);
        });
      }, 5000);
      return () => clearInterval(interval);
    }
  }, [loading]);

  return (
    <div>
      <h1 className='mt-[32px] mb-[24px] ml-[36px] text-[24px] font-semibold tracking-[-0.18px] text-foreground-primary'>
        Describe Clip
      </h1>
      <div className='mx-[32px] mt-[16px] flex w-full items-center justify-between'>
        <Input
          type='text'
          id='clipId'
          value={clipId}
          onChange={(e) => setClipId(e.target.value)}
          placeholder='Paste clip ID here'
          className='mr-[16px] grow'
        />
        <Button
          onClick={handleFetchDescriptions}
          disabled={loading}
          className='w-[300px] rounded-md bg-blue-500 px-6 py-2 text-white hover:bg-blue-600 disabled:bg-blue-300'
        >
          {loading ? 'Loading...' : 'Describe Clip'}
        </Button>
      </div>
      {loading && (
        <Progress
          value={progress}
          size='xs'
          isIndeterminate
          className='mx-[32px] mt-[16px] w-full'
        />
      )}
      {descriptionData && (
        <div className='mt-[24px] w-full px-[32px]'>
          <div className='mb-4 text-sm text-gray-600'>
            Clip ID: {descriptionData.clip_id}
          </div>
          <Tabs>
            <TabList className='flex w-full'>
              <Tab className='grow text-center'>Description</Tab>
              <Tab className='grow text-center'>Transcription</Tab>
              <Tab className='grow text-center'>Genre Summary</Tab>
            </TabList>
            <TabPanels>
              <TabPanel>
                <div className='mb-3 flex items-start justify-between'>
                  <h3 className='text-sm font-medium text-foreground-secondary'>
                    Description
                  </h3>
                  <CustomButton
                    onClick={() =>
                      handleCopyToClipboard(
                        descriptionData.description.description || '',
                        'Description'
                      )
                    }
                    variant={ButtonVariant.Tertiary}
                    size={ButtonSize.Small}
                    icon={CopyIcon}
                    iconOnly
                    title='Copy description'
                  />
                </div>
                <div className='text-sm whitespace-pre-wrap text-foreground-primary'>
                  {descriptionData.description.description ||
                    'No description available'}
                </div>
              </TabPanel>
              <TabPanel>
                <div className='mb-3 flex items-start justify-between'>
                  <h3 className='text-sm font-medium text-foreground-secondary'>
                    Transcription
                  </h3>
                  <CustomButton
                    onClick={() =>
                      handleCopyToClipboard(
                        descriptionData.description.transcription || '',
                        'Transcription'
                      )
                    }
                    variant={ButtonVariant.Tertiary}
                    size={ButtonSize.Small}
                    icon={CopyIcon}
                    iconOnly
                    title='Copy transcription'
                  />
                </div>
                <div className='text-sm whitespace-pre-wrap text-foreground-primary'>
                  {descriptionData.description.transcription ||
                    'No transcription available'}
                </div>
              </TabPanel>
              <TabPanel>
                <div className='mb-3 flex items-start justify-between'>
                  <h3 className='text-sm font-medium text-foreground-secondary'>
                    Genre Summary
                  </h3>
                  <CustomButton
                    onClick={() =>
                      handleCopyToClipboard(
                        descriptionData.description.genre_summary || '',
                        'Genre Summary'
                      )
                    }
                    variant={ButtonVariant.Tertiary}
                    size={ButtonSize.Small}
                    icon={CopyIcon}
                    iconOnly
                    title='Copy genre summary'
                  />
                </div>
                <div className='text-sm whitespace-pre-wrap text-foreground-primary'>
                  {descriptionData.description.genre_summary ||
                    'No genre summary available'}
                </div>
              </TabPanel>
            </TabPanels>
          </Tabs>
        </div>
      )}
    </div>
  );
};

export default DescribeClipClient;