import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { buildRemixHrefFromClipId } from '@/components/contest/util';
import Link from '@/components/link/Link';
import { useBreakpointMd } from '@/hooks/useBreakpoint';
import { PlayIcon, PlaylistIcon, RemixIcon } from '@/icons/generated';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { ClipEntity } from '@/state/clipStore';

export type DiscoverContestCardActionsProps = {
  contestId: string;
  contestSlug?: string;
  startTime?: string;
  endTime?: string;
  judgingStart?: string;
  judgingEnd?: string;
  winnersAnnouncedDate?: string;
  winnersPlaylistId?: string;
  submissionsPlaylistId?: string;
  contestClip?: ClipEntity;
  onRemixClick?: () => void;
  onRequirementsClick?: () => void;
  index?: number;
  className?: string;
};

const DiscoverContestCardActions: React.FC<DiscoverContestCardActionsProps> = ({
  contestId,
  contestSlug,
  endTime,
  winnersAnnouncedDate,
  winnersPlaylistId,
  submissionsPlaylistId,
  contestClip,
  onRemixClick,
  onRequirementsClick,
  index,
  className,
}) => {
  const isMobile = !useBreakpointMd();

  // Check if contest is past the end date
  const isContestEnded = endTime ? Date.now() > Date.parse(endTime) : false;

  // Check if winners have been announced
  const isWinnersAnnouncedDatePassed = winnersAnnouncedDate
    ? Date.now() > Date.parse(winnersAnnouncedDate)
    : false;

  // Determine button states
  const hasWinnersPlaylist = Boolean(winnersPlaylistId);

  const handleRemixClick = () => {
    if (onRemixClick) {
      onRemixClick();
    } else if (contestClip?.id) {
      logWebUserEvent({
        actionName: 'DiscoverContestCardRemixClicked',
        principalObjectType: 'contest',
        principalObjectValue: contestId,
        context: {
          contestSlug: contestSlug ?? undefined,
          clipId: contestClip.id,
          clipTitle: contestClip.title,
          index,
        },
      });
    }
  };

  const handleRequirementsClick = () => {
    if (onRequirementsClick) {
      onRequirementsClick();
    } else {
      logWebUserEvent({
        actionName: 'DiscoverContestCardRequirementsClicked',
        principalObjectType: 'contest',
        principalObjectValue: contestId,
        context: {
          contestSlug: contestSlug ?? undefined,
          index,
        },
      });
    }
  };

  // Render different button combinations based on contest state
  const renderButtons = () => {
    // 1. Contest has not ended - show remix and requirements buttons
    if (!isContestEnded) {
      return (
        <>
          {contestClip?.id && (
            <Link href={buildRemixHrefFromClipId(contestClip.id, 'cover')}>
              <Button
                variant={ButtonVariant.Primary}
                size={ButtonSize.Small}
                icon={<RemixIcon className='m-0 h-4 w-4' />}
                shape={ButtonShape.Pill}
                onClick={handleRemixClick}
                contentClassName='gap-[4px] leading-[16px]'
              >
                Remix
              </Button>
            </Link>
          )}
          {contestSlug && (
            <Link href={`/collab/${contestSlug}`}>
              <Button
                variant={ButtonVariant.Secondary}
                size={ButtonSize.Small}
                shape={ButtonShape.Pill}
                onClick={handleRequirementsClick}
                contentClassName='gap-[4px] leading-[16px]'
              >
                {isMobile ? 'Rules' : 'Requirements'}
              </Button>
            </Link>
          )}
        </>
      );
    }

    // 2. Contest ended but winners not announced OR winners announced but no playlist
    if (
      isContestEnded &&
      (!isWinnersAnnouncedDatePassed || !hasWinnersPlaylist)
    ) {
      return (
        <>
          {submissionsPlaylistId && (
            <Link href={`/playlist/${submissionsPlaylistId}`}>
              <Button
                variant={ButtonVariant.Primary}
                size={ButtonSize.Small}
                shape={ButtonShape.Pill}
                icon={
                  isMobile ? undefined : (
                    <PlaylistIcon className='m-0 h-4 w-4' />
                  )
                }
                onClick={() => {
                  // Handle remixes button click - navigates to submissions playlist
                  logWebUserEvent({
                    actionName: 'DiscoverContestCardRemixesClicked',
                    principalObjectType: 'contest',
                    principalObjectValue: contestId,
                    context: {
                      contestSlug: contestSlug ?? undefined,
                      clipId: contestClip?.id,
                      clipTitle: contestClip?.title,
                      submissionsPlaylistId,
                      index,
                    },
                  });
                }}
                contentClassName='gap-[4px] leading-[16px]'
              >
                Remixes
              </Button>
            </Link>
          )}
          {contestSlug && (
            <Link href={`/collab/${contestSlug}`}>
              <Button
                variant={ButtonVariant.Secondary}
                size={ButtonSize.Small}
                shape={ButtonShape.Pill}
                onClick={handleRequirementsClick}
                contentClassName='gap-[4px] leading-[16px]'
              >
                {isMobile ? 'Contest' : 'Contest Page'}
              </Button>
            </Link>
          )}
        </>
      );
    }

    // 3. Winners announced and playlist exists - show play icon only + playlist button
    if (isWinnersAnnouncedDatePassed && hasWinnersPlaylist) {
      return (
        <>
          <Link href={`/playlist/${winnersPlaylistId}`}>
            <Button
              variant={ButtonVariant.Primary}
              size={ButtonSize.Small}
              icon={PlayIcon}
              shape={ButtonShape.Pill}
              onClick={() => {
                // Handle play winners playlist
                logWebUserEvent({
                  actionName: 'DiscoverContestCardPlayClicked',
                  principalObjectType: 'contest',
                  principalObjectValue: contestId,
                  context: {
                    contestSlug: contestSlug ?? undefined,
                    winnersPlaylistId: winnersPlaylistId ?? undefined,
                    index,
                  },
                });
              }}
              contentClassName='gap-[4px] leading-[16px]'
              className='h-[32px] w-[32px] px-[8px] py-[4px]'
            />
          </Link>
          <Link href={`/playlist/${winnersPlaylistId}`}>
            <Button
              variant={ButtonVariant.Secondary}
              size={ButtonSize.Small}
              shape={ButtonShape.Pill}
              onClick={() => {
                // Handle playlist button click
                logWebUserEvent({
                  actionName: 'DiscoverContestCardPlaylistClicked',
                  principalObjectType: 'contest',
                  principalObjectValue: contestId,
                  context: {
                    contestSlug: contestSlug ?? undefined,
                    winnersPlaylistId: winnersPlaylistId ?? undefined,
                    index,
                  },
                });
              }}
              contentClassName='gap-[4px] leading-[16px]'
            >
              Playlist
            </Button>
          </Link>
        </>
      );
    }

    return null;
  };

  return (
    <div className={`mt-3 flex gap-2 ${className || ''}`}>
      {renderButtons()}
    </div>
  );
};

export default DiscoverContestCardActions;