import Link from "next/link";
import { and, desc, eq, inArray, sql, type SQL } from "drizzle-orm";
import { requireSession } from "@/lib/auth";
import { db } from "@/db";
import { alerts, orders, tasks } from "@/db/schema";
import { OPEN_TASK_STATUSES } from "@/lib/tasks";
import { agendaFor, AGENDA_KIND_LABEL } from "@/lib/agenda";
import { scopeFilter } from "@/lib/rbac";
import { visibleAnnouncements, posterScopes, canPostAnywhere } from "@/lib/announcements";
import { alertScope } from "@/lib/alerts-scope";
import { latestCompanyDocuments } from "@/lib/documents";
import { DOCUMENT_CATEGORY_LABEL } from "@/lib/document-categories";
import {
  monthProgressSummary,
  revenueByDay,
  revenueByMonth,
  revenueByTerritory,
  revenueByProduct,
  dealerActivity,
  dealerTierDistribution,
} from "@/lib/reports";
import { periodRange, today, monthKey } from "@/lib/period";
import {
  formatVnd,
  formatVndShort,
  formatNumber,
  formatPercent,
  formatPeriod,
  formatDate,
  ROLE_LABEL,
} from "@/lib/format";
import { PageHeader, StatCard, TableWrap, SectionTitle, ProgressBar, Badge, ActionChip } from "@/components/ui";
import { DailyRevenueChart, MonthlyRevenueChart, TierChart } from "@/components/charts";

// Số liệu điều hành phải luôn là dữ liệu mới nhất, không phục vụ từ bộ nhớ đệm.
export const dynamic = "force-dynamic";

const SCOPE_TAG = { COMPANY: "Công ty", DEPARTMENT: "Phòng ban", TERRITORY: "Khu vực" } as const;

