import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import {
  KPICards,
  DashboardWidgets,
  ReportsLibrary,
  ExpenseTracker,
  OwnerDigestPreview,
  RolesManager,
  ExportOptions,
  Integrations,
  FAQ,
} from "./components";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export default function DashboardPage({ params }: { params: { lang: Lang } }) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;
  const isAr = params.lang === "ar";

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* ══════════════════════════════════════════════════════════════════
          HERO SECTION - Editorial Magazine Style
      ══════════════════════════════════════════════════════════════════ */}
      <section className="relative bg-[#FAFAFA] overflow-hidden">
        {/* Subtle geometric accent */}
        <div
          className="absolute top-0 right-0 w-[600px] h-[600px] pointer-events-none"
          style={{
            background:
              "radial-gradient(circle at center, rgba(16, 185, 129, 0.06) 0%, transparent 70%)",
          }}
        />

        <div className="max-w-7xl mx-auto px-6 py-20 md:py-28">
          <div className="grid lg:grid-cols-[1.2fr_1fr] gap-16 items-center">
            {/* Left: Content */}
            <div>
              {/* Section number */}
              <div className="flex items-center gap-4 mb-8">
                <div className="flex items-center gap-3">
                  <span
                    className="text-[#10B981] font-mono text-sm tracking-wider"
                    dir="ltr"
                  >
                    01
                  </span>
                  <div className="w-12 h-px bg-[#10B981]" />
                </div>
                <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
                  {isAr ? "لوحة التحكم" : "Dashboard Analytics"}
                </span>
              </div>

              {/* Headline */}
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] leading-[1.1] tracking-tight mb-8">
                {t.dashboardHeroTitle}
              </h1>

              {/* Subheadline */}
              <p className="text-xl text-[#64748B] leading-relaxed max-w-xl mb-10">
                {t.dashboardHeroSubline}
              </p>

              {/* Feature bullets - Square style */}
              <ul className="space-y-3 mb-10">
                {[
                  t.dashboardBadge1,
                  t.dashboardBadge2,
                  t.dashboardBadge3,
                  t.dashboardBadge4,
                ].map((badge, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#10B981] mt-2.5 flex-shrink-0" />
                    <span className="text-[#1E293B] font-medium">{badge}</span>
                  </li>
                ))}
              </ul>

              {/* CTAs */}
              <div className="flex flex-wrap gap-4">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group relative px-8 py-4 bg-[#10B981] text-white font-semibold overflow-hidden transition-colors"
                >
                  <span className="relative z-10 flex items-center gap-2">
                    {t.tryFree}
                    <span className="transition-transform duration-300 group-hover:translate-x-1">
                      {isAr ? "←" : "→"}
                    </span>
                  </span>
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="px-8 py-4 border-2 border-[#10B981] text-[#10B981] font-semibold hover:bg-[#10B981]/5 transition-colors flex items-center gap-2"
                >
                  {t.demo}
                  <span>{isAr ? "←" : "→"}</span>
                </Link>
              </div>

              {/* Trust line */}
              <p className="mt-8 text-sm text-[#94A3B8]">
                {t.dashboardHeroTrust}
              </p>
            </div>

            {/* Right: Stats Preview - Editorial Cards */}
            <div className="grid grid-cols-2 gap-px bg-slate-200">
              {[
                {
                  value: "125,450",
                  label: isAr ? "الإيرادات" : "Revenue",
                  suffix: "QAR",
                  num: "01",
                },
                {
                  value: "342",
                  label: isAr ? "الحجوزات" : "Bookings",
                  suffix: "",
                  num: "02",
                },
                {
                  value: "87%",
                  label: isAr ? "معدل الحضور" : "Show Rate",
                  suffix: "",
                  num: "03",
                },
                {
                  value: "76%",
                  label: isAr ? "الاستخدام" : "Utilization",
                  suffix: "",
                  num: "04",
                },
              ].map((stat) => (
                <div
                  key={stat.num}
                  className="group bg-white p-6 md:p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <div className="flex items-center gap-2 mb-3">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {stat.num}
                    </span>
                    <span className="text-xs font-medium text-[#94A3B8] uppercase tracking-wider">
                      {stat.label}
                    </span>
                  </div>
                  <div className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                    {stat.value}
                    {stat.suffix && (
                      <span className="text-lg font-normal text-[#64748B] ml-1">
                        {stat.suffix}
                      </span>
                    )}
                  </div>
                  <div className="w-0 group-hover:w-10 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          KPIs SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "مؤشرات الأداء" : "Performance Metrics"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.dashboardKPIsTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.dashboardKPIsSubtitle}
            </p>
          </div>

          <KPICards lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          LIVE DASHBOARD SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "بيانات مباشرة" : "Real-Time Data"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.dashboardLiveTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl mb-3">
              {t.dashboardLiveSubtitle}
            </p>
            <p className="text-base text-[#94A3B8] max-w-2xl">
              {t.dashboardLiveDesc}
            </p>
          </div>

          <DashboardWidgets lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          REPORTS LIBRARY - Light Background Editorial Style
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "رؤى وتحليلات" : "Insights & Analytics"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.reportsLibraryTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.reportsLibrarySubtitle}
            </p>
          </div>

          <ReportsLibrary lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          EXPENSES SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "النظرة المالية" : "Financial Overview"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.expensesTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.expensesSubtitle}
            </p>
          </div>

          <ExpenseTracker lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          OWNER DIGEST SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "ابقَ على اطلاع" : "Stay Informed"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.ownerDigestTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.ownerDigestSubtitle}
            </p>
          </div>

          <OwnerDigestPreview lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          ROLES & LOCATIONS SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "التحكم بالوصول" : "Access Control"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.rolesLocationsTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.rolesLocationsSubtitle}
            </p>
          </div>

          <RolesManager lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          EXPORT & SHARING SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "قابلية نقل البيانات" : "Data Portability"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.exportSharingTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.exportSharingSubtitle}
            </p>
          </div>

          <ExportOptions lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          INTEGRATIONS SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "ربط كل شيء" : "Connect Everything"}
            </span>
          </div>

          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
              {t.integrationsTitle}
            </h2>
            <p className="text-lg text-[#64748B] max-w-2xl">
              {t.integrationsSubtitle}
            </p>
          </div>

          <Integrations lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          FAQ SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header - Centered for FAQ */}
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-4 mb-6">
              <div className="flex items-center gap-3">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  10
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
              </div>
              <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
                {isAr ? "الأسئلة الشائعة" : "Common Questions"}
              </span>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.faqTitle}
            </h2>
          </div>

          <div className="max-w-3xl mx-auto">
            <FAQ lang={params.lang} />
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          FINAL CTA - Light Green Tinted Background
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-20 md:py-28 bg-gradient-to-br from-[#10B981]/[0.05] via-white to-[#10B981]/[0.03]">
        <div className="max-w-4xl mx-auto px-6 text-center">
          {/* Section number */}
          <div className="inline-flex items-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              11
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-sm font-medium text-[#64748B] uppercase tracking-wider">
              {isAr ? "ابدأ الآن" : "Get Started"}
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1E293B] leading-tight mb-6">
            {t.closingCTATitle}
          </h2>

          <p className="text-xl text-[#64748B] max-w-2xl mx-auto mb-10">
            {t.closingCTAText}
          </p>

          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative px-10 py-5 bg-[#10B981] text-white text-lg font-semibold overflow-hidden transition-colors"
            >
              <span className="relative z-10 flex items-center gap-2">
                {t.getStarted}
                <span className="transition-transform duration-300 group-hover:translate-x-1">
                  {isAr ? "←" : "→"}
                </span>
              </span>
              <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="px-10 py-5 border-2 border-[#1E293B] text-[#1E293B] text-lg font-semibold hover:bg-[#1E293B] hover:text-white transition-colors flex items-center gap-2"
            >
              {t.scheduleDemo}
              <span>{isAr ? "←" : "→"}</span>
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}