import { useMutation, useQuery } from "@tanstack/react-query";
import { toast } from "sonner";
import { Link, useSearchParams } from "react-router-dom";
import { fetchWecomConfig, startWecomBind, unbindWecom, updateNotificationPreferences } from "../api/auth";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { PageHeader } from "../components/common/PageHeader";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { Button } from "../components/ui/button";
import {
  resolveWecomBindNotice,
  resolveWecomEntryStatus,
  type WecomNotice,
} from "../lib/wecomEntry";

function noticeClasses(tone: WecomNotice["tone"]) {
  if (tone === "success") {
    return "border-emerald-200 bg-emerald-50 text-emerald-700";
  }
  if (tone === "warning") {
    return "border-amber-200 bg-amber-50 text-amber-700";
  }
  return "border-zinc-200 bg-zinc-50 text-zinc-700";
}

function maskExternalUserId(value: string) {
  if (value.length <= 8) {
    return value;
  }
  return `${value.slice(0, 4)}****${value.slice(-4)}`;
}

function statusTone(status?: string) {
  if (status === "active") return "badge-success";
  if (status === "inactive") return "badge-warning";
  return "badge-neutral";
}

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

export function ProfilePage() {
  const { me, permissions, refreshMe } = useAuth();
  const [searchParams] = useSearchParams();
  const wecomConfigQuery = useQuery({
    queryKey: ["auth", "wecom-config"],
    queryFn: () => fetchWecomConfig(),
    staleTime: 60_000,
  });

  const bindMutation = useMutation({
    mutationFn: async () => startWecomBind("/settings/profile"),
    onSuccess: (payload) => {
      window.location.assign(payload.loginUrl);
    },
  });

  const unbindMutation = useMutation({
    mutationFn: () => unbindWecom(),
    onSuccess: () => {
      window.location.reload();
    },
  });
  const notificationPreferenceMutation = useMutation({
    mutationFn: (notificationPushEnabled: boolean) => updateNotificationPreferences({ notificationPushEnabled }),
    onSuccess: async () => {
      await refreshMe();
      toast.success("外部推送偏好已更新");
    },
    onError: (error) => {
      toast.error(resolveProfileError(error));
    },
  });

  const wecomStatus = resolveWecomEntryStatus(wecomConfigQuery.data);
  const bindNotice = resolveWecomBindNotice(searchParams.get("wecomBind"));
  const isBound = Boolean(me?.wecomBinding?.externalUserId);

  return (
    <PageScaffold>
      <PageHeader
        title="个人设置"
        eyebrow="账号与入口"
        subtitle="维护个人资料、角色摘要与企业微信绑定状态。复杂业务仍在海音达工作台内完成，企业微信只负责进入与提醒。"
        meta={<span className={statusTone(me?.status)}>{me?.status === "active" ? "账号正常" : "账号状态待确认"}</span>}
      />

      <div className="page-shell-grid">
        <div className="space-y-6">
          <SectionPanel
            title="基本信息"
            description="员工可直接理解的个人资料与联系方式。"
            actions={
              me?.id ? (
                <Button asChild type="button">
                  <Link to={`/people/${me.id}`}>查看完整档案</Link>
                </Button>
              ) : null
            }
          >
            <dl className="grid gap-4 text-sm text-zinc-700 md:grid-cols-2">
              <div>
                <dt className="text-zinc-500">姓名</dt>
                <dd className="mt-1 font-medium text-zinc-900">{me?.name ?? "-"}</dd>
              </div>
              <div>
                <dt className="text-zinc-500">员工号</dt>
                <dd className="mt-1 font-medium text-zinc-900">{me?.employeeNo ?? "-"}</dd>
              </div>
              <div>
                <dt className="text-zinc-500">邮箱</dt>
                <dd className="mt-1 font-medium text-zinc-900">{me?.email ?? "-"}</dd>
              </div>
              <div>
                <dt className="text-zinc-500">手机号</dt>
                <dd className="mt-1 font-medium text-zinc-900">{me?.phone ?? "-"}</dd>
              </div>
            </dl>
          </SectionPanel>

          {me?.id ? (
            <SectionPanel title="完整员工档案" description="办公地点、紧急联系人、绩效和薪资等员工档案信息在完整档案页维护或查看。">
              <div className="flex flex-col gap-3 text-sm text-zinc-600 md:flex-row md:items-center md:justify-between">
                <p>进入完整档案页后，可按当前权限查看本人绩效、已发放工资条，并编辑自助开放的档案字段。</p>
                <Button asChild type="button" variant="secondary">
                  <Link to={`/people/${me.id}`}>进入完整员工档案</Link>
                </Button>
              </div>
            </SectionPanel>
          ) : null}

          <SectionPanel title="外部通知推送" description="控制是否接收企微等外部渠道推送；关闭后仅保留站内通知，不影响企业微信绑定与工作台登录。">
            <div className="space-y-3 text-sm text-zinc-600">
              <label className="flex items-center gap-3 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>适用于审批待办、报销付款、资产流转等业务提醒。关闭后不会停止站内通知，也不会移除你的业务权限。</p>
            </div>
          </SectionPanel>

          <SectionPanel title="企业微信绑定" description="绑定后可从企业微信工作台直接进入海音达工作台；消息只做提醒与回流，不承接第二套业务录入。">
            <div className="space-y-4" data-testid="profile-wecom-card">
              {bindNotice ? (
                <div className={`rounded-2xl border px-4 py-3 text-sm ${noticeClasses(bindNotice.tone)}`} data-testid="profile-wecom-notice">
                  <div className="font-medium">{bindNotice.title}</div>
                  <div className="mt-1">{bindNotice.description}</div>
                </div>
              ) : null}

              <div className="grid gap-4 md:grid-cols-2">
                <div className="surface-muted px-4 py-4">
                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">接入状态</div>
                  <div className="mt-2 text-lg font-semibold text-zinc-900">{wecomStatus.label}</div>
                  <div className="mt-2 text-sm leading-6 text-zinc-600">{wecomStatus.description}</div>
                  {wecomStatus.reasonLabels.length ? (
                    <ul className="mt-3 list-disc space-y-1 pl-5 text-xs text-zinc-500">
                      {wecomStatus.reasonLabels.map((label) => (
                        <li key={label}>{label}</li>
                      ))}
                    </ul>
                  ) : null}
                </div>

                <div className="surface-muted px-4 py-4">
                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">当前绑定状态</div>
                  <div className="mt-2 text-lg font-semibold text-zinc-900">{isBound ? "已绑定" : "未绑定"}</div>
                  <div className="mt-2 text-sm leading-6 text-zinc-600">
                    {isBound ? "下次可直接从企业微信工作台进入海音达工作台。" : "未绑定时，企业微信登录会自动回退到账号密码登录。"}
                  </div>
                  {isBound ? (
                    <div className="mt-3 rounded-xl border border-zinc-200 bg-white px-3 py-3 text-xs text-zinc-500">
                      <div>绑定标识：{maskExternalUserId(me?.wecomBinding?.externalUserId ?? "")}</div>
                      <div className="mt-1">绑定时间：{me?.wecomBinding?.createdAt ? new Date(me.wecomBinding.createdAt).toLocaleString() : "-"}</div>
                    </div>
                  ) : null}
                </div>
              </div>

              <div className="flex flex-wrap gap-2">
                <Button
                  type="button"
                  disabled={!wecomConfigQuery.data?.bindEnabled || bindMutation.isPending}
                  onClick={() => bindMutation.mutate()}
                >
                  {isBound ? "重新绑定企业微信" : "立即绑定企业微信"}
                </Button>
                <Button
                  type="button"
                  variant="secondary"
                  disabled={!isBound || unbindMutation.isPending}
                  onClick={() => unbindMutation.mutate()}
                >
                  解绑
                </Button>
              </div>
            </div>
          </SectionPanel>
        </div>

        <div className="space-y-6">
          <SectionPanel title="组织信息" description="对员工展示可理解的说明，不直接暴露内部标识字段。">
            <div className="space-y-4 text-sm text-zinc-600">
              <div className="surface-muted px-4 py-4">
                <div className="font-medium text-zinc-900">组织归属</div>
                <div className="mt-2 leading-6">部门与直属汇报关系由管理员统一维护，当前个人页只展示员工可理解的设置入口，避免把内部 ID 直接暴露给员工。</div>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="rounded-2xl border border-zinc-200 px-4 py-4">
                  <div className="text-zinc-500">部门维护状态</div>
                  <div className="mt-2 font-medium text-zinc-900">{me?.departmentId ? "已关联组织" : "待管理员维护"}</div>
                </div>
                <div className="rounded-2xl border border-zinc-200 px-4 py-4">
                  <div className="text-zinc-500">直属汇报关系</div>
                  <div className="mt-2 font-medium text-zinc-900">{me?.directManagerId ? "已维护" : "待管理员维护"}</div>
                </div>
              </div>
            </div>
          </SectionPanel>

          <SectionPanel title="账号状态与角色" description="角色与权限保持透明，但不让设置页变成技术字段堆叠。">
            <div className="space-y-4 text-sm text-zinc-600">
              <div className="flex flex-wrap gap-2">
                <span className={statusTone(me?.status)}>{me?.status === "active" ? "active" : me?.status ?? "unknown"}</span>
                {(me?.roleCodes ?? []).map((role) => (
                  <span className="badge-neutral" key={role}>{role}</span>
                ))}
              </div>
              <div>
                <div className="text-sm font-medium text-zinc-900">权限摘要</div>
                <div className="mt-2 flex flex-wrap gap-2">
                  {permissions.map((permission) => (
                    <span className="badge-neutral" key={permission}>{permission}</span>
                  ))}
                </div>
              </div>
            </div>
          </SectionPanel>
        </div>
      </div>
    </PageScaffold>
  );
}