export default async function DashboardPage() {
  const session = await requireSession();
  const period = monthKey(today());
  const range = periodRange(period);

  const [summary, byDay, byMonth, byTerritory, byProduct, dealers, tiers, openAlerts, announcementRows, documentRows] =
    await Promise.all([
      monthProgressSummary(session, period),
      revenueByDay(session, range),
      revenueByMonth(session, period.slice(0, 4)),
      revenueByTerritory(session, range),
      revenueByProduct(session, range, 8),
      dealerActivity(session, range),
      dealerTierDistribution(session, period),
      session.role === "SALES"
        ? Promise.resolve([])
        : db
            .select({
              id: alerts.id,
              title: alerts.title,
              severity: alerts.severity,
              message: alerts.message,
            })
            .from(alerts)
            .where(and(await alertScope(session), eq(alerts.status, "OPEN")))
            .orderBy(desc(alerts.severity), desc(alerts.createdAt))
            .limit(5),
      visibleAnnouncements(session),
      latestCompanyDocuments(session.tenantId, 3),
    ]);

  // Việc cần xử lý ngay — cùng phạm vi dữ liệu với trang Đơn hàng.
  const pendingFilters: (SQL | undefined)[] = [eq(orders.tenantId, session.tenantId), eq(orders.status, "DRAFT")];
  pendingFilters.push(
    await scopeFilter(session, { tenantId: orders.tenantId, ownerId: orders.salesUserId, territoryId: orders.territoryId }),
  );
  const [pendingRow] = await db
    .select({ count: sql<number>`count(*)::int` })
    .from(orders)
    .where(and(...pendingFilters));
  const pendingOrders = Number(pendingRow?.count ?? 0);

  const [alertCountRow] =
    session.role === "SALES"
      ? [{ count: 0 }]
      : await db
          .select({ count: sql<number>`count(*)::int` })
          .from(alerts)
          .where(and(await alertScope(session), eq(alerts.status, "OPEN")));
  const openAlertCount = Number(alertCountRow?.count ?? 0);

  // Người được cấp quyền đăng thông báo (HCNS, GĐ khu vực, Trưởng phòng, Trợ lý...) thấy nút đăng ngay ở trang chủ —
  // NVKD/HCNS không có mục Danh mục trên menu nên không có nút này thì không tìm ra chỗ đăng.
  const canPost = canPostAnywhere(await posterScopes(session));

  const todayIso = today();
  const upcomingEvents = announcementRows
    .filter((item): item is typeof item & { eventDate: string } => !!item.eventDate && item.eventDate >= todayIso)
    .sort((a, b) => a.eventDate.localeCompare(b.eventDate))
    .slice(0, 5);

  // Việc cần làm của tôi: đang làm dở và đã tới ngày bắt đầu (hoặc chưa đặt ngày) — "kế hoạch công việc" ở trang chủ.
  const myTasks = await db
    .select({ id: tasks.id, title: tasks.title, startDate: tasks.startDate, dueDate: tasks.dueDate, status: tasks.status })
    .from(tasks)
    .where(
      and(
        eq(tasks.tenantId, session.tenantId),
        eq(tasks.assigneeId, session.userId),
        inArray(tasks.status, OPEN_TASK_STATUSES),
      ),
    )
    .orderBy(sql`${tasks.dueDate} asc nulls last`, tasks.startDate)
    .limit(30);
  // Lịch 7 ngày tới (việc, lộ trình, sự kiện, hạn chót) — "kế hoạch công việc / lịch ghi nhớ" ngay ở trang chủ.
  const weekEnd = new Date(Date.parse(`${todayIso}T00:00:00Z`) + 6 * 86_400_000).toISOString().slice(0, 10);
  const weekAgenda = (await agendaFor(session, todayIso, weekEnd)).filter((item) => !item.closed);
  const dueTasks = myTasks.filter((t) => !t.startDate || t.startDate <= todayIso);
  const overdueTaskCount = myTasks.filter((t) => t.dueDate && t.dueDate < todayIso).length;

  const { metrics, target, achievementPct, timePct, elapsedDays, totalDays } = summary;
  const totalRevenue = byTerritory.reduce((sum, r) => sum + Number(r.revenue), 0);

  return (
    <>
      <PageHeader
        title="Tổng quan"
        subtitle={`${formatPeriod(period)} · đã qua ${elapsedDays}/${totalDays} ngày`}
        actions={
          canPost ? (
            <Link href="/danh-muc/thong-bao" className="btn-ghost">
              Đăng thông báo
            </Link>
          ) : undefined
        }
      />

      {/* Chào mừng — nội dung tĩnh, tạo ấn tượng ban đầu tốt ngay khi mở trang chủ */}
      <div className="card mb-3 flex flex-wrap items-center justify-between gap-3 p-4">
        <div>
          <div className="text-sm text-ink-400">Xin chào,</div>
          <div className="text-lg font-bold text-ink-700">
            {session.fullName} <span className="font-normal text-ink-400">· {ROLE_LABEL[session.role]}</span>
          </div>
        </div>
        <div className="text-sm font-medium text-ink-500">{session.tenantName}</div>
      </div>

      {/* Việc cần xử lý ngay — đặt trên cùng để người xem biết nhìn đâu trước */}
      <div className={`mb-4 grid gap-2 ${session.role === "SALES" ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}>
        <ActionChip
          href="/cong-viec/danh-sach"
          count={dueTasks.length}
          label={overdueTaskCount > 0 ? `Việc cần làm (${overdueTaskCount} quá hạn)` : "Việc cần làm"}
          tone={overdueTaskCount > 0 ? "red" : "gold"}
        />
        {session.role !== "SALES" && (
          <ActionChip href="/canh-bao" count={openAlertCount} label="Cảnh báo cần xử lý" tone="red" />
        )}
        <ActionChip
          href="/don-hang"
          count={pendingOrders}
          label={session.role === "SALES" ? "Đơn của tôi đang chờ duyệt" : "Đơn hàng chờ duyệt"}
          tone="gold"
        />
        <ActionChip
          href="/bao-cao"
          count={dealers.inactive.length}
          label="Đại lý chưa lấy hàng trong tháng"
          tone="gold"
        />
      </div>

      {/* Chỉ số lõi */}
      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <StatCard
          label="Doanh thu tháng"
          value={formatVndShort(metrics.revenue)}
          hint={target ? `Chỉ tiêu ${formatVndShort(target.revenueTarget)}` : "Chưa giao chỉ tiêu"}
          tone={achievementPct != null && achievementPct >= 100 ? "good" : "default"}
        />
        <StatCard
          label="% Kế hoạch"
          value={achievementPct != null ? formatPercent(achievementPct) : "—"}
          hint={
            achievementPct != null
              ? `Thời gian đã qua ${formatPercent(timePct)} — ${
                  achievementPct >= timePct ? "đang nhanh hơn tiến độ" : "đang chậm hơn tiến độ"
                }`
              : "Cần giao chỉ tiêu để so sánh"
          }
          tone={achievementPct == null ? "default" : achievementPct >= timePct ? "good" : "warn"}
        />
        <StatCard label="Số đơn hàng" value={formatNumber(metrics.orderCount)} hint={`${metrics.skuCount} SKUs`} />
        <StatCard
          label="Đại lý lấy hàng"
          value={`${dealers.active.length}/${dealers.total}`}
          hint={`${dealers.inactive.length} đại lý chưa lấy hàng`}
          tone={dealers.inactive.length > dealers.active.length ? "warn" : "default"}
        />
      </div>

      {/* Tiến độ so với chỉ tiêu */}
      {target && target.revenueTarget > 0 && (
        <div className="card mt-3 p-4">
          <div className="mb-2 flex flex-wrap items-baseline justify-between gap-2">
            <span className="text-sm font-semibold text-ink-700">Tiến độ thực hiện tháng</span>
            <span className="tnum text-sm text-ink-400">
              {formatVnd(metrics.revenue)} / {formatVnd(target.revenueTarget)}
            </span>
          </div>
          <ProgressBar percent={achievementPct ?? 0} benchmark={timePct} />
          <div className="mt-2 flex justify-between text-xs text-ink-400">
            <span>Đã đạt {formatPercent(achievementPct ?? 0)}</span>
            <span className="tnum">Thời gian đã qua {formatPercent(timePct)}</span>
          </div>
        </div>
      )}

      {/* Việc của tôi — hiện tối đa 5 việc gần hạn nhất */}
      {dueTasks.length > 0 && (
        <div className="mt-4">
          <SectionTitle hint={`${dueTasks.length} việc đang làm`}>
            <Link href="/cong-viec/danh-sach" className="hover:text-brand-600">
              Việc của tôi →
            </Link>
          </SectionTitle>
          <div className="card divide-y divide-[var(--color-line)]">
            {dueTasks.slice(0, 5).map((item) => (
              <Link key={item.id} href="/cong-viec/danh-sach" className="flex items-center gap-3 px-4 py-2.5 hover:bg-ink-50">
                <span className="min-w-0 flex-1 truncate text-sm text-ink-700">{item.title}</span>
                {item.dueDate && (
                  <Badge tone={item.dueDate < todayIso ? "red" : "neutral"}>
                    {item.dueDate < todayIso ? "Quá hạn " : "Hạn "}
                    {formatDate(item.dueDate)}
                  </Badge>
                )}
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Lịch 7 ngày tới */}
      <div className="mt-4">
        <SectionTitle hint="việc, lộ trình, sự kiện, hạn chót">
          <Link href="/cong-viec/lich" className="hover:text-brand-600">
            Lịch 7 ngày tới →
          </Link>
        </SectionTitle>
        {weekAgenda.length === 0 ? (
          <div className="card px-4 py-5 text-center text-sm text-ink-400">
            Chưa có gì trong 7 ngày tới.{" "}
            <Link href="/cong-viec/lich" className="text-brand-600 hover:underline">
              Ghi chú nhớ việc
            </Link>
          </div>
        ) : (
          <div className="card divide-y divide-[var(--color-line)]">
            {weekAgenda.slice(0, 8).map((item) => (
              <Link key={item.id} href={item.href} className="flex items-center gap-3 px-4 py-2.5 hover:bg-ink-50">
                <span className="tnum w-20 shrink-0 text-xs font-semibold text-brand-600">{item.date === todayIso ? "Hôm nay" : formatDate(item.date)}</span>
                <Badge>{AGENDA_KIND_LABEL[item.kind]}</Badge>
                <span className="min-w-0 flex-1 truncate text-sm text-ink-700">{item.title}</span>
              </Link>
            ))}
            {weekAgenda.length > 8 && (
              <Link href="/cong-viec/lich" className="block px-4 py-2 text-center text-xs text-brand-600 hover:bg-ink-50">
                Xem thêm {weekAgenda.length - 8} mục
              </Link>
            )}
          </div>
        )}
      </div>

      {/* Cảnh báo */}
      {openAlerts.length > 0 && (
        <div className="mt-4">
          <SectionTitle hint={`${openAlerts.length} cảnh báo cần xử lý`}>
            <Link href="/canh-bao" className="hover:text-brand-600">
              Cảnh báo mới nhất →
            </Link>
          </SectionTitle>
          <div className="flex flex-col gap-2">
            {openAlerts.map((alert) => (
              <div
                key={alert.id}
                className="card flex items-start gap-3 p-3"
              >
                <span
                  className={`mt-1 h-2 w-2 shrink-0 rounded-full ${
                    alert.severity === "CRITICAL"
                      ? "bg-red-500"
                      : alert.severity === "WARNING"
                        ? "bg-gold-500"
                        : "bg-ink-300"
                  }`}
                />
                <div className="min-w-0">
                  <div className="text-sm font-semibold text-ink-700">
                    {alert.severity !== "INFO" && <span aria-hidden>⚠️ </span>}
                    {alert.title}
                  </div>
                  <div className="truncate text-xs text-ink-400">{alert.message}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Lịch sự kiện chung — các tin có ngày diễn ra từ hôm nay trở đi */}
      {upcomingEvents.length > 0 && (
        <div className="mt-6">
          <SectionTitle hint="sự kiện sắp tới">Lịch sự kiện</SectionTitle>
          <div className="card divide-y divide-[var(--color-line)]">
            {upcomingEvents.map((item) => (
              <div key={item.id} className="flex items-center gap-3 px-4 py-2.5">
                <span className="tnum w-24 shrink-0 text-sm font-semibold text-brand-600">{formatDate(item.eventDate)}</span>
                <span className="min-w-0 flex-1 truncate text-sm text-ink-700">{item.title}</span>
                <Badge tone={item.scopeType === "COMPANY" ? "brand" : "neutral"}>{SCOPE_TAG[item.scopeType]}</Badge>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Thông báo nội bộ */}
      {announcementRows.length > 0 && (
        <div className="mt-6">
          <SectionTitle hint="cập nhật nội bộ">
            <Link href="/thong-bao" className="hover:text-brand-600">
              Thông báo →
            </Link>
          </SectionTitle>
          <div className="grid gap-2 lg:grid-cols-3">
            {announcementRows.slice(0, 6).map((item) => (
              <div key={item.id} className="card p-3">
                <div className="flex items-start justify-between gap-2">
                  <div className="text-sm font-semibold text-ink-700">
                    {item.isPinned && (
                      <span className="mr-1 text-gold-500" title="Đã ghim" aria-label="Đã ghim">
                        ★
                      </span>
                    )}
                    {item.title}
                  </div>
                  <Badge tone={item.scopeType === "COMPANY" ? "brand" : "neutral"}>{SCOPE_TAG[item.scopeType]}</Badge>
                </div>
                <div className="mt-1 whitespace-pre-line text-xs text-ink-500">{item.body}</div>
                {item.attachmentPath &&
                  (item.attachmentMime?.startsWith("image/") ? (
                    <a href={`/api/anh/${item.attachmentPath}`} target="_blank" rel="noopener noreferrer" className="mt-2 block">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={`/api/anh/${item.attachmentPath}`}
                        alt={item.attachmentName ?? "Ảnh đính kèm"}
                        className="max-h-40 w-full rounded-lg object-cover"
                      />
                    </a>
                  ) : (
                    <a
                      href={`/api/anh/${item.attachmentPath}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mt-2 inline-block text-xs text-brand-600 hover:underline"
                    >
                      📎 {item.attachmentName}
                    </a>
                  ))}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Văn bản công ty — toàn công ty xem được, chỉ hiện 3 văn bản mới nhất */}
      {documentRows.length > 0 && (
        <div className="mt-6">
          <SectionTitle hint="văn bản, thông báo, quy định, tài liệu">
            <Link href="/van-ban" className="hover:text-brand-600">
              Văn bản công ty →
            </Link>
          </SectionTitle>
          <div className="grid gap-2 lg:grid-cols-3">
            {documentRows.slice(0, 3).map((doc) => (
              <a
                key={doc.id}
                href={`/api/anh/${doc.filePath}`}
                target="_blank"
                rel="noopener noreferrer"
                className="card p-3 hover:border-brand-300"
              >
                <div className="truncate text-sm font-semibold text-ink-700">{doc.title}</div>
                <div className="mt-1 text-xs text-ink-400">
                  {DOCUMENT_CATEGORY_LABEL[doc.category] ?? "Văn bản"} · {doc.fileName}
                </div>
              </a>
            ))}
          </div>
        </div>
      )}

      {/* Biểu đồ */}
      <div className="mt-6 grid gap-4 lg:grid-cols-2">
        <div className="card p-4">
          <SectionTitle hint="theo ngày trong tháng">Diễn biến doanh thu</SectionTitle>
          <DailyRevenueChart data={byDay.map((d) => ({ day: d.day, revenue: Number(d.revenue) }))} />
        </div>
        <div className="card p-4">
          <SectionTitle hint={`năm ${period.slice(0, 4)}`}>Xu hướng 12 tháng</SectionTitle>
          <MonthlyRevenueChart
            data={byMonth.map((d) => ({ month: d.month, revenue: Number(d.revenue) }))}
          />
        </div>
      </div>

      {/* Bảng phân tích nhanh */}
      <div className="mt-6 grid gap-4 lg:grid-cols-2">
        <div>
          <SectionTitle hint="tỷ trọng đóng góp">Doanh thu theo khu vực</SectionTitle>
          <TableWrap>
            <thead>
              <tr>
                <th>Khu vực</th>
                <th className="text-right">Doanh thu</th>
                <th className="text-right">Tỷ trọng</th>
              </tr>
            </thead>
            <tbody>
              {byTerritory.length === 0 && (
                <tr>
                  <td colSpan={3} className="py-6 text-center text-ink-400">
                    Chưa có dữ liệu trong kỳ.{" "}
                    <Link href="/don-hang/moi" className="font-medium text-brand-600 hover:underline">
                      Lên đơn mới
                    </Link>
                  </td>
                </tr>
              )}
              {byTerritory.map((row) => (
                <tr key={row.territoryId ?? "none"}>
                  <td className="font-medium text-ink-700">{row.territoryName}</td>
                  <td className="tnum text-right">{formatVndShort(Number(row.revenue))}</td>
                  <td className="tnum text-right text-ink-400">
                    {totalRevenue > 0
                      ? formatPercent((Number(row.revenue) / totalRevenue) * 100, 1)
                      : "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </TableWrap>
        </div>

        <div>
          <SectionTitle hint="8 sản phẩm dẫn đầu">Sản phẩm bán chạy</SectionTitle>
          <TableWrap>
            <thead>
              <tr>
                <th>Sản phẩm</th>
                <th className="text-right">SL bán</th>
                <th className="text-right">SL KM</th>
                <th className="text-right">Doanh thu</th>
              </tr>
            </thead>
            <tbody>
              {byProduct.length === 0 && (
                <tr>
                  <td colSpan={4} className="py-6 text-center text-ink-400">
                    Chưa có sản phẩm nào được bán trong kỳ.{" "}
                    <Link href="/don-hang/moi" className="font-medium text-brand-600 hover:underline">
                      Lên đơn mới
                    </Link>
                  </td>
                </tr>
              )}
              {byProduct.map((row) => (
                <tr key={row.productId}>
                  <td>
                    <div className="font-medium text-ink-700">{row.name}</div>
                    <div className="text-[11px] text-ink-400">{row.code}</div>
                  </td>
                  <td className="tnum text-right">{formatNumber(Number(row.qtySold))}</td>
                  <td className="tnum text-right text-ink-400">{formatNumber(Number(row.qtyPromo))}</td>
                  <td className="tnum text-right font-medium">{formatVndShort(Number(row.revenue))}</td>
                </tr>
              ))}
            </tbody>
          </TableWrap>
        </div>
      </div>

      {/* Phân hạng đại lý */}
      {tiers.length > 0 && (
        <div className="mt-6 grid gap-4 lg:grid-cols-3">
          <div className="card p-4 lg:col-span-1">
            <SectionTitle hint="theo doanh thu BQ">Phân hạng đại lý</SectionTitle>
            <TierChart data={tiers.map((t) => ({ tier: t.tier, count: t.count }))} />
          </div>
          <div className="lg:col-span-2">
            <SectionTitle hint="cần liên hệ ngay">Đại lý chưa lấy hàng trong tháng</SectionTitle>
            <TableWrap>
              <thead>
                <tr>
                  <th>Đại lý</th>
                  <th>Khu vực</th>
                  <th>NVKD phụ trách</th>
                </tr>
              </thead>
              <tbody>
                {dealers.inactive.length === 0 && (
                  <tr>
                    <td colSpan={3} className="py-6 text-center text-ink-400">
                      Toàn bộ đại lý đều đã lấy hàng trong kỳ.
                    </td>
                  </tr>
                )}
                {dealers.inactive.slice(0, 8).map((dealer) => (
                  <tr key={dealer.id}>
                    <td>
                      <Link
                        href={`/khach-hang/${dealer.id}`}
                        className="font-medium text-ink-700 hover:text-brand-600"
                      >
                        {dealer.orgName}
                      </Link>
                      {dealer.isKey && (
                        <span className="ml-2">
                          <Badge tone="gold">Key</Badge>
                        </span>
                      )}
                      <div className="text-[11px] text-ink-400">{dealer.code}</div>
                    </td>
                    <td className="text-ink-500">{dealer.territoryName ?? "—"}</td>
                    <td className="text-ink-500">{dealer.ownerName ?? "—"}</td>
                  </tr>
                ))}
              </tbody>
            </TableWrap>
            {dealers.inactive.length > 8 && (
              <p className="mt-2 text-xs text-ink-400">
                Còn {dealers.inactive.length - 8} đại lý khác — xem đầy đủ trong{" "}
                <Link href="/bao-cao" className="text-brand-600 hover:underline">
                  Báo cáo bán hàng
                </Link>
                .
              </p>
            )}
          </div>
        </div>
      )}
    </>
  );
}