/**
 * 管理后台 · 我的
 *
 * 路由：/admin/me
 * 个人中心 + 系统级配置入口（AI 服务商配置、系统健康）
 *
 * 导航策略：
 *  - 顶部统一使用 AdminSubpageHeader，提供「返回 [来源]」+ 面包屑
 *  - 来源解析与持久化逻辑见 AdminSubpageHeader
 *  - 退出登录统一收敛到顶栏右侧，不再在页内重复出现
 */
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { AdminSubpageHeader } from "@/components/admin/AdminSubpageHeader";
import {
  Sparkles,
  Activity,
  ChevronRight,
  LogOut,
  User,
} from "lucide-react";

interface EntryCard {
  to: string;
  title: string;
  description: string;
  icon: typeof Sparkles;
  iconBg: string;
  iconColor: string;
  badge?: string;
}

const ENTRIES: EntryCard[] = [
  {
    to: "/admin/ai-providers",
    title: "AI 服务商配置",
    description: "统一管理消费者助理、管理后台 AI、部门 GenUI 与洞察等所有模块使用的 AI 引擎与模型",
    icon: Sparkles,
    iconBg: "bg-primary/10",
    iconColor: "text-primary",
    badge: "系统",
  },
  {
    to: "/admin/system-health",
    title: "系统健康",
    description: "查看 24 小时错误日志、API P95 延迟、慢请求与 Agent 测试通过率",
    icon: Activity,
    iconBg: "bg-emerald-500/10",
    iconColor: "text-emerald-500",
    badge: "监控",
  },
];

export default function AdminMePage() {
  const navigate = useNavigate();
  const { user, profile, signOut } = useAuth();

  const handleSignOut = async () => {
    await signOut();
    navigate("/admin/login");
  };

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <AdminSubpageHeader
        title="我的"
        scope="admin-me"
        actions={
          <Button
            variant="ghost"
            size="sm"
            onClick={handleSignOut}
            className="text-destructive hover:text-destructive"
          >
            <LogOut className="h-4 w-4 mr-1.5" />
            退出登录
          </Button>
        }
      />

      <div className="container mx-auto p-6 max-w-3xl space-y-6">
        {/* 账户信息卡片 */}
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <Avatar className="h-16 w-16">
                <AvatarFallback className="bg-primary text-primary-foreground text-xl">
                  {profile?.display_name?.[0]?.toUpperCase() || "A"}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1 min-w-0 space-y-1">
                <div className="flex items-center gap-2">
                  <h2 className="text-lg font-semibold">
                    {profile?.display_name || "管理员"}
                  </h2>
                  <Badge variant="secondary" className="text-xs">
                    <User className="h-3 w-3 mr-1" />
                    Admin
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground truncate">
                  {user?.email || user?.phone || "—"}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 系统配置入口 */}
        <div>
          <h3 className="text-sm font-medium text-muted-foreground mb-3 px-1">
            系统配置
          </h3>
          <div className="space-y-3">
            {ENTRIES.map((entry) => {
              const Icon = entry.icon;
              return (
                <Card
                  key={entry.to}
                  className="cursor-pointer hover:border-primary/50 hover:shadow-sm transition-all"
                  onClick={() =>
                    navigate(entry.to, {
                      state: { from: { path: "/admin/me", label: "我的" } },
                    })
                  }
                >
                  <CardHeader className="flex flex-row items-center gap-4 py-4">
                    <div className={`p-2.5 rounded-lg ${entry.iconBg} shrink-0`}>
                      <Icon className={`h-5 w-5 ${entry.iconColor}`} />
                    </div>
                    <div className="flex-1 min-w-0 space-y-1">
                      <div className="flex items-center gap-2">
                        <CardTitle className="text-base">{entry.title}</CardTitle>
                        {entry.badge && (
                          <Badge variant="outline" className="text-xs">
                            {entry.badge}
                          </Badge>
                        )}
                      </div>
                      <CardDescription className="text-xs">
                        {entry.description}
                      </CardDescription>
                    </div>
                    <ChevronRight className="h-5 w-5 text-muted-foreground shrink-0" />
                  </CardHeader>
                </Card>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
