import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import {
  Alert,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dropdown,
  Input,
  Layout,
  Menu,
  Select,
  Space,
  Spin,
  Tag,
  Tooltip,
  type MenuProps
} from "antd";
import {
  AlertOutlined,
  ApiOutlined,
  BarChartOutlined,
  BellOutlined,
  CloudServerOutlined,
  DashboardOutlined,
  DollarOutlined,
  DatabaseOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  ReloadOutlined,
  RobotOutlined,
  SearchOutlined,
  SettingOutlined,
  ToolOutlined,
  UserOutlined
} from "@ant-design/icons";
import { useAuth } from "../auth/useAuth";
import { platformApi, type ContentQualitySummary } from "../api/client";
import { StatusCard } from "../components/StatusCard";
import { OpsAlertWorkspace } from "./OpsAlertWorkspace";
import { OpsBillingWorkspace } from "./OpsBillingWorkspace";
import { OpsConfigWorkspace } from "./OpsConfigWorkspace";
import { OpsDiagnosticsWorkspace } from "./OpsDiagnosticsWorkspace";
import { OpsDeviceWorkspace } from "./OpsDeviceWorkspace";
import { OpsContentModelWorkspace } from "./OpsContentModelWorkspace";

type MaintenanceArea = "overview" | "devices" | "config" | "models" | "quality" | "billing" | "alerts" | "diagnostics";

type HealthState = {
  loading: boolean;
  error?: string;
  live?: string;
  service?: string;
  ready?: string;
  checks?: Record<string, string>;
  version?: string;
};

const areaMeta: Record<MaintenanceArea, { title: string; description: string; icon: ReactNode }> = {
  overview: { title: "维护总览", description: "集中查看服务健康、构建版本和当前维护权限。", icon: <DashboardOutlined /> },
  devices: { title: "设备管理", description: "登记设备、维护家庭与长者归属、吊销设备并安全轮换密钥。", icon: <DatabaseOutlined /> },
  config: { title: "运行配置", description: "管理配置版本、资源引用、离线评测、审批和灰度发布。", icon: <SettingOutlined /> },
  models: { title: "大模型管理", description: "按客户组织配置、测试并激活聊天总结、关键词和故事候选生成模型。", icon: <RobotOutlined /> },
  quality: { title: "内容质量", description: "按模型和提示词版本检查故事、事实与记忆的人工审核反馈。", icon: <BarChartOutlined /> },
  billing: { title: "用量、费用与额度", description: "查看整体通话时长并按家庭、设备筛选，同时维护核价与硬额度策略。", icon: <DollarOutlined /> },
  alerts: { title: "告警处置", description: "维护告警路由、通知测试、静默窗口和处置时间线。", icon: <AlertOutlined /> },
  diagnostics: { title: "联调与诊断", description: "处理依赖异常、失败作业、敏感访问、验收快照和恢复操作。", icon: <ToolOutlined /> }
};

