"use client";

import { useRouter } from "next/navigation";
import { CSSProperties, FormEvent, useState } from "react";
import { useRuntimeBranding } from "@/lib/runtime-branding";
import { BrandLogo } from "./brand-logo";

export function PlatformKeyLogin() {
  const router = useRouter();
  const branding = useRuntimeBranding();
  const [platformKey, setPlatformKey] = useState("");

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    router.replace(`/?platformKey=${encodeURIComponent(platformKey.trim())}`);
  }

  return (
    <main
      className="relative min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,rgba(236,253,245,0.95),rgba(240,253,250,1)_45%,rgba(236,253,245,1)_100%)] px-3 py-3 sm:px-6 sm:py-6 lg:px-8 xl:px-10"
      style={{ "--accent": "#0f9a8a" } as CSSProperties}
    >
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -left-20 top-10 h-72 w-72 rounded-full bg-emerald-100/40 blur-3xl" />
        <div className="absolute right-[-6rem] top-16 h-80 w-80 rounded-full bg-teal-100/35 blur-3xl" />
        <div className="absolute bottom-[-5rem] left-[18%] h-72 w-72 rounded-full bg-white/55 blur-3xl" />
      </div>

      <section className="relative mx-auto grid min-h-[calc(100vh-1.5rem)] w-full max-w-[1320px] overflow-hidden rounded-xl border border-emerald-100/80 bg-white shadow-soft lg:min-h-[680px] lg:grid-cols-[minmax(0,61.8fr)_minmax(0,38.2fr)] xl:min-h-[720px]">
        <aside className="relative flex min-h-[170px] overflow-hidden bg-[linear-gradient(155deg,#0f766e_0%,#0f9a8a_45%,#2dd4bf_100%)] px-5 py-4 text-white sm:min-h-[300px] sm:px-8 sm:py-8 lg:min-h-[680px] lg:items-center lg:px-12 xl:min-h-[720px]">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_18%,rgba(255,255,255,0.14),transparent_24%),radial-gradient(circle_at_82%_18%,rgba(255,255,255,0.12),transparent_28%),radial-gradient(circle_at_55%_78%,rgba(255,255,255,0.10),transparent_24%)]" />
          <div className="relative flex w-full flex-col items-center justify-center text-center lg:min-h-[680px] xl:min-h-[720px]">
            <div className="max-w-[16rem] sm:max-w-sm lg:max-w-md">
              <BrandLogo size="sm" stacked centered subtitle={branding.tagline} dark className="scale-90 sm:scale-100" />
              <p className="mx-auto mt-3 max-w-sm text-sm leading-6 text-emerald-50/88 sm:mt-5 sm:leading-7 sm:text-base">
                Manage tenants, mailboxes, and billing with less friction.
              </p>
            </div>
            <div className="mt-7 sm:mt-10">
              <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-emerald-50/90">
                <span className="h-2 w-2 rounded-full bg-emerald-200" />
                Mint workspace
              </div>
            </div>
          </div>
        </aside>

        <div className="grid min-h-[320px] place-items-center bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,253,251,0.98))] px-4 py-4 sm:min-h-[420px] sm:px-8 sm:py-8 lg:min-h-[680px] lg:px-12 lg:py-12 xl:min-h-[720px]">
          <form onSubmit={submit} className="grid w-full max-w-[392px] gap-5 self-center rounded-xl border border-emerald-100 bg-white p-5 shadow-soft sm:p-8">
            <div className="grid gap-1">
              <h2 className="text-2xl font-black text-slate-950">Platform sign in</h2>
              <p className="text-sm leading-6 text-slate-500">Use the platform key to continue.</p>
            </div>

            <label className="grid gap-2 text-sm font-semibold text-slate-700">
              Platform key
              <input
                autoFocus
                className="field h-12 px-4"
                type="password"
                value={platformKey}
                onChange={(event) => setPlatformKey(event.target.value)}
                placeholder="Enter platform key"
                autoComplete="off"
                spellCheck={false}
                required
              />
            </label>

            <button className="theme-button h-12 w-full" type="submit">
              Open console
            </button>
          </form>
        </div>
      </section>
    </main>
  );
}
