// src/components/SignInOverlay.jsx
import React from 'react';
import { useAuth } from '../auth/AuthProvider';

export default function SignInOverlay() {
  const { signIn, isLoading, error, clearError } = useAuth();

  return (
    <div className="signin-overlay">
      <div className="signin-card">
        <div className="signin-header">
          <div className="signin-logo">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 2L2 7l10 5 10-5-10-5z"/>
              <path d="M2 17l10 5 10-5"/>
              <path d="M2 12l10 5 10-5"/>
            </svg>
          </div>
          <h1>AdPlatform</h1>
          <p className="signin-subtitle">API Test Harness</p>
        </div>

        <div className="signin-body">
          {error && (
            <div className="signin-error">
              <span>{error}</span>
              <button className="error-dismiss" onClick={clearError}>×</button>
            </div>
          )}

          <p className="signin-message">
            Sign in with your organization account to access the test dashboard.
          </p>

          <button 
            className="signin-button"
            onClick={signIn}
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <span className="signin-spinner" />
                Signing in...
              </>
            ) : (
              <>
                <svg viewBox="0 0 21 21" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
                  <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
                  <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
                  <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
                  <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
                </svg>
                Sign in with Microsoft
              </>
            )}
          </button>
        </div>

        <div className="signin-footer">
          <span>Powered by Azure Entra External ID</span>
        </div>
      </div>
    </div>
  );
}