export function MaintenancePortal() {
  const auth = useAuth();
  const [collapsed, setCollapsed] = useState(() => window.innerWidth <= 720);
  const [area, setArea] = useState<MaintenanceArea>(() => areaFromURL());
  const [searchValue, setSearchValue] = useState("");
  const [health, setHealth] = useState<HealthState>({ loading: true });

  const refreshHealth = useCallback(async (signal?: AbortSignal) => {
    setHealth((current) => ({ ...current, loading: true, error: undefined }));
    try {
      const [live, ready, version] = await Promise.all([
        platformApi.liveness(signal),
        platformApi.readiness(signal),
        platformApi.version(signal)
      ]);
      setHealth({
        loading: false,
        live: live.data.status,
        service: live.data.service,
        ready: ready.data.status,
        checks: ready.data.checks,
        version: version.data.version
      });
    } catch (error) {
      if (error instanceof DOMException && error.name === "AbortError") return;
      setHealth({ loading: false, error: error instanceof Error ? error.message : "未知错误" });
    }
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    void refreshHealth(controller.signal);
    return () => controller.abort();
  }, [refreshHealth]);

  useEffect(() => {
    const onPopState = () => setArea(areaFromURL());
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, []);

  const operationsAccounts = useMemo(
    () => auth.currentUser?.accounts.filter((account) => account.account_kind === "operator" && account.platform_role !== "customer") ?? [],
    [auth.currentUser]
  );
  const hasOperationsAccess = operationsAccounts.length > 0;
  const meta = areaMeta[area];

  function navigate(next: MaintenanceArea) {
    setArea(next);
    if (window.innerWidth <= 720) setCollapsed(true);
    const url = new URL(window.location.href);
    if (next === "overview") url.searchParams.delete("area"); else url.searchParams.set("area", next);
    window.history.pushState({ area: next }, "", `${url.pathname}${url.search}${url.hash}`);
  }

  function search() {
    const value = searchValue.trim().toLowerCase();
    if (!value) return;
    const matches: Array<[string[], MaintenanceArea]> = [
      [["总览", "健康", "版本", "health"], "overview"],
      [["设备管理", "资产", "密钥", "device management"], "devices"],
      [["配置", "灰度", "模型路由", "config"], "config"],
      [["大模型", "模型", "豆包", "ollama", "model"], "models"],
      [["质量", "审核", "反馈", "quality"], "quality"],
      [["费用", "额度", "账单", "用量", "billing", "cost"], "billing"],
      [["告警", "静默", "路由", "alert"], "alerts"]
    ];
    const target = matches.find(([keywords]) => keywords.some((keyword) => value.includes(keyword)))?.[1] ?? "diagnostics";
    navigate(target);
  }

  const menuItems: MenuProps["items"] = [
    { type: "group", label: "平台维护", children: [
      { key: "overview", icon: <DashboardOutlined />, label: "维护总览" },
      { key: "devices", icon: <DatabaseOutlined />, label: "设备管理" },
      { key: "config", icon: <SettingOutlined />, label: "运行配置" },
      { key: "models", icon: <RobotOutlined />, label: "大模型管理" },
      { key: "quality", icon: <BarChartOutlined />, label: "内容质量" },
      { key: "billing", icon: <DollarOutlined />, label: "用量与费用" },
      { key: "alerts", icon: <AlertOutlined />, label: "告警处置" },
      { key: "diagnostics", icon: <ToolOutlined />, label: "联调与诊断" }
    ] }
  ];

  const accountMenu: MenuProps["items"] = [
    { key: "logout", icon: <UserOutlined />, label: "退出登录", onClick: () => void auth.logout() }
  ];

  return <Layout className="maintenance-layout">
    <Layout.Header className="maintenance-header">
      <div className="maintenance-header__brand">
        <Button className="maintenance-menu-toggle" type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} aria-label={collapsed ? "展开菜单" : "收起菜单"} onClick={() => setCollapsed((value) => !value)} />
        <span className="maintenance-brand-mark"><CloudServerOutlined /></span>
        <strong>安心陪伴</strong><span className="maintenance-brand-divider" /><span>维护中心</span>
      </div>
      <nav className="maintenance-top-nav" aria-label="维护中心主导航">
        {(Object.entries(areaMeta) as Array<[MaintenanceArea, (typeof areaMeta)[MaintenanceArea]]>).map(([key, item]) => <button type="button" className={area === key ? "active" : ""} key={key} onClick={() => navigate(key)}>{item.title.replace("维护", "")}</button>)}
      </nav>
      <div className="maintenance-header__actions">
        <Input.Search value={searchValue} onChange={(event) => setSearchValue(event.target.value)} onSearch={search} prefix={<SearchOutlined />} placeholder="搜索设备、通话、作业" allowClear className="maintenance-search" />
        <Tooltip title="平台就绪状态"><Badge status={health.ready === "ready" ? "success" : health.loading ? "processing" : "warning"} /></Tooltip>
        <Button type="text" icon={<BellOutlined />} aria-label="查看告警" onClick={() => navigate("alerts")} />
        {auth.currentUser ? <Dropdown menu={{ items: accountMenu }} placement="bottomRight"><Button type="text" className="maintenance-account"><Avatar size={30} icon={<UserOutlined />} /><span>{auth.currentUser.identity.display_name || auth.currentUser.identity.preferred_username}</span></Button></Dropdown> : <Button type="primary" onClick={() => void auth.login()}>维护人员登录</Button>}
      </div>
    </Layout.Header>

    <Layout className="maintenance-layout__body">
      <Layout.Sider className="maintenance-sider" width={224} collapsedWidth={72} collapsed={collapsed} trigger={null}>
        <div className="maintenance-sider__title"><ApiOutlined />{collapsed ? null : <span>平台运维控制台</span>}</div>
        <Menu mode="inline" selectedKeys={[area]} items={menuItems} onClick={({ key }) => navigate(key as MaintenanceArea)} />
        <div className="maintenance-sider__meta">{collapsed ? <CloudServerOutlined /> : <><span>当前构建</span><strong>{health.version ?? "dev"}</strong></>}</div>
      </Layout.Sider>

      <Layout.Content className="maintenance-content">
        <main className="maintenance-page">
          <Breadcrumb items={[{ title: "维护中心" }, { title: meta.title }]} />
          <header className="maintenance-page__header"><div><span className="maintenance-page__icon">{meta.icon}</span><div><h1>{meta.title}</h1><p>{meta.description}</p></div></div><Button icon={<ReloadOutlined />} loading={health.loading} onClick={() => void refreshHealth()}>刷新状态</Button></header>

          {auth.loading ? <Card className="maintenance-auth-state"><Spin /><span>正在校验维护身份…</span></Card> : null}
          {!auth.loading && auth.error ? <Alert type="error" showIcon message="维护身份读取失败" description={auth.error} action={<Space><Button onClick={() => void auth.retry()}>重试</Button><Button type="primary" onClick={() => void auth.login()}>重新登录</Button></Space>} /> : null}
          {!auth.loading && !auth.currentUser && !auth.error ? <MaintenanceLogin onLogin={() => void auth.login()} /> : null}
          {auth.currentUser && !hasOperationsAccess ? <Alert type="warning" showIcon message="当前账号没有维护权限" description="家庭客户角色不能进入维护端。请使用 ops_viewer、ops_operator、ops_approver 或 ops_admin 账号登录。" action={<Button onClick={() => window.location.assign("/")}>返回家庭端</Button>} /> : null}
          {health.error ? <Alert type="error" showIcon message="平台健康检查失败" description={health.error} /> : null}

          {auth.currentUser && auth.oidcUser && hasOperationsAccess ? <section className="maintenance-workspace">
            {area === "overview" ? <MaintenanceOverview health={health} accounts={operationsAccounts} /> : null}
            {area === "devices" ? <OpsDeviceWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
            {area === "config" ? <OpsConfigWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
            {area === "models" ? <OpsContentModelWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
            {area === "quality" ? <ContentQualityWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
            {area === "billing" ? <OpsBillingWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
            {area === "alerts" ? <OpsAlertWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
            {area === "diagnostics" ? <OpsDiagnosticsWorkspace accessToken={auth.oidcUser.access_token} accounts={operationsAccounts} /> : null}
          </section> : null}
        </main>
      </Layout.Content>
    </Layout>
  </Layout>;
}

function ContentQualityWorkspace({ accessToken, accounts }: {
  accessToken: string;
  accounts: NonNullable<ReturnType<typeof useAuth>["currentUser"]>["accounts"];
}) {
  const [tenantID, setTenantID] = useState(accounts[0]?.tenant_id ?? "");
  const [items, setItems] = useState<ContentQualitySummary[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>();
  const [revision, setRevision] = useState(0);

  useEffect(() => {
    if (!accounts.some((account) => account.tenant_id === tenantID)) setTenantID(accounts[0]?.tenant_id ?? "");
  }, [accounts, tenantID]);

  useEffect(() => {
    if (!tenantID) { setItems([]); return; }
    const controller = new AbortController();
    setLoading(true);
    setError(undefined);
    void platformApi.opsContentQuality(tenantID, accessToken, controller.signal)
      .then((response) => setItems(response.data.items))
      .catch((cause) => {
        if (!(cause instanceof DOMException && cause.name === "AbortError")) setError(cause instanceof Error ? cause.message : "内容质量读取失败");
      })
      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
    return () => controller.abort();
  }, [accessToken, revision, tenantID]);

  const totals = items.reduce((result, item) => ({
    candidates: result.candidates + item.story_candidates + item.fact_candidates,
    confirmed: result.confirmed + item.confirmed,
    edited: result.edited + item.edited,
    rejected: result.rejected + item.rejected,
    issues: result.issues + Object.values(item.error_types).reduce((sum, count) => sum + count, 0)
  }), { candidates: 0, confirmed: 0, edited: 0, rejected: 0, issues: 0 });
  const reviewed = totals.confirmed + totals.edited + totals.rejected;

  return <div className="quality-workspace">
    <Card className="quality-toolbar">
      <div><strong>质量反馈范围</strong><span>只展示当前维护账号有权访问的客户组织；统计不包含故事、事实或记忆正文。</span></div>
      <Space wrap>
        <Select value={tenantID || undefined} style={{ minWidth: 240 }} placeholder="选择客户组织" onChange={setTenantID} options={accounts.map((account) => ({ value: account.tenant_id, label: account.tenant_name }))} />
        <Button icon={<ReloadOutlined />} loading={loading} onClick={() => setRevision((value) => value + 1)}>刷新质量数据</Button>
      </Space>
    </Card>
    {error ? <Alert type="error" showIcon message="内容质量读取失败" description={error} /> : null}
    <section className="quality-summary-grid">
      <QualityMetric label="生成候选" value={totals.candidates} detail="故事候选与事实候选合计" />
      <QualityMetric label="人工审核" value={reviewed} detail={`确认 ${totals.confirmed} · 修改 ${totals.edited} · 拒绝 ${totals.rejected}`} />
      <QualityMetric label="标记问题" value={totals.issues} detail="九类标准错误标签合计" />
      <QualityMetric label="确认率" value={reviewed ? `${Math.round(totals.confirmed / reviewed * 100)}%` : "—"} detail="确认数 ÷ 已审核操作数" />
    </section>
    <Card className="quality-detail-card" title="模型与提示词版本明细" extra={<Tag color="blue">不展示私密正文</Tag>}>
      {loading && !items.length ? <div className="quality-state"><Spin /><span>正在聚合审核信号…</span></div> : null}
      {!loading && !items.length ? <div className="quality-state"><BarChartOutlined /><strong>暂无质量反馈</strong><span>家庭端完成故事、事实或记忆审核后，这里会按生成版本汇总。</span></div> : null}
      {items.length ? <div className="quality-version-list">{items.map((item) => {
        const itemReviewed = item.confirmed + item.edited + item.rejected;
        return <article key={`${item.model_ref}\u0000${item.prompt_version}`}>
          <header><div><strong>{item.model_ref}</strong><span>提示词 {item.prompt_version}</span></div><Tag>{itemReviewed} 次审核</Tag></header>
          <div className="quality-version-metrics"><span>故事候选 <strong>{item.story_candidates}</strong></span><span>事实候选 <strong>{item.fact_candidates}</strong></span><span>确认 <strong>{item.confirmed}</strong></span><span>修改 <strong>{item.edited}</strong></span><span>拒绝 <strong>{item.rejected}</strong></span><span>停用 <strong>{item.disabled}</strong></span></div>
          <div className="quality-error-types"><small>问题类型</small>{Object.entries(item.error_types).length ? Object.entries(item.error_types).sort((left, right) => right[1] - left[1]).map(([type, count]) => <Tag color="volcano" key={type}>{contentErrorTypeLabel(type)} {count}</Tag>) : <span>尚未标记问题类型</span>}</div>
        </article>;
      })}</div> : null}
    </Card>
  </div>;
}

function QualityMetric({ label, value, detail }: { label: string; value: number | string; detail: string }) {
  return <Card className="quality-metric"><span>{label}</span><strong>{value}</strong><small>{detail}</small></Card>;
}

function contentErrorTypeLabel(value: string) {
  return ({ PERSON_ERROR: "人物错误", TIME_ERROR: "时间错误", PLACE_ERROR: "地点错误", RELATION_ERROR: "关系错误", OVER_INFERENCE: "过度推断", KEY_POINT_OMISSION: "遗漏重点", DUPLICATE_CONTENT: "重复内容", UNNATURAL_EXPRESSION: "表达不自然", SENSITIVE_INFORMATION: "敏感信息" } as Record<string, string>)[value] ?? value;
}

function MaintenanceLogin({ onLogin }: { onLogin: () => void }) {
  return <Card className="maintenance-login"><ToolOutlined /><h2>维护人员登录</h2><p>维护端与家庭端分离，仅向平台运营、审批和管理员角色开放；所有敏感查看和控制操作继续由后端审计。</p><Button type="primary" size="large" onClick={onLogin}>登录维护中心</Button></Card>;
}

function MaintenanceOverview({ health, accounts }: { health: HealthState; accounts: NonNullable<ReturnType<typeof useAuth>["currentUser"]>["accounts"] }) {
  const dependencySummary = health.checks ? Object.entries(health.checks).map(([name, status]) => `${name}: ${status}`).join(" · ") : "等待依赖检查";
  return <>
    <section className="maintenance-status-grid">
      <StatusCard label="API 进程" value={health.loading ? "检查中" : health.live === "alive" ? "运行正常" : "需要处理"} detail={health.service ? `当前服务：${health.service}` : "尚未获得服务信息"} tone={health.live === "alive" ? "good" : "warning"} />
      <StatusCard label="必要依赖" value={health.loading ? "检查中" : health.ready === "ready" ? "全部就绪" : "存在异常"} detail={dependencySummary} tone={health.ready === "ready" ? "good" : health.loading ? "neutral" : "warning"} />
      <StatusCard label="构建版本" value={health.version ?? "dev"} detail="版本、提交与构建时间由流水线注入" tone="neutral" />
    </section>
    <Card className="maintenance-role-card" title="当前维护范围" extra={<Tag color="green">服务端权限校验</Tag>}>
      <div className="maintenance-role-list">{accounts.map((account) => <article key={account.user_id}><strong>{account.tenant_name}</strong><span>{roleLabel(account.platform_role)}</span><small>配置、费用、告警和诊断数据均按该客户组织隔离</small></article>)}</div>
    </Card>
  </>;
}

function areaFromURL(): MaintenanceArea {
  const value = new URL(window.location.href).searchParams.get("area");
  return value && value in areaMeta ? value as MaintenanceArea : "overview";
}

function roleLabel(role: string) {
  return ({ ops_viewer: "维护查看员", ops_operator: "维护操作员", ops_approver: "维护审批员", ops_admin: "维护管理员" } as Record<string, string>)[role] ?? role;
}