"use client";

import { Settings2, X } from "lucide-react";
import { useState } from "react";
import { ROLES } from "@/lib/constants";
import { Card } from "@/components/ui/card";
import { LocalAccessForm } from "@/components/forms/local-access-form";

type LocalAccessShellProps = {
  scopes: string[];
  error: string | null;
  nextPath?: string;
};

export function LocalAccessShell({ scopes, error, nextPath }: LocalAccessShellProps) {
  const [role, setRole] = useState<"admin" | "affiliate">(ROLES.affiliate);
  const [scope, setScope] = useState(scopes[0] ?? "");
  const showAdminAccess = role === ROLES.admin;

  return (
    <main className="relative min-h-screen overflow-hidden">
      <div className="absolute inset-0 grid grid-cols-1 lg:grid-cols-2">
        <section className="login-blue-surface">
          <div className="login-blue-sweep" />
          <div className="login-blue-detail" />
        </section>
        <section className="bg-[linear-gradient(180deg,#f8fbff_0%,#eef4fb_100%)]" />
      </div>

      <div className="pointer-events-none absolute right-6 top-6 z-20">
        <button
          type="button"
          aria-label={showAdminAccess ? "Close admin access" : "Open admin access"}
          onClick={() => setRole(showAdminAccess ? ROLES.affiliate : ROLES.admin)}
          className="pointer-events-auto inline-flex h-12 w-12 items-center justify-center rounded-full border border-[#cddbed] bg-white/92 text-[#255896] shadow-[0_14px_30px_-20px_rgba(15,23,42,0.3)] backdrop-blur-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2663AC] focus-visible:ring-offset-2"
        >
          {showAdminAccess ? <X className="h-4.5 w-4.5" /> : <Settings2 className="h-4.5 w-4.5" />}
        </button>
      </div>

      <div className="relative z-10 mx-auto flex min-h-screen max-w-7xl items-center justify-center p-4 sm:p-6">
        <Card className="grid w-full max-w-[1120px] overflow-hidden rounded-[2rem] border border-white/55 bg-white/96 shadow-[0_30px_70px_-42px_rgba(15,23,42,0.22),0_12px_24px_-18px_rgba(15,23,42,0.08)] backdrop-blur-[2px] lg:grid-cols-[420px_minmax(0,1fr)]">
          <section className="login-blue-panel px-8 py-9 text-white sm:px-10 sm:py-10 lg:px-12 lg:py-12">
            <div className="login-blue-sweep" />
            <div className="login-blue-detail" />
            <div className="absolute inset-y-0 right-0 w-px bg-white/8" />
            <div className="absolute bottom-0 left-0 right-0 h-44 bg-[linear-gradient(180deg,transparent_0%,rgba(7,22,42,0.22)_100%)]" />
            <div className="relative z-10 flex h-full min-h-[220px] flex-col justify-between lg:min-h-[520px]">
              <div>
                <h1 className="mt-8 max-w-sm text-[3rem] font-black leading-[0.92] tracking-[-0.055em] sm:text-[3.35rem] lg:text-[3.95rem]">
                  Otsuka
                  <br />
                  Dashboards
                </h1>

                <p className="mt-5 max-w-[15rem] text-[15px] leading-7 text-blue-50/68">
                  Sign in for affiliate dashboards.
                </p>
              </div>

              <div />
            </div>
          </section>

          <section className="relative bg-[linear-gradient(180deg,#ffffff_0%,#fbfdff_100%)] px-8 py-9 sm:px-10 sm:py-10 lg:px-12 lg:py-12">
            <div className="absolute inset-x-0 top-0 h-px bg-white/70" />
            <div className="mx-auto w-full max-w-[36rem]">
              <p className="caption text-[11px] uppercase tracking-[0.18em] text-[#2663AC]">Sign In</p>

              <h2 className="mt-4 max-w-[30rem] text-[2.55rem] font-black leading-[0.95] tracking-[-0.045em] text-slate-900 sm:text-[2.85rem]">
                Choose your region.
              </h2>

              <LocalAccessForm
                scopes={scopes}
                error={error}
                nextPath={nextPath}
                role={role}
                setRole={setRole}
                scope={scope}
                setScope={setScope}
              />
            </div>
          </section>
        </Card>
      </div>
    </main>
  );
}