import { useCallback, useEffect, useState, createContext, useContext } from "react";
import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import { LogOut, Sun, Moon, ChevronDown } from "lucide-react";
import { routes, defaultPath } from "../routes";
import { tenantCurrent, myTenants, switchTenant, type AuthUser, type TenantCtx, type MyTenant } from "../api";
import { useTheme } from "../theme";
import { cn, useToast } from "../ui";

// 租户上下文共享给各页面：当前租户/角色/余额 + 主动刷新（切换组织、邀请成员后要立即反映）。
interface TenantState {
  ctx: TenantCtx | null;
  tenants: MyTenant[];
  active: string;
  refresh: () => void;
}
const TenantStateCtx = createContext<TenantState>({ ctx: null, tenants: [], active: "", refresh: () => {} });
export const useTenant = () => useContext(TenantStateCtx);

export function AppShell({ user, onLogout }: { user: AuthUser; onLogout: () => void }) {
  const toast = useToast();
  const { theme, toggle } = useTheme();
  const [ctx, setCtx] = useState<TenantCtx | null>(null);
  const [tenants, setTenants] = useState<MyTenant[]>([]);
  const [active, setActive] = useState("");
  const [switcherOpen, setSwitcherOpen] = useState(false);

  const refresh = useCallback(() => {
    tenantCurrent().then(setCtx).catch(() => {});
    myTenants()
      .then((r) => {
        setTenants(r.tenants);
        setActive(r.active);
      })
      .catch(() => {});
  }, []);
  useEffect(() => {
    refresh();
    const id = setInterval(refresh, 20000);
    return () => clearInterval(id);
  }, [refresh]);

  const onSwitch = async (id: string) => {
    setSwitcherOpen(false);
    if (id === active) return;
    try {
      await switchTenant(id);
      refresh();
    } catch (e) {
      toast.push("error", (e as Error).message);
    }
  };

  return (
    <TenantStateCtx.Provider value={{ ctx, tenants, active, refresh }}>
      <div className="flex h-screen w-screen flex-col bg-ink-950 text-slate-200">
        {/* 顶栏：品牌 + 组织切换 + 主题 + 用户 */}
        <header className="flex h-12 shrink-0 items-center gap-3 border-b border-line bg-ink-900 px-4">
          <span className="text-sm font-semibold tracking-tight text-slate-100">sundynix</span>
          <span className="text-[10px] text-slate-600">组织与账单</span>

          {/* 组织切换器 */}
          <div className="relative ml-2">
            <button
              onClick={() => setSwitcherOpen((o) => !o)}
              className="flex items-center gap-1.5 rounded-md border border-line bg-ink-850 px-2.5 py-1 text-xs text-slate-300 transition hover:border-ink-600">
              {ctx?.tenant?.name ?? "…"}
              <ChevronDown className="h-3 w-3 text-slate-500" />
            </button>
            {switcherOpen && (
              <div className="absolute left-0 top-8 z-20 w-56 rounded-md border border-line bg-ink-900 py-1 shadow-card">
                {tenants.map((t) => (
                  <button key={t.id} onClick={() => onSwitch(t.id)}
                    className={cn("flex w-full items-center justify-between px-3 py-1.5 text-left text-xs hover:bg-ink-850", t.id === active ? "text-brand-400" : "text-slate-300")}>
                    <span className="truncate">{t.name}</span>
                    <span className="text-[10px] text-slate-600">{t.members} 人</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="ml-auto flex items-center gap-3">
            <button onClick={toggle} className="text-slate-500 transition hover:text-slate-300" title="切换主题">
              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            </button>
            <span className="max-w-40 truncate text-xs text-slate-500" title={user.email}>{user.name || user.email}</span>
            <button onClick={onLogout} className="text-slate-500 transition hover:text-danger" title="退出登录">
              <LogOut className="h-4 w-4" />
            </button>
          </div>
        </header>

        <div className="flex min-h-0 flex-1">
          {/* 左导航（由路由注册表派生） */}
          <nav className="flex w-44 shrink-0 flex-col gap-1 border-r border-line bg-ink-900 p-2">
            {routes.map((r) => {
              const Icon = r.icon;
              return (
                <NavLink key={r.path} to={r.path}
                  className={({ isActive }) =>
                    cn("flex items-center gap-2 rounded-md px-3 py-2 text-xs transition",
                      isActive ? "bg-ink-800 font-medium text-slate-100" : "text-slate-500 hover:bg-ink-850 hover:text-slate-300")
                  }>
                  <Icon className="h-3.5 w-3.5" strokeWidth={2} />
                  {r.label}
                </NavLink>
              );
            })}
          </nav>

          <main className="min-w-0 flex-1 overflow-auto">
            <Routes>
              {routes.map((r) => {
                const Page = r.page;
                return <Route key={r.path} path={r.path} element={<Page />} />;
              })}
              <Route path="*" element={<Navigate to={defaultPath} replace />} />
            </Routes>
          </main>
        </div>
      </div>
    </TenantStateCtx.Provider>
  );
}