import Link from "next/link";
import { notFound } from "next/navigation";
import { eq, and } from "drizzle-orm";
import { requireSession } from "@/lib/auth";
import { db } from "@/db";
import { users, departments, territories } from "@/db/schema";
import { canManageSettings, departmentPaths } from "@/lib/rbac";
import { loadEntityHistory } from "@/lib/audit-view";
import { EntityHistory } from "@/components/entity-history";
import { Avatar } from "@/components/avatar";
import { StaffInfoForm } from "./staff-info-form";
import { eventsByOwner } from "@/lib/reports";
import { isSpecialist, specialistDepartmentIds } from "@/lib/specialist";
import { canViewStaffData, staffReport } from "@/lib/staff-report";
import { periodRange, monthKey, today, weekStart, weekDays, quarterOfMonth, isRealDate, shiftMonth } from "@/lib/period";
import { formatDate, formatDateTime, formatNumber, formatPercent, formatVnd, formatVndShort, orderStatusBadge, ROLE_LABEL, STAGE_LABEL } from "@/lib/format";
import { PageHeader, StatCard, TableWrap, SectionTitle, Badge, EmptyState } from "@/components/ui";
import { idOr404 } from "@/lib/route-params";

export const dynamic = "force-dynamic";

type Tab = "ngay" | "tuan" | "thang" | "quy" | "nam";

const TABS: { key: Tab; label: string }[] = [
  { key: "ngay", label: "Ngày" },
  { key: "tuan", label: "Tuần" },
  { key: "thang", label: "Tháng" },
  { key: "quy", label: "Quý" },
  { key: "nam", label: "Năm" },
];

const SEVERITY_TONE = { CRITICAL: "red", WARNING: "gold", INFO: "neutral" } as const;

