import React, { useState } from "react";
import {
  Search,
  ChevronRight,
  RefreshCw,
  Smartphone,
  Settings,
  X,
  Download,
  UserCircle,
  Bell,
  Home,
  Users,
  SquareStack,
  Database,
  FileText,
  MapPin,
  Shield,
  Globe,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";

// 通用可点组件：统一触发弹窗 + 底部蓝条“假跳转”
function Clickable({ onClick, children, className = "", title }) {
  return (
    <button
      type="button"
      title={title}
      onClick={onClick}
      className={`select-none outline-none focus:ring-2 focus:ring-zinc-600/60 ${className}`}
    >
      {children}
    </button>
  );
}

export default function MemberManagementMock() {
  const [open, setOpen] = useState(false);
  const [dialogText, setDialogText] = useState(
    "这里是我设置的弹窗内容。点击任何区域都会：1) 底部蓝条高亮（模拟跳转）；2) 弹出错误提示（页面不跳转）。"
  );
  const [lastTrigger, setLastTrigger] = useState("");
  const [activeLabel, setActiveLabel] = useState("Ready");
  const [bottomBlue, setBottomBlue] = useState(false);
  const [activeSub, setActiveSub] = useState("User IP(1)"); // 子标签激活态（蓝色填充）
  const [activeNav, setActiveNav] = useState("Home"); // 左侧导航激活态

  const trigger = (label) => {
    setLastTrigger(label);
    setActiveLabel(label);
    setBottomBlue(true); // 底部变蓝，模拟“切换到该页面”
    setOpen(true); // 弹出错误提示
  };

  const topTabs = [
    { label: "User management" },
    { label: "Deposit history" },
    { label: "Withdrawal history" },
    { label: "Member management" },
    { label: "Online application issuance" },
  ];

  const subTabs = [
    "Member information",
    "Withdrawal history",
    "Deposit history",
    "Mission history",
    "Bank link",
    "Exception handling",
    "Reputation",
    "User IP(1)",
  ];

  const rows = [
    {
      loginTime: "2021-05-13 09:24:47.190",
      account: "MZ136198",
      ipReg: "117.154.7.83",
      ipLogin: "117.154.7.83",
      address: "Nanchang, Jiangxi, China",
    },
  ];

  // 左侧导航（不是按钮外观，而是整列纵向导航，贯穿到底部）
  const sidebarItems = [
    { icon: <Home className="w-6 h-6" />, label: "Home" },
    { icon: <Users className="w-6 h-6" />, label: "Members" },
    { icon: <SquareStack className="w-6 h-6" />, label: "Deposits" },
    { icon: <Database className="w-6 h-6" />, label: "Withdraw" },
    { icon: <FileText className="w-6 h-6" />, label: "Reports" },
    { icon: <Shield className="w-6 h-6" />, label: "Risk" },
    { icon: <Settings className="w-6 h-6" />, label: "Settings" },
  ];

  return (
    <div className="min-h-screen w-full bg-zinc-950 text-zinc-200">
      {/* 左侧导航栏（固定，非“按钮”样式） */}
      <aside className="fixed left-0 top-0 h-full w-64 bg-zinc-950 border-r border-zinc-800/70 flex flex-col">
        {/* 顶部 LOGO */}
        <div className="px-5 py-5 border-b border-zinc-800/70 flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 grid place-items-center">
            <Globe className="w-5 h-5" />
          </div>
          <div className="text-lg font-semibold tracking-wide">MARA</div>
        </div>

        {/* 导航项：整列到底部，间隙更大，不包围成按钮 */}
        <nav className="flex-1 overflow-y-auto py-4">
          <ul className="px-2 space-y-1">
            {sidebarItems.map((it) => {
              const isActive = activeNav === it.label;
              return (
                <li key={it.label}>
                  <button
                    onClick={() => {
                      setActiveNav(it.label);
                      trigger(`Sidebar: ${it.label}`);
                    }}
                    className={`w-full flex items-center gap-3 px-5 py-3 text-base transition-colors text-left rounded-none ${
                      isActive
                        ? "bg-zinc-900 text-blue-300 border-l-4 border-blue-500"
                        : "text-zinc-300 hover:bg-zinc-900"
                    }`}
                  >
                    {it.icon}
                    <span className="truncate">{it.label}</span>
                  </button>
                </li>
              );
            })}
          </ul>
        </nav>

        {/* 底部信息条 */}
        <div className="p-4 text-xs text-zinc-500 border-t border-zinc-800/70">v1.0 · Admin Panel</div>
      </aside>

      {/* 主区域给左侧导航留宽度 */}
      <div className="ml-64">
        {/* 顶部栏 */}
        <div className="flex items-center justify-between px-8 py-4 border-b border-zinc-800/80 bg-zinc-950/90 sticky top-0 z-40">
          <div className="flex items-center gap-4">
            <Home className="w-5 h-5" />
            <div className="relative">
              <Search className="absolute left-3 top-2.5 w-4 h-4 text-zinc-400" />
              <Input
                onClick={() => trigger("Search function")}
                placeholder="Search function"
                className="pl-9 w-[360px] bg-zinc-900 border-zinc-800 placeholder:text-zinc-500"
              />
            </div>
            <div className="text-xs text-zinc-400 hidden md:block">
              Time the previous day : <span className="text-zinc-300">29/10/2025 08:52:13</span>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <Bell className="w-5 h-5" />
            <div className="text-sm">Welcome Login To The System</div>
            <UserCircle className="w-6 h-6" />
          </div>
        </div>

        {/* 顶部标签（面包屑式） */}
        <div className="flex flex-wrap items-center gap-2 px-8 pt-5 text-sm text-zinc-300">
          {topTabs.map((t, i) => (
            <React.Fragment key={t.label}>
              {i > 0 && <ChevronRight className="w-4 h-4 text-zinc-600" />}
              <Clickable
                title={t.label}
                className={`px-3 py-1.5 rounded-lg border ${
                  t.label === "Member management"
                    ? "bg-zinc-900 border-zinc-700"
                    : "border-zinc-800 hover:bg-zinc-900"
                }`}
                onClick={() => trigger(`Top tab: ${t.label}`)}
              >
                <div className="flex items-center gap-2">
                  <span>{t.label}</span>
                  <X className="w-3.5 h-3.5 text-zinc-500" />
                </div>
              </Clickable>
            </React.Fragment>
          ))}
        </div>

        {/* 模块标题与工具条（更大气） */}
        <div className="px-8 mt-7">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4 text-2xl font-semibold">
              <span>Member management</span>
              <Clickable onClick={() => trigger("Refresh")} className="text-zinc-400 hover:text-zinc-200">
                <span className="inline-flex items-center gap-1 text-sm"><RefreshCw className="w-4 h-4" /> Refresh</span>
              </Clickable>
            </div>

            <div className="flex items-center gap-3">
              <div className="relative">
                <Input
                  onClick={() => trigger("Quick search DQ199305")}
                  defaultValue="DQ199305"
                  className="w-[200px] bg-zinc-900 border-zinc-800"
                />
              </div>
              <Clickable onClick={() => trigger("Settings")} className="px-3 py-2 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center gap-2">
                <Settings className="w-4 h-4" />
                <span>Settings</span>
              </Clickable>
              <Clickable onClick={() => trigger("Excel document export")} className="px-3 py-2 rounded-xl bg-zinc-100 text-zinc-900 font-medium flex items-center gap-2">
                <Download className="w-4 h-4" /> Exoel document export
              </Clickable>
              <div className="flex items-center gap-2 text-sm bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2">
                <span>Manager</span>
                <Clickable onClick={() => trigger("Manager: No")} className="px-2 py-1 rounded-md bg-zinc-800/70">No</Clickable>
              </div>
              <div className="flex items-center gap-2 text-sm bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2">
                <Smartphone className="w-4 h-4" />
                <span>Mobile phone link</span>
                <Clickable onClick={() => trigger("Mobile phone link: No")} className="px-2 py-1 rounded-md bg-zinc-800/70">No</Clickable>
              </div>
            </div>
          </div>
        </div>

        {/* 二级标签（加大尺寸，点击后填充为蓝色） */}
        <div className="px-8 mt-6 flex flex-wrap gap-3 text-base">
          {subTabs.map((s) => {
            const active = activeSub === s;
            return (
              <Clickable
                key={s}
                onClick={() => {
                  setActiveSub(s);
                  trigger(`Sub tab: ${s}`);
                }}
                className={`px-4 py-2 rounded-xl font-medium transition-colors ${
                  active ? "bg-blue-600 text-white shadow" : "bg-zinc-900 text-zinc-200 hover:bg-zinc-800"
                }`}
              >
                {s}
              </Clickable>
            );
          })}
        </div>

        {/* 用户IP历史 标题 */}
        <div className="px-8 mt-7 text-sm text-zinc-400">User IP login history</div>

        {/* 表格（更大气：文字/间距/圆角增大） */}
        <div className="px-8 mt-3">
          <div className="grid grid-cols-12 text-base bg-zinc-900/40 border border-zinc-800 rounded-2xl overflow-hidden">
            <div className="col-span-12 grid grid-cols-12 bg-zinc-900/60 text-zinc-300">
              {[
                "Login time",
                "Member account",
                "IP registration",
                "IP login",
                "Login address",
              ].map((h, idx) => (
                <div key={h} className={`${idx === 0 ? "col-span-3" : idx === 4 ? "col-span-3" : "col-span-2"} px-5 py-4 border-b border-zinc-800`}>{h}</div>
              ))}
            </div>

            {rows.map((r, idx) => (
              <Clickable
                key={idx}
                onClick={() => trigger("Table row clicked")}
                className="col-span-12 grid grid-cols-12 hover:bg-zinc-900/70 transition-colors"
              >
                <div className="col-span-3 px-5 py-4 border-t border-zinc-800">{r.loginTime}</div>
                <div className="col-span-2 px-5 py-4 border-t border-zinc-800">{r.account}</div>
                <div className="col-span-2 px-5 py-4 border-t border-zinc-800">{r.ipReg}</div>
                <div className="col-span-2 px-5 py-4 border-t border-zinc-800">{r.ipLogin}</div>
                <div className="col-span-3 px-5 py-4 border-t border-zinc-800 flex items-center gap-2">
                  <MapPin className="w-4 h-4 text-zinc-400" /> {r.address}
                </div>
              </Clickable>
            ))}
          </div>
        </div>

        {/* 底部空白 */}
        <div className="h-32" />
      </div>

      {/* 底部蓝条（点击任意按钮后高亮，模拟已跳转） */}
      <div
        className={`fixed bottom-0 left-0 right-0 border-t ${
          bottomBlue ? "bg-blue-600/25 border-blue-500 text-blue-200" : "bg-zinc-900/70 border-zinc-800 text-zinc-300"
        } backdrop-blur px-6 py-4 flex items-center justify-between`}
      >
        <div className="truncate text-sm">
          当前模块（模拟跳转）：<span className="font-medium">{activeLabel}</span>
        </div>
        <div className="flex items-center gap-2">
          <Input
            value={dialogText}
            onChange={(e) => setDialogText(e.target.value)}
            className="h-9 w-[360px] bg-zinc-950 border-zinc-800"
            placeholder="这里设置弹窗显示的内容"
          />
          <Button onClick={() => trigger("Preview dialog")} className="h-9">预览弹窗</Button>
        </div>
      </div>

      {/* 弹窗：显示错误提示（内容可自定义）*/}
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="sm:max-w-[520px]">
          <DialogHeader>
            <DialogTitle>操作失败</DialogTitle>
            <DialogDescription>
              系统提示：这是一个“模拟跳转”的页面，功能未真正跳转。<br />
              触发来源：<span className="font-medium text-zinc-900 dark:text-zinc-100">{lastTrigger || "未知"}</span>
            </DialogDescription>
          </DialogHeader>
          <div className="text-base leading-relaxed whitespace-pre-wrap">{dialogText}</div>
        </DialogContent>
      </Dialog>
    </div>
  );
}