import { typedQuery } from "@/backend/utils/typedQuery";

export const dynamic = "force-dynamic";
export const revalidate = 0;

type TermsRow = {
  categoryName: string;
  categoryOrder: number;
  descriptionPoint: string;
  pointOrder: number;
};

type TermsGroup = {
  category: string;
  points: string[];
};

export default async function ScrollPopupTermsPage() {
  let groupedTerms: TermsGroup[] = [];

  try {
    const [rows] = await typedQuery<TermsRow>(
      `
      SELECT
        category_name AS categoryName,
        category_order AS categoryOrder,
        description_point AS descriptionPoint,
        point_order AS pointOrder
      FROM scroll_popup_terms_conditions
      WHERE is_active = 1
      ORDER BY category_order ASC, point_order ASC, idscroll_popup_terms_condition ASC
      `
    );

    const groupedMap = new Map<string, TermsGroup>();

    for (const row of rows) {
      if (!groupedMap.has(row.categoryName)) {
        groupedMap.set(row.categoryName, { category: row.categoryName, points: [] });
      }
      groupedMap.get(row.categoryName)?.points.push(row.descriptionPoint);
    }

    groupedTerms = Array.from(groupedMap.values());
  } catch (error) {
    console.error("[ERROR] Failed to render scroll popup terms page:", error);
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg overflow-hidden">
        <div className="p-6 sm:p-8">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900">
              Scroll Popup Terms & Conditions
            </h1>
            <p className="mt-2 text-gray-600">
              Offer-specific terms for promotions shown in the scroll popup.
            </p>
            <p className="mt-2 text-gray-600">
              Last updated: {new Date().toLocaleDateString()}
            </p>
          </div>

          <div className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto">
            <p className="mb-6">
              These terms and conditions apply to promotional offers displayed in the
              scroll popup on BanksFinders. By proceeding with an application or
              sharing your details through the popup, you acknowledge and accept the
              applicable offer terms listed below.
            </p>

            {groupedTerms.length === 0 ? (
              <p>No terms are available right now.</p>
            ) : (
              groupedTerms.map((group) => (
                <div key={group.category} className="mb-6">
                  <h2 className="text-xl font-semibold mt-8 mb-4">{group.category}</h2>
                  <ul className="list-disc pl-6 mb-6 space-y-2">
                    {group.points.map((point, index) => (
                      <li key={`${group.category}-${index}`}>{point}</li>
                    ))}
                  </ul>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}