import { ActionForm } from "@/components/action-form";
import Link from "next/link";
import { requireSession } from "@/lib/auth";
import { canUploadCompanyDocuments } from "@/lib/rbac";
import { listCompanyDocuments } from "@/lib/documents";
import { DOCUMENT_CATEGORIES, DOCUMENT_CATEGORY_LABEL, fileKindLabel, formatFileSize, isDocumentCategory } from "@/lib/document-categories";
import { formatDateTime, formatNumber } from "@/lib/format";
import { PageHeader, EmptyState, Badge } from "@/components/ui";
import { deleteCompanyDocumentAction, updateCompanyDocumentAction } from "./actions";
import { DocumentUploadForm } from "./upload-form";

export const dynamic = "force-dynamic";

export default async function CompanyDocumentsPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const session = await requireSession();
  const params = await searchParams;

  // Tham số gõ trên đường dẫn: chỉ nhận loại có thật và số trang hợp lệ.
  const q = (params.q ?? "").trim().slice(0, 100);
  const category = isDocumentCategory(params.loai) ? params.loai : "";
  const pageParam = Number(params.trang);
  const wantedPage = Number.isInteger(pageParam) && pageParam >= 1 && pageParam <= 10_000 ? pageParam : 1;

  const [{ rows, total, page, totalPages, byCategory }, canUpload] = await Promise.all([
    listCompanyDocuments(session.tenantId, { q, category, page: wantedPage }),
    canUploadCompanyDocuments(session),
  ]);
  const allCount = Object.values(byCategory).reduce((sum, n) => sum + n, 0);

  const href = (patch: Record<string, string | number> = {}) => {
    const next: Record<string, string | number> = { q, loai: category, trang: 1, ...patch };
    const qs = new URLSearchParams();
    for (const [key, value] of Object.entries(next)) {
      if (value === "" || (key === "trang" && value === 1)) continue;
      qs.set(key, String(value));
    }
    const text = qs.toString();
    return text ? `/van-ban?${text}` : "/van-ban";
  };

  return (
    <>
      <PageHeader
        title="Văn bản công ty"
        subtitle="Văn bản, thông báo, quy định, tài liệu của công ty — toàn công ty xem và tải về được."
        actions={
          <Link href="/" className="btn-ghost">
            ← Trang chủ
          </Link>
        }
      />

      {canUpload && (
        <details className="mb-4">
          <summary className="btn-primary inline-flex cursor-pointer list-none">+ Tải văn bản mới</summary>
          <DocumentUploadForm defaultCategory={category || "VAN_BAN"} />
        </details>
      )}

      <div className="mb-4 flex flex-wrap gap-1.5">
        <Link
          href={href({ loai: "" })}
          className={`rounded-full border px-3 py-1 text-sm font-semibold ${!category ? "border-brand-500 bg-brand-500 text-white" : "border-[var(--color-line)] bg-white text-ink-500 hover:bg-ink-50"}`}
        >
          Tất cả <span className="tnum font-normal opacity-80">{formatNumber(allCount)}</span>
        </Link>
        {DOCUMENT_CATEGORIES.map((c) => (
          <Link
            key={c.key}
            href={href({ loai: c.key })}
            className={`rounded-full border px-3 py-1 text-sm font-semibold ${category === c.key ? "border-brand-500 bg-brand-500 text-white" : "border-[var(--color-line)] bg-white text-ink-500 hover:bg-ink-50"}`}
          >
            {c.label} <span className="tnum font-normal opacity-80">{formatNumber(byCategory[c.key] ?? 0)}</span>
          </Link>
        ))}
      </div>

      <form className="mb-4 flex items-end gap-3" action="/van-ban">
        {category && <input type="hidden" name="loai" value={category} />}
        <div className="min-w-48 flex-1 lg:max-w-md">
          <label htmlFor="q" className="label-caps mb-1.5 block">
            Tìm văn bản
          </label>
          <input id="q" name="q" defaultValue={q} className="input" placeholder="Tên văn bản, trích yếu, tên tệp…" />
        </div>
        <button type="submit" className="btn-ghost">
          Tìm
        </button>
        {q && (
          <Link href={href({ q: "" })} className="pb-2 text-sm text-ink-500 hover:underline">
            Bỏ tìm
          </Link>
        )}
      </form>

      <div className="card p-4">
        {rows.length === 0 ? (
          <EmptyState
            message={q || category ? "Không có văn bản phù hợp." : "Chưa có văn bản nào."}
            hint={q || category ? "Thử bỏ bớt bộ lọc hoặc đổi từ khoá." : "Ban giám đốc hoặc người được cấp quyền có thể tải lên."}
          />
        ) : (
          <ul className="flex flex-col gap-3">
            {rows.map((doc) => (
              <li key={doc.id} className="border-b border-[var(--color-line)] pb-3 last:border-0 last:pb-0">
                <div className="flex flex-wrap items-start justify-between gap-2">
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <a href={`/api/anh/${doc.filePath}`} target="_blank" rel="noopener noreferrer" className="text-sm font-semibold text-ink-700 [overflow-wrap:anywhere] hover:text-brand-600 hover:underline">
                        {doc.title}
                      </a>
                      <Badge tone="brand">{DOCUMENT_CATEGORY_LABEL[doc.category] ?? "Văn bản"}</Badge>
                    </div>
                    {doc.description && <p className="mt-1 text-sm text-ink-500 [overflow-wrap:anywhere]">{doc.description}</p>}
                    <div className="mt-1 text-[11px] text-ink-400 [overflow-wrap:anywhere]">
                      {doc.fileName} · {fileKindLabel(doc.mimeType)} · {formatFileSize(doc.fileSize)} · {formatDateTime(doc.uploadedAt)}
                      {doc.uploadedByName ? ` · ${doc.uploadedByName}` : ""}
                    </div>
                  </div>
                  <div className="flex shrink-0 items-center gap-1.5">
                    <a href={`/api/anh/${doc.filePath}`} target="_blank" rel="noopener noreferrer" className="btn-ghost px-2.5 py-1 text-xs">
                      Mở
                    </a>
                    <a href={`/api/anh/${doc.filePath}?tai=1`} className="btn-ghost px-2.5 py-1 text-xs">
                      Tải về
                    </a>
                    {canUpload && (
                      <ActionForm action={deleteCompanyDocumentAction} confirm={`Xoá văn bản "${doc.title}"? Tệp đính kèm cũng bị xoá và không khôi phục được.`}>
                        <input type="hidden" name="id" value={doc.id} />
                        <button type="submit" className="btn-ghost px-2.5 py-1 text-xs text-red-600">
                          Xoá
                        </button>
                      </ActionForm>
                    )}
                  </div>
                </div>

                {canUpload && (
                  <details className="mt-2">
                    <summary className="cursor-pointer text-xs text-ink-400 hover:text-ink-600">Sửa thông tin</summary>
                    <ActionForm action={updateCompanyDocumentAction} success="Đã cập nhật văn bản." className="mt-2 grid gap-2 lg:grid-cols-2">
                      <input type="hidden" name="id" value={doc.id} />
                      <input name="title" type="text" required maxLength={200} defaultValue={doc.title} className="input" aria-label="Tên văn bản" />
                      <select name="category" defaultValue={doc.category} className="input" aria-label="Loại">
                        {DOCUMENT_CATEGORIES.map((c) => (
                          <option key={c.key} value={c.key}>
                            {c.label}
                          </option>
                        ))}
                      </select>
                      <textarea name="description" rows={2} maxLength={1000} defaultValue={doc.description ?? ""} placeholder="Trích yếu" className="input lg:col-span-2" aria-label="Trích yếu" />
                      <div className="lg:col-span-2">
                        <button type="submit" className="btn-ghost text-xs">
                          Lưu thay đổi
                        </button>
                        <span className="ml-3 text-[11px] text-ink-400">Muốn đổi tệp thì xoá văn bản rồi tải lại.</span>
                      </div>
                    </ActionForm>
                  </details>
                )}
              </li>
            ))}
          </ul>
        )}
      </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({ trang: 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} · {formatNumber(total)} văn bản
          </span>
          {page < totalPages ? (
            <Link href={href({ trang: page + 1 })} className="btn-ghost">
              Sau →
            </Link>
          ) : (
            <span className="btn-ghost pointer-events-none opacity-40">Sau →</span>
          )}
        </nav>
      )}

    </>
  );
}