/**
 * Billing History Page - Dedicated page for complete billing details
 * Shows full payment history, invoices, and subscription management
 */

import { redirect } from "next/navigation";
import Link from "next/link";
import { auth } from "@/lib/auth";
import { checkDashboardAccess } from "@/lib/dashboard-access";
import { SITE, type Lang } from "@/lib/config";
import BillingHistory from "../components/BillingHistory";
import SubscriptionDetails from "../components/SubscriptionDetails";
import InvoicesList from "../components/InvoicesList";

// Force dynamic rendering
export const dynamic = "force-dynamic";
export const revalidate = 0;

export default async function BillingPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const { lang } = params;
  const isAr = lang === "ar";

  // Server-side authentication check
  const session = await auth();

  if (!session?.user?.id) {
    redirect(`/${lang}/login`);
  }

  // Check dashboard access
  const accessStatus = await checkDashboardAccess(session.user.id);

  if (!accessStatus.hasAccess) {
    const redirectUrl =
      accessStatus.redirectUrl?.replace("/en/", `/${lang}/`) ||
      `/${lang}/signup`;
    redirect(redirectUrl);
  }

  return (
    <main className="min-h-screen bg-slate-50" dir={isAr ? "rtl" : "ltr"}>
      {/* Top App Bar */}
      <header className="border-b border-slate-200 bg-white/90 backdrop-blur-sm sticky top-0 z-10">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4">
            <Link
              href={`/${lang}/dashboard`}
              className="text-slate-600 hover:text-brand-green transition-colors"
            >
              ← {isAr ? "العودة للوحة التحكم" : "Back to Dashboard"}
            </Link>
          </div>
          <div className="flex items-center gap-2">
            <Link href={`/${lang}`}>
              <img src="/mawidi-icon.svg" alt="Mawidi" className="h-10 w-auto" width={40} height={40} />
            </Link>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        {/* Page Header */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-slate-900">
            {isAr ? "الفواتير والاشتراك" : "Billing & Subscription"}
          </h1>
          <p className="mt-2 text-sm text-slate-600">
            {isAr
              ? "إدارة خطتك، طريقة الدفع، وعرض سجل الفواتير الكامل."
              : "Manage your plan, payment method, and view complete billing history."}
          </p>
        </div>

        {/* Subscription Details */}
        <section className="mb-8">
          <SubscriptionDetails lang={lang} />
        </section>

        {/* Stripe Invoices - Direct from Stripe */}
        <section className="mb-8">
          <InvoicesList lang={lang} />
        </section>

        {/* Local Billing History */}
        <section>
          <BillingHistory lang={lang} limit={100} showViewAll={false} />
        </section>

        {/* Help Card */}
        <section className="mt-8 rounded-xl bg-gradient-to-br from-slate-900 to-slate-800 p-6 text-white">
          <h3 className="text-lg font-semibold">
            {isAr ? "هل تحتاج مساعدة؟" : "Need help?"}
          </h3>
          <p className="mt-2 text-sm text-slate-300">
            {isAr
              ? "إذا كان لديك أسئلة حول فاتورتك أو اشتراكك، فريق الدعم لدينا جاهز لمساعدتك."
              : "If you have questions about your billing or subscription, our support team is ready to help."}
          </p>
          <div className="mt-4 flex flex-wrap gap-3">
            <Link
              href={`/${lang}/contact`}
              className="rounded-lg bg-white px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-slate-100 transition-colors"
            >
              {isAr ? "📧 اتصل بالدعم" : "📧 Contact Support"}
            </Link>
            <Link
              href={`/${lang}/pricing`}
              className="rounded-lg border border-white/30 px-4 py-2 text-sm font-medium text-white hover:bg-white/10 transition-colors"
            >
              {isAr ? "📊 مقارنة الخطط" : "📊 Compare Plans"}
            </Link>
          </div>
        </section>
      </div>
    </main>
  );
}