import React, { useState, type CSSProperties } from 'react';

function App() {
  const [error, setError] = useState<string | null>(null);
  const [isHovering, setIsHovering] = useState(false);

  async function handleFetchConfig() {
    setError(null);
    try {
      const hash = window.location.hash.substring(1).trim();
      const token = decodeURIComponent(hash);
      const response = await fetch('/api/done', {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
      }
    } catch (err: unknown) {
      if (err instanceof Error) {
        setError(err.message);
      } else {
        setError('An unknown error occurred.');
      }
    }
  }

  // Black & yellow theme
  const containerStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    margin: 0,
    background: 'linear-gradient(to bottom, #000000, #1c1c1c)',
    fontFamily: 'Arial, Helvetica, sans-serif',
    color: '#ffd700'
  };

  const cardStyle: CSSProperties = {
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    padding: '2rem',
    borderRadius: '8px',
    textAlign: 'center',
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.7)',
    maxWidth: '600px',
    width: '90%',
    border: '2px solid #ffd700'
  };

  const headingStyle: CSSProperties = {
    marginBottom: '1rem',
    textShadow: '0 0 6px rgba(255, 215, 0, 0.5)',
    fontSize: '2rem'
  };

  const buttonStyle: CSSProperties = {
    cursor: 'pointer',
    marginTop: '1rem',
    padding: '0.75rem 1.5rem',
    fontSize: '1rem',
    borderRadius: '4px',
    border: '2px solid #ffd700',
    backgroundColor: '#000',
    color: '#ffd700',
    transition: 'transform 0.3s, box-shadow 0.3s',
    outline: 'none'
  };

  const buttonHoverStyle: CSSProperties = {
    ...buttonStyle,
    transform: 'scale(1.05)',
    boxShadow: '0 4px 10px rgba(255, 215, 0, 0.4)'
  };

  return (
    <div style={containerStyle}>
      <h1 style={headingStyle}>Spectacular Mochabug Placeholder</h1>
      <div style={cardStyle}>
        <p style={{ marginBottom: '1rem' }}>
          Click below to finalize execution
        </p>
        <button
          style={isHovering ? buttonHoverStyle : buttonStyle}
          onMouseEnter={() => setIsHovering(true)}
          onMouseLeave={() => setIsHovering(false)}
          onClick={handleFetchConfig}
        >
          Done
        </button>

        {error && (
          <p style={{ color: '#ff4c4c', marginTop: '1rem' }}>{error}</p>
        )}
      </div>
    </div>
  );
}

export default App;