import Link from "next/link";

import { Building2, Mail, UserCircle } from "lucide-react";

import { PageLayout, PageSection } from "@/components/design-system/page-layout";

import { StatTrend } from "@/components/design-system/charts";

import { getMarketFacets } from "@/server/services/market.service";

import { MarketSubNav } from "@/components/market/market-sub-nav";



const QUICK_LINKS = [

  { href: "/market/companies", label: "الشركات", labelEn: "Companies", icon: Building2 },

  { href: "/market/people", label: "الأشخاص", labelEn: "People", icon: UserCircle },

  {

    href: "/market/contact-points",

    label: "نقاط الاتصال",

    labelEn: "Contact Points",

    icon: Mail,

  },

] as const;



export default async function MarketPage() {

  const stats = await getMarketFacets();



  const cards = [

    { label: "إجمالي الشركات", labelEn: "Companies", value: stats.totalCompanies },

    { label: "إجمالي الأشخاص", labelEn: "People", value: stats.totalPeople },

    { label: "إجمالي البريد", labelEn: "Emails", value: stats.totalEmails },

    { label: "إجمالي الجوال", labelEn: "Mobiles", value: stats.totalMobiles },

  ];



  return (

    <div className="space-y-6">

      <MarketSubNav />

      <PageLayout

        title="قاعدة بيانات السوق"

        description="تصفح وبحث في بيانات السوق المستوردة — شركات، أشخاص، ونقاط اتصال."

        maxWidth={false}

      >

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">

          {cards.map((card) => (

            <StatTrend

              key={card.label}

              label={card.label}

              value={card.value.toLocaleString("ar-SA")}

              trendLabel={card.labelEn}

            />

          ))}

        </div>



        <PageSection title="روابط سريعة" className="mt-8">

          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">

            {QUICK_LINKS.map((link) => {

              const Icon = link.icon;

              return (

                <Link

                  key={link.href}

                  href={link.href}

                  className="surface-elevated group flex items-center gap-4 p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg"

                >

                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground">

                    <Icon className="h-6 w-6" />

                  </div>

                  <div>

                    <span className="block font-semibold text-foreground">{link.label}</span>

                    <span className="text-xs text-muted-foreground">{link.labelEn}</span>

                  </div>

                </Link>

              );

            })}

          </div>

        </PageSection>

      </PageLayout>

    </div>

  );

}