export default async function StaffProfilePage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ ky?: string; ngay?: string }>;
}) {
  const session = await requireSession();
  const id = idOr404((await params).id);
  const sp = await searchParams;

  const [target] = await db
    .select({
      id: users.id,
      fullName: users.fullName,
      email: users.email,
      role: users.role,
      jobTitle: users.jobTitle,
      phone: users.phone,
      birthDate: users.birthDate,
      gender: users.gender,
      avatar: users.avatarDataUrl,
      departmentId: users.departmentId,
      territoryId: users.territoryId,
      departmentName: departments.name,
      territoryName: territories.name,
    })
    .from(users)
    .leftJoin(departments, eq(users.departmentId, departments.id))
    .leftJoin(territories, eq(users.territoryId, territories.id))
    .where(and(eq(users.tenantId, session.tenantId), eq(users.id, id)))
    .limit(1);

  if (!target) notFound();

  const tab: Tab = TABS.some((t) => t.key === sp.ky) ? (sp.ky as Tab) : "thang";
  // Mốc thời gian gõ trên đường dẫn phải là ngày có thật — sai thì dùng hôm nay (đưa thẳng vào truy vấn ::date sẽ báo lỗi 500).
  const anchor = isRealDate(sp.ngay) ? sp.ngay : today();
  const monthPeriod = monthKey(anchor);
  const quarterPeriod = quarterOfMonth(monthPeriod);
  const yearPeriod = anchor.slice(0, 4);

  const range =
    tab === "ngay"
      ? { start: anchor, end: anchor }
      : tab === "tuan"
        ? (() => {
            const days = weekDays(weekStart(anchor));
            return { start: days[0], end: days[6] };
          })()
        : tab === "quy"
          ? periodRange(quarterPeriod)
          : tab === "nam"
            ? periodRange(yearPeriod)
            : periodRange(monthPeriod);

  // Kỳ trước / kỳ sau theo tab đang xem.
  const shiftAnchor = (direction: 1 | -1) => {
    const base = new Date(`${anchor}T00:00:00Z`);
    if (tab === "ngay") base.setUTCDate(base.getUTCDate() + direction);
    else if (tab === "tuan") base.setUTCDate(base.getUTCDate() + 7 * direction);
    else if (tab === "thang") return `${shiftMonth(monthPeriod, -direction)}-01`;
    else if (tab === "quy") return `${shiftMonth(monthPeriod, -3 * direction)}-01`;
    else return `${Number(yearPeriod) + direction}-01-01`;
    return base.toISOString().slice(0, 10);
  };
  const prevAnchor = shiftAnchor(-1);
  const nextAnchor = shiftAnchor(1);
  const nextAllowed = periodRangeStart(tab, nextAnchor) <= today();

  const deptPath = target.departmentId ? ((await departmentPaths(session.tenantId)).get(target.departmentId) ?? target.departmentName) : target.departmentName;

  // Chỉ Ban giám đốc hoặc người được cấp quyền (HCNS) mới sửa được thông tin nhân viên.
  const [viewer] = await db
    .select({ canEditStaffInfo: users.canEditStaffInfo })
    .from(users)
    .where(eq(users.id, session.userId))
    .limit(1);
  const canEditInfo = canManageSettings(session) || !!viewer?.canEditStaffInfo;
  // Người được cấp quyền sửa thông tin nhân viên (HCNS) luôn xem và sửa được phần thông tin cá nhân,
  // nhưng báo cáo kinh doanh / lớp đã dạy vẫn chỉ hiện với người có quyền xem dữ liệu của nhân viên đó.
  const canSeeData = await canViewStaffData(session, id);
  const classEvents = canSeeData ? await eventsByOwner(session, id, range) : null;
  const infoVisible = canSeeData || canEditInfo;

  /* Báo cáo chi tiết của nhân viên trong kỳ đang xem — chỉ tính khi người xem đã qua kiểm tra phạm vi. */
  const report = canSeeData ? await staffReport(session, id, range, monthPeriod, { role: target.role, departmentId: target.departmentId }) : null;
  const sales = report?.sales ?? null;
  // Nhân viên chuyên môn (phụ trách đào tạo): báo cáo chính là các lớp đã dạy, không có doanh số/khách/công nợ nên ẩn khối kinh doanh toàn số 0.
  const isSpec = isSpecialist(target, await specialistDepartmentIds(session.tenantId));

  // Lớp/chuyên đề đã phụ trách: nhân viên chuyên môn luôn có khối này (đặt lên đầu — đó là báo cáo chính của họ);
  // nhân viên kinh doanh và quản lý chuyên môn (báo cáo chính là bảng nhân sự trực thuộc) chỉ khi chính họ có lớp trong kỳ.
  const invited = classEvents?.reduce((sum, e) => sum + e.invitedCount, 0) ?? 0;
  const attended = classEvents?.reduce((sum, e) => sum + e.attendedCount, 0) ?? 0;
  const classBlock =
    classEvents !== null && (classEvents.length > 0 || (isSpec && target.role === "SALES")) ? (
      <div className="mb-6">
        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
          <StatCard label="Số lớp trong kỳ" value={formatNumber(classEvents.length)} />
          <StatCard
            label="Lượt tham dự"
            value={formatNumber(attended)}
            hint={invited > 0 ? `trên ${formatNumber(invited)} lượt mời · ${formatPercent((attended / invited) * 100)}` : "chưa có lượt mời"}
          />
          <StatCard label="Đơn chốt sau lớp" value={formatNumber(classEvents.reduce((sum, e) => sum + e.resultOrderCount, 0))} />
          <StatCard label="Doanh thu sau lớp" value={formatVndShort(classEvents.reduce((sum, e) => sum + e.resultRevenue, 0))} />
        </div>
        <div className="mt-6">
          <SectionTitle
            hint={classEvents.length > 0 ? `${classEvents.length} lớp trong kỳ` : undefined}
          >
            Lớp đã dạy
          </SectionTitle>

          {classEvents.length === 0 ? (
            <div className="card px-4 py-8 text-center text-sm text-ink-400">
              Không có lớp nào trong kỳ này.
            </div>
          ) : (
            <>
              <div className="mb-3 flex flex-wrap gap-1.5">
                {Object.entries(
                  classEvents.reduce<Record<string, number>>((acc, e) => {
                    acc[e.kind] = (acc[e.kind] ?? 0) + 1;
                    return acc;
                  }, {}),
                ).map(([kind, count]) => (
                  <Badge key={kind}>
                    {kind}: {count}
                  </Badge>
                ))}
              </div>
              <TableWrap>
                <thead>
                  <tr>
                    <th>Lớp / chuyên đề</th>
                    <th>Loại</th>
                    <th>Ngày</th>
                    <th>Khu vực</th>
                    <th className="text-right">Mời</th>
                    <th className="text-right">Tham dự</th>
                    <th className="text-right">Tỷ lệ dự</th>
                    <th className="text-right">Đơn chốt</th>
                    <th className="text-right">Doanh thu</th>
                    <th style={{ minWidth: 260 }}>Ghi chú sau lớp</th>
                  </tr>
                </thead>
                <tbody>
                  {classEvents.map((e) => (
                    <tr key={e.id}>
                      <td className="font-medium text-ink-700">{e.name}</td>
                      <td>
                        <Badge>{e.kind}</Badge>
                      </td>
                      <td className="tnum whitespace-nowrap text-ink-500">{formatDate(e.eventDate)}</td>
                      <td className="text-ink-500">{e.territoryName ?? "—"}</td>
                      <td className="tnum text-right text-ink-500">{formatNumber(e.invitedCount)}</td>
                      <td className="tnum text-right font-medium">{formatNumber(e.attendedCount)}</td>
                      <td className="tnum text-right">
                        {e.attendanceRate != null ? (
                          <Badge
                            tone={
                              e.attendanceRate >= 60 ? "green" : e.attendanceRate >= 40 ? "gold" : "red"
                            }
                          >
                            {formatPercent(e.attendanceRate)}
                          </Badge>
                        ) : (
                          <span className="text-ink-300">—</span>
                        )}
                      </td>
                      <td className="tnum text-right text-ink-500">{formatNumber(e.resultOrderCount)}</td>
                      <td className="tnum text-right font-semibold">
                        {e.resultRevenue > 0 ? formatVndShort(e.resultRevenue) : "—"}
                      </td>
                      <td className="text-sm text-ink-500">{e.note || "—"}</td>
                    </tr>
                  ))}
                </tbody>
              </TableWrap>
              <p className="mt-2 text-xs text-ink-400">
                Ghi chú do nhân viên chuyên môn tự ghi lại sau mỗi lớp — không còn trôi mất trong nhóm
                chat như trước.
              </p>
            </>
          )}
        </div>
      </div>
    ) : null;

  // Lịch sử chỉnh sửa hồ sơ, phân quyền, đổi/cấp lại mật khẩu (không lưu mật khẩu) — chỉ Ban giám đốc xem.
  const auditHistory = canManageSettings(session) ? await loadEntityHistory(session.tenantId, target.id, ["user", "password_change", "password_reset"]) : null;

  return (
    <>
      <PageHeader
        title={target.fullName}
        subtitle={[isSpec ? null : ROLE_LABEL[target.role], target.jobTitle, deptPath].filter(Boolean).join(" · ")}
        actions={
          <Link href="/danh-muc/nhan-vien" className="btn-ghost">
            ← Nhân viên
          </Link>
        }
      />

      {infoVisible && (
        <div className="mb-5 card flex flex-wrap items-center gap-4 p-4">
          <Avatar name={target.fullName} src={target.avatar} size={56} />
          <dl className="grid flex-1 grid-cols-2 gap-x-6 gap-y-1 text-sm lg:grid-cols-4">
            <div>
              <dt className="text-[11px] uppercase tracking-wide text-ink-400">Điện thoại</dt>
              <dd className="tnum text-ink-700">{target.phone ?? "—"}</dd>
            </div>
            <div>
              <dt className="text-[11px] uppercase tracking-wide text-ink-400">Ngày sinh</dt>
              <dd className="tnum text-ink-700">{target.birthDate ? formatDate(target.birthDate) : "—"}</dd>
            </div>
            <div>
              <dt className="text-[11px] uppercase tracking-wide text-ink-400">Giới tính</dt>
              <dd className="text-ink-700">
                {target.gender === "M" ? "Nam" : target.gender === "F" ? "Nữ" : target.gender === "O" ? "Khác" : "—"}
              </dd>
            </div>
            <div>
              <dt className="text-[11px] uppercase tracking-wide text-ink-400">Khu vực · Phòng ban</dt>
              <dd className="text-ink-700">
                {[target.territoryName, deptPath].filter(Boolean).join(" · ") || "—"}
              </dd>
            </div>
            <div className="col-span-2">
              <dt className="text-[11px] uppercase tracking-wide text-ink-400">Email đăng nhập</dt>
              <dd className="text-ink-700">{target.email}</dd>
            </div>
          </dl>
        </div>
      )}
      {infoVisible && canEditInfo && (
        <StaffInfoForm
          initial={{
            id: target.id,
            fullName: target.fullName,
            phone: target.phone ?? "",
            jobTitle: target.jobTitle ?? "",
            birthDate: target.birthDate ?? "",
            gender: target.gender ?? "",
            avatar: target.avatar ?? null,
          }}
        />
      )}

      {report && report.alerts.length > 0 && (
        <div role="status" className="mb-5 rounded-lg border border-red-200 bg-red-50 p-4">
          <div className="mb-2 text-sm font-bold text-red-700">Cảnh báo đang mở ({report.alerts.length})</div>
          <ul className="flex flex-col gap-1.5 text-sm">
            {report.alerts.map((alert) => (
              <li key={alert.id} className="flex flex-wrap items-baseline gap-2">
                <Badge tone={SEVERITY_TONE[alert.severity]}>{alert.severity === "CRITICAL" ? "Nghiêm trọng" : alert.severity === "WARNING" ? "Cảnh báo" : "Lưu ý"}</Badge>
                <span className="font-medium text-ink-700">{alert.title}</span>
                <span className="text-xs text-ink-500">{alert.message}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {!canSeeData ? (
        canEditInfo ? (
          <p className="text-sm text-ink-400">
            Bạn được cấp quyền sửa thông tin cá nhân của nhân viên, nhưng báo cáo kinh doanh của nhân viên này chỉ
            hiện với người quản lý trực tiếp.
          </p>
        ) : (
          <EmptyState
            message="Bạn không có quyền xem hồ sơ nhân viên này."
            hint="Chỉ xem được nhân viên trong nhánh phòng ban mình phụ trách."
          />
        )
      ) : (
        <>
          <form className="mb-5 flex flex-wrap items-end gap-3" action={`/danh-muc/nguoi-dung/${id}`}>
            <div className="flex gap-1 rounded-lg border border-[var(--color-line)] bg-white p-1">
              {TABS.map((item) => (
                <Link
                  key={item.key}
                  href={`/danh-muc/nguoi-dung/${id}?ky=${item.key}&ngay=${anchor}`}
                  className={`rounded-md px-3 py-1.5 text-sm font-semibold ${
                    tab === item.key ? "bg-brand-500 text-white" : "text-ink-500 hover:bg-ink-50"
                  }`}
                >
                  {item.label}
                </Link>
              ))}
            </div>
            <div className="flex items-center gap-1">
              <Link href={`/danh-muc/nguoi-dung/${id}?ky=${tab}&ngay=${prevAnchor}`} className="btn-ghost px-3 py-1.5" aria-label="Kỳ trước">
                ←
              </Link>
              {nextAllowed ? (
                <Link href={`/danh-muc/nguoi-dung/${id}?ky=${tab}&ngay=${nextAnchor}`} className="btn-ghost px-3 py-1.5" aria-label="Kỳ sau">
                  →
                </Link>
              ) : (
                <span className="btn-ghost pointer-events-none px-3 py-1.5 opacity-40" aria-hidden>
                  →
                </span>
              )}
            </div>
            <input type="hidden" name="ky" value={tab} />
            <div>
              <label htmlFor="ngay" className="label-caps mb-1.5 block">
                Mốc thời gian
              </label>
              <input id="ngay" name="ngay" type="date" defaultValue={anchor} className="input" />
            </div>
            <button type="submit" className="btn-ghost">
              Xem
            </button>
            <span className="pb-2 text-xs text-ink-400">
              {formatDate(range.start)} → {formatDate(range.end)}
            </span>
          </form>

          {isSpec && classBlock}

          {!isSpec && sales && report && (
            <div className="mb-6">
              <SectionTitle hint="theo kỳ đang xem">Báo cáo kinh doanh</SectionTitle>
              <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
                <StatCard label="Doanh thu" value={formatVndShort(sales.revenue)} hint={`${formatNumber(sales.orderCount)} đơn đã duyệt${sales.pendingOrders > 0 ? ` · ${sales.pendingOrders} chờ duyệt` : ""}`} />
                <StatCard
                  label="KPI doanh thu tháng"
                  value={sales.kpiPct != null ? `${sales.kpiPct}%` : "—"}
                  hint={sales.kpiTarget > 0 ? `chỉ tiêu ${formatVndShort(sales.kpiTarget)}` : "chưa có chỉ tiêu"}
                  tone={sales.kpiPct == null ? "default" : sales.kpiPct >= 100 ? "good" : sales.kpiPct < 70 ? "bad" : "warn"}
                />
                <StatCard label="Khách mở mới" value={formatNumber(sales.newCustomers)} hint={`đang phụ trách ${formatNumber(sales.customerCount)} khách`} />
                <StatCard label="Công nợ khách phụ trách" value={formatVndShort(sales.debt)} hint="chưa thu, toàn thời gian" tone={sales.debt > 0 ? "warn" : "good"} />
                <StatCard label="Lượt check-in" value={formatNumber(sales.visits)} hint={sales.outOfRange > 0 ? `${sales.outOfRange} lượt ngoài phạm vi` : "đúng phạm vi"} />
                <StatCard label="Báo cáo ngày" value={formatNumber(sales.reports)} hint="số ngày đã báo cáo" />
                <StatCard
                  label="Kế hoạch tuyến"
                  value={report.plan.planned > 0 ? `${report.plan.done}/${report.plan.planned}` : "—"}
                  hint={report.plan.planned > 0 ? `${report.plan.missed} việc chưa đạt · ${formatPercent(Math.round((report.plan.done / report.plan.planned) * 100))} hoàn thành` : "chưa có kế hoạch trong kỳ"}
                  tone={report.plan.planned === 0 ? "default" : report.plan.done / report.plan.planned >= 0.8 ? "good" : report.plan.done / report.plan.planned < 0.5 ? "bad" : "warn"}
                />
                <StatCard label="Đại lý lâu chưa lấy hàng" value={formatNumber(sales.inactiveDealers)} hint="từ 2 tháng trở lên" tone={sales.inactiveDealers > 0 ? "warn" : "good"} />
              </div>
            </div>
          )}

          {report && report.customKpis.length > 0 && (
            <div className="mb-6">
              <SectionTitle hint={`tháng ${formatDate(`${monthPeriod}-01`).slice(3)}`}>KPI tự tạo</SectionTitle>
              <TableWrap>
                <thead>
                  <tr>
                    <th>KPI</th>
                    <th className="text-right">Chỉ tiêu</th>
                    <th className="text-right">Thực hiện</th>
                    <th className="text-right">% đạt</th>
                  </tr>
                </thead>
                <tbody>
                  {report.customKpis.map((kpi) => (
                    <tr key={kpi.name}>
                      <td className="font-medium text-ink-700">{kpi.name}</td>
                      <td className="tnum text-right text-ink-500">
                        {formatNumber(kpi.target)} {kpi.unit}
                      </td>
                      <td className="tnum text-right">
                        {formatNumber(kpi.actual)} {kpi.unit}
                      </td>
                      <td className="tnum text-right">
                        {kpi.pct != null ? <Badge tone={kpi.pct >= 100 ? "green" : kpi.pct < 70 ? "red" : "gold"}>{kpi.pct}%</Badge> : <span className="text-ink-300">—</span>}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </TableWrap>
            </div>
          )}

          {report && report.team.length > 0 && (
            <div className="mb-6">
              <SectionTitle hint={`${report.team.length} người trong nhánh`}>Nhân sự trực thuộc</SectionTitle>
              <TableWrap>
                <thead>
                  <tr>
                    <th>Nhân viên</th>
                    <th>Chức vụ</th>
                    {isSpec ? (
                      <>
                        <th className="text-right">Số lớp trong kỳ</th>
                        <th className="text-right">Lượt tham dự</th>
                      </>
                    ) : (
                      <>
                        <th className="text-right">Đơn đã duyệt</th>
                        <th className="text-right">Doanh thu kỳ</th>
                      </>
                    )}
                  </tr>
                </thead>
                <tbody>
                  {report.team.map((member) => (
                    <tr key={member.id}>
                      <td>
                        <Link href={`/danh-muc/nguoi-dung/${member.id}?ky=${tab}&ngay=${anchor}`} className="font-medium text-ink-700 hover:text-brand-600">
                          {member.name}
                        </Link>
                      </td>
                      <td className="text-ink-500">{member.jobTitle ?? ROLE_LABEL[member.role]}</td>
                      {isSpec ? (
                        <>
                          <td className="tnum text-right font-semibold">{member.classCount > 0 ? formatNumber(member.classCount) : "—"}</td>
                          <td className="tnum text-right text-ink-500">{member.attendedCount > 0 ? formatNumber(member.attendedCount) : "—"}</td>
                        </>
                      ) : (
                        <>
                          <td className="tnum text-right text-ink-500">{formatNumber(member.orderCount)}</td>
                          <td className="tnum text-right font-semibold">{member.revenue > 0 ? formatVndShort(member.revenue) : "—"}</td>
                        </>
                      )}
                    </tr>
                  ))}
                </tbody>
              </TableWrap>
            </div>
          )}

          {report && sales && sales.customerCount > 0 && (
            <div className="mb-6 grid gap-4 lg:grid-cols-2">
              <div>
                <SectionTitle hint={`${formatNumber(sales.customerCount)} khách đang phụ trách`}>Khách phụ trách</SectionTitle>
                <div className="mb-3 flex flex-wrap gap-2">
                  {(["DEALER", "PROSPECT", "LEAD"] as const).map((stage) => (
                    <Badge key={stage} tone={stage === "DEALER" ? "brand" : stage === "PROSPECT" ? "gold" : "neutral"}>
                      {STAGE_LABEL[stage]}: {report.stages[stage]}
                    </Badge>
                  ))}
                </div>
                {report.topCustomers.length === 0 ? (
                  <div className="card px-4 py-6 text-center text-sm text-ink-400">Chưa có doanh thu từ khách nào trong kỳ.</div>
                ) : (
                  <TableWrap>
                    <thead>
                      <tr>
                        <th>Khách mua nhiều nhất trong kỳ</th>
                        <th className="text-right">Đơn</th>
                        <th className="text-right">Doanh thu</th>
                      </tr>
                    </thead>
                    <tbody>
                      {report.topCustomers.map((customer) => (
                        <tr key={customer.id}>
                          <td>
                            <Link href={`/khach-hang/${customer.id}`} className="font-medium text-ink-700 hover:text-brand-600">
                              {customer.name}
                            </Link>
                          </td>
                          <td className="tnum text-right text-ink-500">{customer.orderCount}</td>
                          <td className="tnum text-right font-semibold">{formatVndShort(customer.revenue)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </TableWrap>
                )}
              </div>

              <div>
                <SectionTitle hint={report.orders.length > 0 ? "10 đơn gần nhất trong kỳ" : undefined}>Đơn hàng trong kỳ</SectionTitle>
                {report.orders.length === 0 ? (
                  <div className="card px-4 py-6 text-center text-sm text-ink-400">Không có đơn hàng trong kỳ này.</div>
                ) : (
                  <TableWrap>
                    <thead>
                      <tr>
                        <th>Mã đơn</th>
                        <th>Khách</th>
                        <th>Trạng thái</th>
                        <th className="text-right">Tiền hàng</th>
                      </tr>
                    </thead>
                    <tbody>
                      {report.orders.map((order) => {
                        const badge = orderStatusBadge(order);
                        return (
                          <tr key={order.id}>
                            <td className="whitespace-nowrap">
                              <Link href={`/don-hang/${order.id}`} className="font-medium text-ink-700 hover:text-brand-600">
                                {order.code}
                              </Link>
                              <div className="text-[11px] text-ink-400">{formatDate(order.orderDate)}</div>
                            </td>
                            <td className="text-ink-500">{order.customerName}</td>
                            <td>
                              <Badge tone={badge.tone}>{badge.label}</Badge>
                            </td>
                            <td className="tnum text-right">{formatVnd(order.totalAmount)}</td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </TableWrap>
                )}
              </div>
            </div>
          )}

          {report && (
            <div className="mb-6">
              <SectionTitle hint={report.dailyReports.length > 0 ? `${report.dailyReports.length} báo cáo gần nhất trong kỳ` : undefined}>Báo cáo ngày</SectionTitle>
              {report.dailyReports.length === 0 ? (
                <div className="card px-4 py-6 text-center text-sm text-ink-400">Nhân viên chưa gửi báo cáo ngày nào trong kỳ này.</div>
              ) : (
                <div className="flex flex-col gap-2">
                  {report.dailyReports.map((day) => (
                    <details key={String(day.date)} className="card p-3">
                      <summary className="flex cursor-pointer flex-wrap items-center gap-2 text-sm">
                        <span className="tnum font-semibold text-ink-700">{formatDate(String(day.date))}</span>
                        <Badge tone={day.completionPct >= 80 ? "green" : day.completionPct < 50 ? "red" : "gold"}>{day.completionPct}% kế hoạch</Badge>
                        <Badge tone={day.routeCompliant ? "green" : "red"}>{day.routeCompliant ? "Đúng lộ trình" : "Lệch lộ trình"}</Badge>
                        <span className="min-w-0 flex-1 truncate text-xs text-ink-400">{day.results ?? day.content ?? ""}</span>
                      </summary>
                      <dl className="mt-2 grid gap-2 text-sm lg:grid-cols-2">
                        {[
                          ["Nội dung công việc", day.content],
                          ["Kết quả", day.results],
                          ["Tồn đọng", day.pending],
                          ["Hướng triển khai tiếp", day.nextSteps],
                          ["Kiến nghị / đề xuất", day.proposals],
                        ]
                          .filter(([, value]) => !!value)
                          .map(([label, value]) => (
                            <div key={label as string}>
                              <dt className="text-[11px] uppercase tracking-wide text-ink-400">{label}</dt>
                              <dd className="whitespace-pre-line text-ink-700">{value}</dd>
                            </div>
                          ))}
                      </dl>
                    </details>
                  ))}
                </div>
              )}
            </div>
          )}

          {report && report.checkIns.length > 0 && (
            <div className="mb-6">
              <SectionTitle hint="8 lượt gần nhất trong kỳ">Check-in thị trường</SectionTitle>
              <div className="card p-4">
                <ul className="flex flex-col gap-1.5 text-sm">
                  {report.checkIns.map((visit, index) => (
                    <li key={index} className="flex flex-wrap items-baseline gap-2">
                      <span className="tnum text-xs text-ink-400">{formatDateTime(visit.at)}</span>
                      <span className="font-medium text-ink-700">{visit.customerName ?? "Điểm bán khác"}</span>
                      <Badge tone={visit.outOfRange ? "gold" : "green"}>{visit.outOfRange ? "Ngoài phạm vi" : "Đúng phạm vi"}</Badge>
                      {visit.note && <span className="text-xs text-ink-500">— {visit.note}</span>}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}

          {!isSpec && classBlock}
        </>
      )}
      {auditHistory && (
        <div className="mt-6">
          <EntityHistory entries={auditHistory} />
        </div>
      )}
    </>
  );
}

/** Ngày bắt đầu của kỳ chứa mốc `anchor` — để khoá nút "kỳ sau" khi kỳ đó nằm ở tương lai. */
function periodRangeStart(tab: Tab, anchor: string): string {
  if (tab === "ngay") return anchor;
  if (tab === "tuan") return weekStart(anchor);
  if (tab === "quy") return periodRange(quarterOfMonth(monthKey(anchor))).start;
  if (tab === "nam") return `${anchor.slice(0, 4)}-01-01`;
  return `${monthKey(anchor)}-01`;
}