import Link from "next/link";
import { requireSession } from "@/lib/auth";
import { canApproveOrders } from "@/lib/rbac";
import { today } from "@/lib/period";
import { ORDER_PAGE_SIZE, ORDER_STATUS_FILTERS, loadOrderList, orderCreatorOptions, parseOrderListQuery, type OrderListQuery, type OrderListRow } from "@/lib/order-list";
import { formatVnd, formatVndShort, formatDate, formatNumber, orderStatusBadge } from "@/lib/format";
import { PageHeader, TableWrap, StatCard, Badge } from "@/components/ui";

export const dynamic = "force-dynamic";

export default async function OrdersPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const session = await requireSession();
  const params = await searchParams;
  const query = parseOrderListQuery((key) => params[key]);

  const [list, creators] = await Promise.all([loadOrderList(session, query), orderCreatorOptions(session)]);
  const { rows, total, page, totalPages, counts, stats } = list;

  const queryString = (patch: Partial<OrderListQuery> = {}) => {
    const next = { ...query, page: 1, ...patch };
    const qs = new URLSearchParams();
    qs.set("tu", next.from);
    qs.set("den", next.to);
    if (next.status) qs.set("tt", next.status);
    if (next.vat) qs.set("vat", "1");
    if (next.q) qs.set("q", next.q);
    if (next.creator) qs.set("nguoi", next.creator);
    if (next.page > 1) qs.set("trang", String(next.page));
    return qs.toString();
  };
  const href = (patch: Partial<OrderListQuery> = {}) => `/don-hang?${queryString(patch)}`;
  const exportHref = `/api/xuat-excel?loai=don-hang&${queryString()}`;

  const todayIso = today();
  const promoRatio = stats.revenue > 0 ? stats.promo / stats.revenue : 0;
  const canApprove = canApproveOrders(session);

  const vatBadge = (row: OrderListRow) =>
    row.vatRequired ? (
      <span title="Đơn cần xuất hoá đơn VAT" className="ml-1.5 inline-flex items-center rounded bg-brand-500 px-1.5 py-0.5 align-middle text-[10px] font-bold uppercase tracking-wide text-white">
        VAT
      </span>
    ) : null;

  return (
    <>
      <PageHeader
        title="Đơn hàng"
        subtitle="Số lượng bán và số lượng khuyến mãi tách riêng — doanh thu chỉ tính trên hàng bán."
        actions={
          <>
            <a href={exportHref} className="btn-ghost" download>
              Xuất Excel
            </a>
            <Link href="/san-pham" className="btn-ghost">
              Sản phẩm
            </Link>
            <Link href="/danh-muc/khoa-hoc" className="btn-ghost">
              Chuyển giao
            </Link>
            <Link href="/don-hang/moi" className="btn-primary">
              Lên đơn mới
            </Link>
          </>
        }
      />

      <form className="mb-4 flex flex-wrap items-end gap-3" action="/don-hang">
        {query.status && <input type="hidden" name="tt" value={query.status} />}
        <div className="min-w-48 flex-1">
          <label htmlFor="q" className="label-caps mb-1.5 block">
            Tìm đơn
          </label>
          <input id="q" name="q" defaultValue={query.q} className="input" placeholder="Mã đơn, mã KH, tên cơ sở…" />
        </div>
        <div>
          <label htmlFor="tu" className="label-caps mb-1.5 block">
            Từ ngày
          </label>
          <input id="tu" name="tu" type="date" defaultValue={query.from} className="input" />
        </div>
        <div>
          <label htmlFor="den" className="label-caps mb-1.5 block">
            Đến ngày
          </label>
          <input id="den" name="den" type="date" defaultValue={query.to} className="input" />
        </div>
        {creators.length > 1 && (
          <div>
            <label htmlFor="nguoi" className="label-caps mb-1.5 block">
              Người tạo đơn
            </label>
            <select id="nguoi" name="nguoi" defaultValue={query.creator} className="input">
              <option value="">Tất cả</option>
              {creators.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>
        )}
        <label className="flex items-center gap-2 pb-2 text-sm text-ink-600">
          <input type="checkbox" name="vat" value="1" defaultChecked={query.vat} className="h-4 w-4 accent-brand-500" />
          Chỉ đơn cần xuất VAT
        </label>
        <button type="submit" className="btn-ghost">
          Xem
        </button>
      </form>

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <StatCard label="Doanh thu" value={formatVndShort(stats.revenue)} hint={`${formatVnd(stats.revenue)} · đơn đã duyệt`} />
        <StatCard label="Số đơn đã duyệt" value={formatNumber(stats.confirmedCount)} />
        <StatCard label="Số khách mua" value={formatNumber(stats.customerCount)} />
        <StatCard
          label="Giá trị hàng KM"
          value={formatVndShort(stats.promo)}
          hint={stats.revenue > 0 ? `${(promoRatio * 100).toFixed(1)}% doanh thu` : undefined}
          tone={promoRatio > 0.15 ? "warn" : "default"}
        />
      </div>

      {/* Lọc nhanh theo trạng thái, kèm số đơn */}
      <div className="mt-4 flex flex-wrap gap-1.5">
        {[{ key: "", label: "Tất cả" }, ...ORDER_STATUS_FILTERS.map((s) => ({ key: s.key as string, label: s.label }))].map((item) => {
          const highlight = canApprove && item.key === "cho-duyet" && (counts[item.key] ?? 0) > 0 && query.status !== item.key;
          return (
            <Link
              key={item.key || "all"}
              href={href({ status: item.key as OrderListQuery["status"] })}
              className={`rounded-full border px-3 py-1 text-sm font-semibold ${
                query.status === item.key
                  ? "border-brand-500 bg-brand-500 text-white"
                  : highlight
                    ? "border-gold-500 bg-gold-100 text-ink-700"
                    : "border-[var(--color-line)] bg-white text-ink-500 hover:bg-ink-50"
              }`}
            >
              {item.label} <span className="tnum font-normal opacity-80">{formatNumber(counts[item.key] ?? 0)}</span>
            </Link>
          );
        })}
      </div>

      <p className="mt-2 text-xs text-ink-400">{formatNumber(total)} đơn phù hợp</p>

      {/* Điện thoại / màn hình nhỏ: mỗi đơn một thẻ — bảng 10 cột buộc phải vuốt ngang. */}
      <div className="mt-3 flex flex-col gap-2 xl:hidden">
        {rows.length === 0 && (
          <div className="card px-4 py-8 text-center text-sm text-ink-400">
            Không có đơn hàng phù hợp bộ lọc.
            <div className="mt-3">
              <Link href="/don-hang/moi" className="btn-primary">
                Lên đơn mới
              </Link>
            </div>
          </div>
        )}
        {rows.map((row) => {
          const badge = orderStatusBadge(row);
          return (
            <Link key={row.id} href={`/don-hang/${row.id}`} className="card block p-3.5 active:bg-ink-50">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <div className="font-semibold text-ink-700">{row.customerName}</div>
                  <div className="mt-0.5 text-[11px] text-ink-400">
                    {row.code}
                    {vatBadge(row)} · {row.customerCode} · {formatDate(row.orderDate)}
                  </div>
                </div>
                <Badge tone={badge.tone}>{badge.label}</Badge>
              </div>
              <div className="mt-2.5 flex items-end justify-between gap-3 border-t border-line pt-2.5 text-xs text-ink-400">
                <div>
                  <div>Tạo bởi {row.createdByName ?? row.salesName ?? "—"}</div>
                  <div className="mt-0.5">
                    {row.lineCount} dòng
                    {row.promoValue > 0 ? ` · KM ${formatVndShort(row.promoValue)}` : ""}
                    {row.remaining > 0 ? ` · còn ${formatVndShort(row.remaining)}` : ""}
                  </div>
                </div>
                <div className="tnum shrink-0 text-base font-bold text-ink-700">{formatVndShort(row.totalAmount)}</div>
              </div>
            </Link>
          );
        })}
      </div>

      <div className="mt-3 hidden xl:block">
        <TableWrap>
          <thead>
            <tr>
              <th>Ngày tạo đơn</th>
              <th>Mã đơn hàng</th>
              <th>Mã KH</th>
              <th>Tên cơ sở</th>
              <th>Người tạo đơn</th>
              <th>Trạng thái</th>
              <th className="text-right">Doanh số</th>
              <th className="text-right">Doanh thu</th>
              <th className="text-right">Thanh toán</th>
              <th className="text-right">Còn lại</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={10} className="py-10 text-center text-ink-400">
                  Không có đơn hàng phù hợp bộ lọc.
                </td>
              </tr>
            )}
            {rows.map((row) => {
              const badge = orderStatusBadge(row);
              const late = row.remaining > 0 && !!row.dueDate && row.dueDate < todayIso;
              return (
                <tr key={row.id}>
                  <td className="tnum whitespace-nowrap text-ink-500">{formatDate(row.orderDate)}</td>
                  <td className="whitespace-nowrap">
                    <Link href={`/don-hang/${row.id}`} className="font-medium text-ink-700 hover:text-brand-600">
                      {row.code}
                    </Link>
                    {vatBadge(row)}
                  </td>
                  <td className="tnum whitespace-nowrap text-ink-500">{row.customerCode}</td>
                  <td className="text-ink-700">
                    {row.customerName}
                    <div className="text-[11px] text-ink-400">{row.territoryName ?? "—"}</div>
                  </td>
                  <td className="text-ink-500">
                    {row.createdByName ?? row.salesName ?? "—"}
                    {row.salesName && row.createdByName && row.createdByName !== row.salesName && (
                      <div className="text-[11px] text-ink-400">NVKD {row.salesName}</div>
                    )}
                  </td>
                  <td>
                    <Badge tone={badge.tone}>{badge.label}</Badge>
                  </td>
                  <td className={`tnum text-right ${row.status === "CANCELLED" ? "text-ink-300 line-through" : "font-semibold"}`}>
                    {formatVnd(row.totalAmount)}
                    {row.promoValue > 0 && <div className="text-[11px] font-normal text-ink-400">KM {formatVndShort(row.promoValue)}</div>}
                  </td>
                  <td className="tnum text-right">{row.status === "CONFIRMED" ? formatVnd(row.totalAmount) : <span className="text-ink-300">—</span>}</td>
                  <td className="tnum text-right text-emerald-700">{row.paid > 0 ? formatVnd(row.paid) : <span className="text-ink-300">—</span>}</td>
                  <td className="tnum text-right">
                    {row.remaining > 0 ? (
                      <span className={`font-semibold ${late ? "text-red-600" : "text-gold-500"}`}>
                        {formatVnd(row.remaining)}
                        {late && <div className="text-[11px] font-medium">quá hạn {formatDate(row.dueDate)}</div>}
                      </span>
                    ) : (
                      <span className="text-ink-300">—</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </TableWrap>
      </div>

      {totalPages > 1 && (
        <nav className="mt-4 flex items-center justify-center gap-3 text-sm" aria-label="Phân trang">
          {page > 1 ? (
            <Link href={href({ page: page - 1 })} className="btn-ghost">
              ← Trước
            </Link>
          ) : (
            <span className="btn-ghost pointer-events-none opacity-40">← Trước</span>
          )}
          <span className="text-ink-500">
            Trang {page}/{totalPages} · {(page - 1) * ORDER_PAGE_SIZE + 1}–{Math.min(page * ORDER_PAGE_SIZE, total)} / {formatNumber(total)}
          </span>
          {page < totalPages ? (
            <Link href={href({ page: page + 1 })} className="btn-ghost">
              Sau →
            </Link>
          ) : (
            <span className="btn-ghost pointer-events-none opacity-40">Sau →</span>
          )}
        </nav>
      )}

      <p className="mt-3 text-xs text-ink-400">
        Doanh số = tiền hàng đơn chưa huỷ (kể cả chờ duyệt); doanh thu = đơn đã duyệt. Còn lại = phải thu (tiền hàng + phụ thu phí) − đã thu, chỉ tính đơn đã duyệt. Bấm một đơn để xem
        chi tiết.
      </p>
    </>
  );
}