"use client";

import { LogIn, ShieldCheck, UserPlus, X } from "lucide-react";

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

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

  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">先用 mock 登录，后续可替换为微信授权或手机号登录。</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={() => onMockLogin("login")}
              className="flex h-11 items-center justify-center gap-2 rounded-md bg-jade text-sm font-medium text-white hover:bg-teal-800"
            >
              <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">
          这里暂不写入后端，也不保存敏感信息；后续接微信小程序时可把这个面板替换成授权弹窗。
        </div>
      </section>
    </div>
  );
}