import { Link } from "react-router-dom";
import { useMutation, useQuery } from "@tanstack/react-query";
import { toast } from "sonner";
import { updateNotificationPreferences } from "../api/auth";
import { fetchEmployeeProfile } from "../api/employees";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission, hasBusinessApproverRole, hasFinanceRole } from "../auth/permissions";
import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
import { PageHeader } from "../components/common/PageHeader";
import { MobileIcon } from "../components/mobile/MobileIcon";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";
import { MOBILE_PURCHASE_PERMISSIONS } from "../features/mobile/navigation";

function resolveErrorMessage(error: unknown) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return "请求失败，请稍后重试。";
}

function MobileActionLink({
  to,
  label,
  description,
  icon,
}: {
  to: string;
  label: string;
  description?: string;
  icon: string;
}) {
  return (
    <Link
      to={to}
      className="mobile-action-link mobile-me-action-link"
      data-testid="mobile-me-action-link"
    >
      <MobileIcon name={icon} className="mobile-action-icon mobile-me-action-icon" />
      <span className="mobile-action-copy mobile-me-action-copy">
        <span className="block text-sm font-semibold text-zinc-900">{label}</span>
        {description ? <span className="mt-0.5 block text-xs leading-5 text-zinc-500">{description}</span> : null}
      </span>
    </Link>
  );
}

export function MobileMePage() {
  const { me, permissions, refreshMe, logout } = useAuth();
  const canAccessAdmin = hasAnyPermission(permissions, [
    "*",
    "system.settings",
    "system.users",
    "masterdata.manage",
    "notification.channel.manage",
    "integration.manage",
  ]);
  const canAccessAssets = hasAnyPermission(permissions, ["asset.view_own", "asset.view_all", "asset.manage", "asset.transfer", "asset.inventory"]);
  const canAccessProjects = hasAnyPermission(permissions, ["project.view_own", "project.view_all", "project.manage"]);
  const canAccessPurchase = hasAnyPermission(permissions, [...MOBILE_PURCHASE_PERMISSIONS]);
  const canAccessApprovals = hasBusinessApproverRole(me?.roleCodes, permissions);
  const canAccessFinance = hasFinanceRole(me?.roleCodes, permissions);

  const profileQuery = useQuery({
    enabled: Boolean(me?.id),
    queryKey: ["mobile", "me", "profile", me?.id],
    queryFn: () => fetchEmployeeProfile(me!.id),
  });

  const notificationPreferenceMutation = useMutation({
    mutationFn: (notificationPushEnabled: boolean) => updateNotificationPreferences({ notificationPushEnabled }),
    onSuccess: async () => {
      await refreshMe();
      toast.success("企业微信消息提醒偏好已更新");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error));
    },
  });

  const profile = profileQuery.data?.employee;
  const departmentName = profile?.department?.name ?? (me?.departmentId ? "已关联组织" : "待管理员维护");

  return (
    <PageScaffold className="space-y-3 pb-4">
      <PageHeader title="我的" meta={<span className="badge-neutral">账号与入口</span>} />

      <SectionPanel title="个人信息" className="mobile-focus-card">
        <div className="mobile-slot-row mobile-me-profile-row" data-testid="mobile-me-profile-row">
          <div className="mobile-slot-avatar mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
            <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
          </div>
          <div className="mobile-slot-copy mobile-me-profile-copy" data-testid="mobile-me-profile-copy">
            <div className="text-lg font-semibold leading-7 text-zinc-900" data-testid="mobile-me-profile-name">
              {me?.name ?? "-"}
            </div>
            <div className="text-sm text-zinc-500">{departmentName}</div>
            {me?.employeeNo ? <div className="text-xs text-zinc-400">员工号：{me.employeeNo}</div> : null}
          </div>
        </div>

        {profileQuery.isLoading ? <p className="mt-4 text-sm text-zinc-500">加载档案信息中...</p> : null}
        {profileQuery.isError ? (
          <p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
            {resolveErrorMessage(profileQuery.error)}
          </p>
        ) : null}
      </SectionPanel>

      <SectionPanel title="账号与绑定">
        <div className="grid gap-2">
          <MobileActionLink to="/mobile/profile" label="个人设置" description="企业微信、账号与通知" icon="manage_accounts" />
          {me?.id ? (
            <MobileActionLink to="/mobile/profile" label="账号资料" description="员工号和联系方式" icon="badge" />
          ) : null}
        </div>
      </SectionPanel>

      <SectionPanel title="更多入口" description="常用移动入口集中在这里。">
        <div className="mobile-entry-grid mobile-me-entry-grid" data-testid="mobile-more-links">
          <MobileActionLink to="/mobile/notifications" label="通知中心" icon="notifications" />
          <MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />
          <MobileActionLink to="/mobile/reimbursements" label="报销" icon="request_quote" />
          {canAccessPurchase ? <MobileActionLink to="/mobile/purchase-requests" label="采购" icon="shopping_cart" /> : null}
          <MobileActionLink to="/mobile/approvals" label={canAccessApprovals ? "待办" : "进度"} icon="fact_check" />
          {canAccessFinance ? <MobileActionLink to="/mobile#finance" label="财务" description="审批与付款状态" icon="account_balance_wallet" /> : null}
          {canAccessAssets ? <MobileActionLink to="/mobile/assets/scan" label="资产扫码" icon="inventory_2" /> : null}
          {canAccessProjects ? <MobileActionLink to="/mobile" label="项目动态" icon="workspaces" /> : null}
        </div>
      </SectionPanel>

      {canAccessAdmin ? (
        <SectionPanel title="管理入口">
          <div className="mobile-entry-grid mobile-me-entry-grid">
            <MobileActionLink to="/mobile/me" label="人员管理" icon="group" />
            <MobileActionLink to="/mobile/me" label="组织架构" icon="account_tree" />
            <MobileActionLink to="/mobile/me" label="系统设置" icon="settings" />
          </div>
        </SectionPanel>
      ) : null}

      <SectionPanel title="企业微信消息提醒">
        <label className="flex items-center gap-3 text-sm text-zinc-800">
          <input
            type="checkbox"
            className="h-4 w-4 rounded border-zinc-300"
            checked={Boolean(me?.notificationPushEnabled ?? true)}
            disabled={!me || notificationPreferenceMutation.isPending}
            onChange={(event) => notificationPreferenceMutation.mutate(event.target.checked)}
          />
          接收企业微信消息提醒
        </label>
        <p className="mt-2 text-xs leading-5 text-zinc-500">
          关闭后仍保留 OA 站内通知，不影响企业微信登录、绑定和工作台入口。
        </p>
      </SectionPanel>

      <Button type="button" variant="secondary" className="w-full border-red-200 text-red-600 hover:bg-red-50" onClick={() => void logout()}>
        退出登录
      </Button>
    </PageScaffold>
  );
}