"use client";

import { LogIn, MessageCircle, ShieldCheck, UserPlus, X } from "lucide-react";
import { buildWechatOAuthUrl, getWechatAuthConfig, isWechatBrowser } from "@/lib/wechatAuth";

export type MockUser = {
  name: string;
  phone: string;
  mode: "login" | "register" | "wechat";
};

export default function MockAuthPanel({
  open,
  user,
  onClose,
  onMockLogin,
  onWechatMockLogin,
  onLogout
}: {
  open: boolean;
  user: MockUser | null;
  onClose: () => void;
  onMockLogin: (mode: MockUser["mode"]) => void;
  onWechatMockLogin: () => void;
  onLogout: () => void;
}) {
  if (!open) return null;

  const wechatConfig = getWechatAuthConfig();
  const inWechat = typeof navigator !== "undefined" && isWechatBrowser(navigator.userAgent);

  function startWechatAuth() {
    if (wechatConfig) {
      window.location.href = buildWechatOAuthUrl(wechatConfig);
      return;
    }
    onWechatMockLogin();
  }

  return (
    <div className="absolute inset-0 z-30 flex items-end bg-slate-950/35 px-3 pb-3">
      <section className="w-full rounded-t-[18px] rounded-b-md bg-white p-4 shadow-2xl">
        <div className="mb-4 flex items-center justify-between">
          <div>
            <h2 className="text-lg font-semibold text-ink">账号入口</h2>
            <p className="mt-1 text-sm text-slate-500">优先预留微信授权；没有配置时使用演示账号。</p>
          </div>
          <button onClick={onClose} className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-slate-100" aria-label="关闭">
            <X className="h-5 w-5" aria-hidden />
          </button>
        </div>

        {user ? (
          <div className="rounded-md border border-line bg-panel p-3">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-md bg-jade text-white">
                <ShieldCheck className="h-5 w-5" aria-hidden />
              </div>
              <div>
                <div className="font-medium text-ink">{user.name}</div>
                <div className="text-sm text-slate-500">{user.phone}</div>
              </div>
            </div>
            <button onClick={onLogout} className="mt-3 h-10 w-full rounded-md border border-line text-sm font-medium hover:bg-white">
              退出 mock 账号
            </button>
          </div>
        ) : (
          <div className="grid gap-3">
            <button
              onClick={startWechatAuth}
              className="flex h-11 items-center justify-center gap-2 rounded-md bg-jade text-sm font-medium text-white hover:bg-teal-800"
            >
              <MessageCircle className="h-4 w-4" aria-hidden />
              {wechatConfig ? "微信授权登录" : "微信授权演示"}
            </button>
            <button
              onClick={() => onMockLogin("login")}
              className="flex h-11 items-center justify-center gap-2 rounded-md border border-line text-sm font-medium text-ink hover:bg-slate-50"
            >
              <LogIn className="h-4 w-4" aria-hidden />
              mock 登录
            </button>
            <button
              onClick={() => onMockLogin("register")}
              className="flex h-11 items-center justify-center gap-2 rounded-md border border-line text-sm font-medium text-ink hover:bg-slate-50"
            >
              <UserPlus className="h-4 w-4" aria-hidden />
              mock 注册并进入
            </button>
          </div>
        )}

        <div className="mt-4 rounded-md bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800">
          {wechatConfig
            ? `已配置微信 OAuth${inWechat ? "，当前在微信内置浏览器中。" : "。如果不在微信内打开，授权页可能无法完成。"}`
            : "尚未配置 NEXT_PUBLIC_WECHAT_APP_ID，当前按钮只模拟微信授权，不写入后端。"}
        </div>
      </section>
    </div>
  );
}