'use client';

import React, { useEffect, useMemo, useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import {
  TimeLeft,
  dateLabel,
  getTimeLeft,
  rangeLabel,
} from '@/components/contest/util';
import { redirectToRemixFromClipId } from '@/components/contest/util';
import { RemixIcon } from '@/icons/generated';
import logWebUserEvent from '@/logging/logWebUserEvent';

export type SubmissionCountdownProps = {
  start?: string; // submissions start ISO
  end?: string; // submissions end ISO
  judgingStart?: string; // judging start ISO
  judgingEnd?: string; // judging end ISO
  winnersDate?: string; // winners announced ISO
  className?: string;
  clipId?: string;
  contestId?: string;
  contestSlug?: string;
  primaryCTA?: React.ReactNode;
};

const SubmissionCountdown: React.FC<SubmissionCountdownProps> = ({
  start,
  end,
  judgingStart,
  judgingEnd,
  winnersDate,
  className,
  clipId,
  contestId,
  contestSlug,
  primaryCTA,
}) => {
  const startMs = useMemo(() => Date.parse(start ?? ''), [start]);
  const endMs = useMemo(() => Date.parse(end ?? ''), [end]);
  const judgingStartMs = useMemo(
    () => Date.parse(judgingStart ?? ''),
    [judgingStart]
  );
  const judgingEndMs = useMemo(
    () => Date.parse(judgingEnd ?? ''),
    [judgingEnd]
  );
  const winnersMs = useMemo(() => Date.parse(winnersDate ?? ''), [winnersDate]);

  const now = Date.now();
  const isBeforeSubmissions =
    Number.isFinite(startMs) && now < (startMs as number);
  const isSubmissionsActive =
    Number.isFinite(startMs) &&
    Number.isFinite(endMs) &&
    now >= (startMs as number) &&
    now <= (endMs as number);
  const isJudgingActive =
    Number.isFinite(judgingStartMs) &&
    Number.isFinite(judgingEndMs) &&
    now >= (judgingStartMs as number) &&
    now <= (judgingEndMs as number);
  const isWinnersActive =
    Number.isFinite(winnersMs) && now >= (winnersMs as number); // treat from announcement onward as active

  const getTimeLeftTo = (target?: number) =>
    getTimeLeft(
      (Number.isFinite(target) ? (target as number) : now) - Date.now()
    );

  const [timeLeft, setTimeLeft] = useState<TimeLeft>(() => {
    const target = isBeforeSubmissions
      ? (startMs as number)
      : isSubmissionsActive
        ? (endMs as number)
        : undefined;
    return getTimeLeftTo(target);
  });

  useEffect(() => {
    if (!isSubmissionsActive && !isBeforeSubmissions) return;
    const target = isBeforeSubmissions
      ? (startMs as number)
      : (endMs as number);
    setTimeLeft(getTimeLeftTo(target));
    const id = setInterval(() => {
      setTimeLeft(getTimeLeftTo(target));
    }, 1000);
    return () => clearInterval(id);
  }, [startMs, endMs, isSubmissionsActive, isBeforeSubmissions]);

  const submissionsRange = useMemo(
    () => rangeLabel(startMs, endMs),
    [startMs, endMs]
  );
  const judgingRange = useMemo(
    () => rangeLabel(judgingStartMs, judgingEndMs),
    [judgingStartMs, judgingEndMs]
  );
  const winnersLabel = useMemo(() => dateLabel(winnersMs), [winnersMs]);

  const hasJudgingDates = useMemo(
    () => Number.isFinite(judgingStartMs) && Number.isFinite(judgingEndMs),
    [judgingStartMs, judgingEndMs]
  );
  const hasWinnersDate = useMemo(() => Number.isFinite(winnersMs), [winnersMs]);

  return (
    // Hidden on mobile, visible on desktop; sits beside CTA/FAQ
    <div
      className={`hidden w-full md:flex md:flex-col md:gap-[12px] ${className ?? ''}`}
    >
      {(isBeforeSubmissions || isSubmissionsActive) && (
        <div className='flex w-full items-center justify-center rounded-2xl bg-background-secondary p-5'>
          <div className='mt-0 flex w-full flex-row text-center'>
            <div className='flex-1'>
              <div className='text-[28px] leading-[32px] font-normal text-foreground-primary not-italic'>
                {timeLeft.days}
              </div>
              <div className='mt-1 text-[8px] leading-[12px] font-medium text-foreground-inactive uppercase not-italic'>
                Days
              </div>
            </div>
            <div className='flex-1'>
              <div className='text-[32px] leading-none text-foreground-primary'>
                {timeLeft.hours}
              </div>
              <div className='mt-1 text-[8px] leading-[12px] font-medium text-foreground-inactive uppercase not-italic'>
                Hours
              </div>
            </div>
            <div className='flex-1'>
              <div className='text-[32px] leading-none text-foreground-primary'>
                {timeLeft.minutes}
              </div>
              <div className='mt-1 text-[8px] leading-[12px] font-medium text-foreground-inactive uppercase not-italic'>
                Minutes
              </div>
            </div>
            <div className='flex-1'>
              <div className='text-[32px] leading-none text-foreground-primary'>
                {timeLeft.seconds}
              </div>
              <div className='mt-1 text-[8px] leading-[12px] font-medium text-foreground-inactive uppercase not-italic'>
                Sec
              </div>
            </div>
          </div>
        </div>
      )}

      <div
        className={`rounded-2xl bg-background-secondary p-5 ${isSubmissionsActive ? 'opacity-100' : 'opacity-50'}`}
      >
        <div className='text-[14px] leading-[18px] font-semibold tracking-[0.28px] text-foreground-primary not-italic'>
          Submissions
        </div>
        <div className='mt-[8px] text-[14px] leading-[22px] font-normal tracking-[0.28px] text-foreground-primary not-italic'>
          {submissionsRange}
        </div>
      </div>

      {hasJudgingDates && (
        <div
          className={`rounded-2xl bg-background-secondary p-5 ${isJudgingActive ? 'opacity-100' : 'opacity-50'}`}
        >
          <div className='text-[14px] leading-[18px] font-semibold tracking-[0.28px] text-foreground-primary not-italic'>
            Judging
          </div>
          <div className='mt-[8px] text-[14px] leading-[22px] font-normal tracking-[0.28px] text-foreground-primary not-italic'>
            {judgingRange}
          </div>
        </div>
      )}

      {hasWinnersDate && (
        <div
          className={`rounded-2xl bg-background-secondary p-5 ${isWinnersActive ? 'opacity-100' : 'opacity-50'}`}
        >
          <div className='text-[14px] leading-[18px] font-semibold tracking-[0.28px] text-foreground-primary not-italic'>
            Winners Announced
          </div>
          <div className='mt-[8px] text-[14px] leading-[22px] font-normal tracking-[0.28px] text-foreground-primary not-italic'>
            {winnersLabel}
          </div>
        </div>
      )}

      <div className='mt-0'>
        {primaryCTA ? (
          primaryCTA
        ) : clipId ? (
          <Button
            variant={ButtonVariant.Primary}
            size={ButtonSize.Small}
            shape={ButtonShape.Pill}
            iconStart={<RemixIcon />}
            className='w-full'
            onClick={() => {
              if (contestId) {
                logWebUserEvent({
                  actionName: 'ContestLandingRemixCtaClicked',
                  context: {
                    contestId,
                    contestSlug: contestSlug ?? undefined,
                    source: 'countdown',
                    clipId,
                  },
                });
              }
              // Use imperative redirect to aid iOS deep-linking
              redirectToRemixFromClipId(clipId);
            }}
          >
            Create Your Own Remix
          </Button>
        ) : null}
      </div>
    </div>
  );
};

export default SubmissionCountdown;