// Copyright 2017-2026 @pezkuwi/apps authors & contributors
// SPDX-License-Identifier: Apache-2.0

import React, { useMemo } from 'react';
import { KurdistanSun, styled } from '@pezkuwi/react-components';
import { useQueue } from '@pezkuwi/react-hooks';

function TransactionOverlay (): React.ReactElement | null {
  const { txqueue } = useQueue();

  const isProcessing = useMemo(() => 
    txqueue.some((tx) => ['sending', 'queued', 'signing'].includes(tx.status)),
    [txqueue]
  );

  if (!isProcessing) {
    return null;
  }

  return (
    <StyledOverlay>
      <div className='overlay-content'>
        <KurdistanSun size={300} />
        <div className='message'>
          <h2>Processing Transaction</h2>
          <p>Please wait while the Kurdistan Sun secures your transaction on the Pezkuwi Blockchain.</p>
        </div>
      </div>
    </StyledOverlay>
  );
}

const StyledOverlay = styled.div`
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.3s ease-out;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
    color: white;
  }

  .message {
    h2 {
      color: #ffed00; /* Kurdistan Yellow */
      font-size: 2.5rem;
      margin: 0;
      text-shadow: 0 0 15px rgba(255, 237, 0, 0.4);
    }

    p {
      color: #9ca3af;
      font-size: 1.2rem;
      margin-top: 0.5rem;
      max-width: 450px;
    }
  }
`;

export default React.memo(TransactionOverlay);
