import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { useEffect, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';

const UploadIndicatorWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: rgba(var(--rgb-background-tertiary) / 95);
  color: var(--color-foreground-primary);
  font-size: 14px;
  max-width: 350px;
  backdrop-filter: blur(8px);
`;

const UploadHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const UploadTitle = styled.div`
  font-weight: 600;
  color: var(--color-foreground-primary);
  font-size: 14px;
`;

const UploadSubtext = styled.div`
  font-size: 12px;
  color: var(--color-foreground-secondary);
  margin-top: 0px;
`;

const ProgressBarContainer = styled.div`
  width: 100%;
  height: 4px;
  background-color: var(--color-background-tertiary);
  border-radius: 2px;
  overflow: hidden;
`;

const ProgressBarFill = styled.div<{ progress: number }>`
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-progress-start) 0%,
    var(--color-progress-end) 100%
  );
  border-radius: 2px;
  transition: width 500ms ease-in-out;
  width: ${(props) => props.progress}%;

  --color-progress-start: #ff6b9d;
  --color-progress-end: #ff4081;
`;

const StudioUploadIndicator = observer(() => {
  const { createV2 } = useStores();
  const [barWidth, setBarWidth] = useState(0);
  const uploadStartTimeRef = useRef<number | null>(null);

  // Calculate values for all cases to maintain hook order
  const uploadStatus = createV2.studioUploadStatus;
  const isUploading = uploadStatus?.isUploading || false;
  const uploads = uploadStatus?.uploads || new Map();

  const failedUploads = Array.from(uploads.values()).filter(
    (upload) => upload.status === 'failed'
  );
  const uploadingFiles = Array.from(uploads.values()).filter(
    (upload) => upload.status === 'uploading'
  );

  // Set or maintain the upload start time reference
  useEffect(() => {
    if (isUploading && uploadStartTimeRef.current === null) {
      // Start tracking from when uploads begin
      uploadStartTimeRef.current = Date.now();
    } else if (!isUploading) {
      // Reset when no uploads are active
      uploadStartTimeRef.current = null;
      setBarWidth(0);
    }
  }, [isUploading]);

  // Update progress bar based on elapsed time
  useEffect(() => {
    if (!isUploading || uploadStartTimeRef.current === null) return;

    const interval = setInterval(() => {
      const secondsElapsed = (Date.now() - uploadStartTimeRef.current!) / 1000;
      const progress = 1 - 1 / (1 + secondsElapsed / 10);
      setBarWidth(progress);
    }, 1000);

    return () => clearInterval(interval);
  }, [isUploading]);

  if (!uploadStatus) {
    return null;
  }

  return (
    <div className='space-y-3 px-4 py-2'>
      {/* Show uploading progress card when uploads are in progress */}
      {isUploading && (
        <UploadIndicatorWrapper>
          <UploadHeader>
            <div style={{ flex: 1, minWidth: 0 }}>
              <UploadTitle className='overflow-hidden text-ellipsis whitespace-nowrap'>
                {uploadingFiles.length === 1
                  ? uploadingFiles[0].fileName.length > 20
                    ? uploadingFiles[0].fileName.substring(0, 20) + '...'
                    : uploadingFiles[0].fileName
                  : `${uploadingFiles.length} Files`}
              </UploadTitle>
              <UploadSubtext>Uploading...</UploadSubtext>
            </div>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                flexShrink: 0,
              }}
            >
              <ProgressBarContainer style={{ width: '80px' }}>
                <ProgressBarFill progress={barWidth * 100} />
              </ProgressBarContainer>
              <Button
                variant={ButtonVariant.Secondary}
                size={ButtonSize.Micro}
                shape={ButtonShape.Pill}
                onClick={() => {
                  // Cancel all active uploads
                  uploadingFiles.forEach((upload) => {
                    createV2.cancelStudioUpload(upload.id);
                  });
                }}
              >
                Cancel
              </Button>
            </div>
          </UploadHeader>
        </UploadIndicatorWrapper>
      )}

      {/* Show individual error cards for failed uploads */}
      {failedUploads.map((upload) => (
        <UploadIndicatorWrapper key={upload.id}>
          <UploadHeader>
            <div style={{ flex: 1, minWidth: 0 }}>
              <UploadTitle className='overflow-hidden text-ellipsis whitespace-nowrap'>
                {upload.fileName.length > 20
                  ? upload.fileName.substring(0, 20) + '...'
                  : upload.fileName}
              </UploadTitle>
              <UploadSubtext>Uploading Failed.</UploadSubtext>
            </div>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                flexShrink: 0,
              }}
            >
              <Button
                variant={ButtonVariant.Secondary}
                size={ButtonSize.Micro}
                shape={ButtonShape.Pill}
                onClick={() => createV2.retryStudioUpload(upload.id)}
              >
                Try Again
              </Button>
              <Button
                variant={ButtonVariant.Secondary}
                size={ButtonSize.Micro}
                shape={ButtonShape.Pill}
                onClick={() => createV2.removeStudioUpload(upload.id)}
              >
                Cancel
              </Button>
            </div>
          </UploadHeader>
        </UploadIndicatorWrapper>
      ))}
    </div>
  );
});

export default StudioUploadIndicator;