"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import {
  isNativeBossApp,
  persistNativeSessionSnapshot,
} from "@/lib/boss-app-client";

type LoginResult = {
  ok: boolean;
  message: string;
  account?: string;
  displayName?: string;
  sessionExpiresAt?: string;
  restoreToken?: string;
};

function resolvePostLoginPath() {
  return window.location.hostname === "admin.boss.hyzq.net"
    ? "/"
    : "/conversations";
}

async function waitForLoginSessionReady(nativeClient: boolean) {
  for (let attempt = 0; attempt < 5; attempt += 1) {
    const response = await fetch("/api/auth/session", {
      cache: "no-store",
      headers: nativeClient ? { "x-boss-native-app": "1" } : undefined,
    }).catch(() => null);
    if (response?.ok) return true;
    await new Promise((resolve) => window.setTimeout(resolve, 120));
  }
  return false;
}

export function EnterpriseAdminLoginShell() {
  const router = useRouter();
  const [account, setAccount] = useState("");
  const [password, setPassword] = useState("");
  const [remember, setRemember] = useState(true);
  const [message, setMessage] = useState("");
  const [submitting, setSubmitting] = useState(false);

  async function submit() {
    if (!account.trim() || !password) {
      setMessage("请填写账号和密码。");
      return;
    }

    setSubmitting(true);
    setMessage("");
    const nativeClient = await isNativeBossApp();

    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...(nativeClient ? { "x-boss-native-app": "1" } : {}),
        },
        body: JSON.stringify({
          account,
          password,
          method: "password",
        }),
      });

      const result = (await response.json()) as LoginResult;
      if (!result.ok) {
        setMessage(result.message);
        return;
      }

      if (
        nativeClient &&
        result.restoreToken &&
        result.account &&
        result.displayName &&
        result.sessionExpiresAt
      ) {
        await persistNativeSessionSnapshot({
          restoreToken: result.restoreToken,
          account: result.account,
          displayName: result.displayName,
          expiresAt: result.sessionExpiresAt,
          lastSyncedAt: new Date().toISOString(),
        }).catch(() => undefined);
      }

      await waitForLoginSessionReady(nativeClient);
      const targetPath = resolvePostLoginPath();
      router.replace(targetPath, { scroll: false });
      router.refresh();
      window.setTimeout(() => {
        if (window.location.pathname !== targetPath) {
          window.location.replace(targetPath);
        }
      }, 180);
    } catch {
      setMessage("登录链路发生异常，请重试。");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main className="min-h-[100dvh] bg-[#eef7f1] px-5 py-6 text-[#102418] md:px-10 md:py-10">
      <div className="mx-auto flex min-h-[calc(100dvh-48px)] max-w-6xl overflow-hidden rounded-[34px] border border-white/80 bg-white shadow-[0_24px_80px_rgba(16,36,24,0.12)]">
        <section className="relative hidden flex-1 flex-col justify-between overflow-hidden bg-[#e9f8f0] px-12 py-12 lg:flex">
          <div className="absolute -left-20 top-12 h-72 w-72 rounded-full bg-[#c8f5dd] blur-3xl" />
          <div className="absolute -bottom-24 right-4 h-80 w-80 rounded-full bg-white/70 blur-2xl" />
          <div className="relative">
            <div className="flex items-center gap-4">
              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#12c66a] text-[22px] font-black text-white shadow-[0_16px_36px_rgba(18,198,106,0.28)]">
                B
              </div>
              <div>
                <div className="text-[25px] font-black tracking-[-0.04em]">
                  Boss 企业管理后台
                </div>
                <div className="mt-1 text-[14px] font-medium text-[#66746c]">
                  统一管理企业账号、电脑节点、Skill 与风险
                </div>
              </div>
            </div>

            <div className="mt-16 max-w-xl">
              <div className="inline-flex rounded-full border border-[#bfead1] bg-white/72 px-4 py-2 text-[13px] font-semibold text-[#0b8f4a]">
                平台级权限 · 企业账号 · 设备治理 · 风险审计
              </div>
              <h1 className="mt-7 text-[48px] font-black leading-[1.08] tracking-[-0.06em] text-[#102418]">
                企业级电脑与 Agent 统一治理入口
              </h1>
              <p className="mt-5 text-[17px] leading-8 text-[#607269]">
                面向 To B 交付场景，集中完成企业开通、账号授权、设备接入、Skill 分发与风险处置。
              </p>
            </div>

            <div className="mt-10 grid max-w-xl grid-cols-3 gap-3">
              {["企业开通", "设备授权", "风险治理"].map((item) => (
                <div
                  key={item}
                  className="rounded-2xl border border-white/80 bg-white/72 px-4 py-4 text-[15px] font-bold text-[#17372a] shadow-sm"
                >
                  {item}
                </div>
              ))}
            </div>
          </div>

          <div className="relative rounded-3xl border border-white/80 bg-white/70 p-5 text-[13px] leading-6 text-[#617168]">
            仅限授权管理员访问。所有登录行为会进入审计链路，用于企业安全、客户成功和异常追踪。
          </div>
        </section>

        <section className="flex w-full items-center justify-center px-5 py-8 md:px-10 lg:w-[470px]">
          <div className="w-full max-w-[390px]">
            <div className="mb-9 lg:hidden">
              <div className="flex h-13 w-13 items-center justify-center rounded-2xl bg-[#12c66a] text-[20px] font-black text-white">
                B
              </div>
              <h1 className="mt-5 text-[30px] font-black tracking-[-0.04em]">
                Boss 企业管理后台
              </h1>
              <p className="mt-2 text-[14px] leading-6 text-[#66746c]">
                统一管理企业账号、电脑节点、Skill 与风险
              </p>
            </div>

            <div className="rounded-[28px] border border-[#dfe9e3] bg-white p-6 shadow-[0_18px_48px_rgba(16,36,24,0.08)] md:p-8">
              <div>
                <div className="text-[28px] font-black tracking-[-0.04em]">
                  登录企业后台
                </div>
                <p className="mt-2 text-[14px] leading-6 text-[#66746c]">
                  仅限授权管理员访问
                </p>
              </div>

              <form
                className="mt-8 space-y-5"
                onSubmit={(event) => {
                  event.preventDefault();
                  void submit();
                }}
              >
                <label className="block">
                  <span className="text-[13px] font-bold text-[#42554a]">账号</span>
                  <input
                    value={account}
                    onChange={(event) => setAccount(event.target.value)}
                    placeholder="输入管理员账号"
                    autoComplete="username"
                    className="mt-2 h-13 w-full rounded-2xl border border-[#dfe9e3] bg-[#f8fbf9] px-4 text-[16px] text-[#102418] outline-none transition focus:border-[#12c66a] focus:bg-white focus:ring-4 focus:ring-[#12c66a]/10"
                  />
                </label>

                <label className="block">
                  <span className="text-[13px] font-bold text-[#42554a]">密码</span>
                  <input
                    value={password}
                    onChange={(event) => setPassword(event.target.value)}
                    placeholder="输入登录密码"
                    type="password"
                    autoComplete="current-password"
                    className="mt-2 h-13 w-full rounded-2xl border border-[#dfe9e3] bg-[#f8fbf9] px-4 text-[16px] text-[#102418] outline-none transition focus:border-[#12c66a] focus:bg-white focus:ring-4 focus:ring-[#12c66a]/10"
                  />
                </label>

                <div className="flex items-center justify-between gap-3">
                  <label className="flex cursor-pointer items-center gap-2 text-[13px] font-semibold text-[#526258]">
                    <input
                      checked={remember}
                      onChange={(event) => setRemember(event.target.checked)}
                      type="checkbox"
                      className="h-4 w-4 accent-[#12c66a]"
                    />
                    记住登录状态
                  </label>
                  <span className="text-[12px] text-[#8b9990]">HTTPS 安全会话</span>
                </div>

                <button
                  type="submit"
                  disabled={submitting}
                  className="flex h-13 w-full items-center justify-center rounded-2xl bg-[#12c66a] text-[16px] font-black text-white shadow-[0_16px_32px_rgba(18,198,106,0.22)] transition hover:bg-[#0fb85f] disabled:cursor-not-allowed disabled:bg-[#9adfba]"
                >
                  {submitting ? "登录中..." : "登录"}
                </button>
              </form>

              {message ? (
                <div className="mt-5 rounded-2xl border border-[#bfead1] bg-[#eefaf3] px-4 py-3 text-[13px] leading-6 text-[#1c6b3e]">
                  {message}
                </div>
              ) : null}
            </div>

            <div className="mt-6 rounded-2xl border border-[#e0e9e4] bg-white/74 px-4 py-4 text-[12px] leading-6 text-[#6f7d75]">
              登录代表你正在访问企业级管理后台。请确认账号权限来自企业或平台管理员授权。
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}