// Inloggningsskärm — Nordstar.ai (generisk, Microsoft 365)
const { useState: useLoginState } = React;

function MicrosoftLogo({ className = "w-4 h-4" }) {
  return (
    <svg viewBox="0 0 21 21" className={className} aria-hidden="true">
      <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>
  );
}

function LoginScreen({ onSignIn }) {
  const [loading, setLoading] = useLoginState(false);

  const handleSignIn = () => {
    setLoading(true);
    setTimeout(() => onSignIn(), 1100);
  };

  return (
    <div className="h-screen w-screen flex flex-col bg-zinc-50 overflow-hidden">
      <div className="flex-1 flex flex-col px-8 py-8 lg:px-16 lg:py-10 relative max-w-[640px] w-full mx-auto">
        {/* Centrum: inloggningskort */}
        <div className="flex-1 flex items-center justify-center">
          <div className="w-full max-w-[380px]">
            <div className="flex justify-center mb-9">
              <img src="nordstar-logo.svg" alt="Nordstar.ai" style={{ width: 190 }} className="block"/>
            </div>
            <div className="mb-7">
              <h1 className="text-[28px] font-semibold text-zinc-900 tracking-tight leading-tight">
                Välkommen tillbaka
              </h1>
              <p className="text-[13.5px] text-zinc-500 mt-2 leading-relaxed">
                Logga in på Nordstar.ai med ditt Microsoft 365-konto för att fortsätta till din arbetsyta.
              </p>
            </div>

            {/* Microsoft-knapp */}
            <button
              onClick={handleSignIn}
              disabled={loading}
              className="w-full h-11 rounded-lg border border-zinc-300 bg-white hover:bg-zinc-50 active:bg-zinc-100 transition-colors flex items-center justify-center gap-2.5 text-[14px] font-medium text-zinc-800 disabled:opacity-70 disabled:cursor-not-allowed shadow-[0_1px_2px_0_rgba(15,23,42,0.04)]"
            >
              {loading ? (
                <>
                  <svg className="w-4 h-4 animate-spin text-zinc-500" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" opacity="0.2"/>
                    <path d="M21 12a9 9 0 0 1-9 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                  </svg>
                  Omdirigerar till Microsoft…
                </>
              ) : (
                <>
                  <MicrosoftLogo/>
                  Logga in med Microsoft
                </>
              )}
            </button>

            <p className="text-[11.5px] text-zinc-500 mt-3 text-center leading-relaxed">
              Inloggning sker via din organisations Microsoft 365-konto.
              <br/>
              Saknar du behörighet? <a href="#" className="text-indigo-600 hover:text-indigo-700 font-medium">Kontakta din administratör</a>.
            </p>

            {/* Subtle separator + status */}
            <div className="mt-10 pt-6 border-t border-zinc-200/80 flex items-center justify-between text-[11px] text-zinc-500">
              <span className="flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"/>
                Alla system fungerar normalt
              </span>
              <a href="#" className="hover:text-zinc-700">Statusöversikt</a>
            </div>
          </div>
        </div>

        {/* Botten: legal */}
        <div className="flex items-center justify-between text-[11px] text-zinc-400">
          <span>© 2026 Aethos Technologies Ab Oy</span>
          <div className="flex items-center gap-4">
            <a href="#" className="hover:text-zinc-600">Användarvillkor</a>
            <a href="#" className="hover:text-zinc-600">Integritet</a>
            <a href="#" className="hover:text-zinc-600">Support</a>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;