cgr-next-js/app/[locale]/(backend)/page.tsx

"use client";

import ModuleCard from "@/components/ModuleCard";
import StatCard from "@/components/StatCard";
import { Badge } from "@/components/ui/badge";
import { ModuleCategory } from "@/lib/types/dashboard";
import {
  BookOpen,
  Building2,
  Calendar,
  FileText,
  History,
  Languages,
  Layout,
  List,
  MapPin,
  Mic2,
  Music,
  Sparkles,
  Tag,
  UserCircle,
  Users,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import Link from "next/link";
import React from "react";
import { bibleVerses, localizedContent } from "./lib/dailyVerseData";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import Image from "next/image";

const Dashboard: React.FC = () => {
  // 1. Get a unique number for the current day
  const today = new Date();
  today.setHours(0, 0, 0, 0); // Normalize to midnight
  const dayTimestamp = today.getTime();

  // 2. Use the timestamp to get a consistent index
  // The modulo (%) operator ensures the index is always within array bounds
  const verseIndex = dayTimestamp % bibleVerses.length;
  const todayVerse = bibleVerses[verseIndex];
  const params = useParams();
  const lng = params.locale as keyof localizedContent || "en"; // Default to English if no locale is provided
  const t = useTranslations("dashboard");

  const categories: ModuleCategory[] = [
    {
      title: "People & Community",
      items: [
        {
          id: "users",
          title: "Users",
          description: "Manage registered users, permissions, and roles.",
          icon: Users,
          path: "/users",
        },
        {
          id: "profiles",
          title: "Profiles",
          description: "Create, edit, or remove detailed user profiles.",
          icon: UserCircle,
          path: "/profiles",
        },
        {
          id: "communities",
          title: "Communities",
          description: "Manage different community groups and branches.",
          icon: Building2,
          path: "/communities",
        },
        {
          id: "addresses",
          title: "Addresses",
          description:
            "Database of addresses for registered users and locations.",
          icon: MapPin,
          path: "/addresses",
        },
      ],
    },
    {
      title: "Worship & Events",
      items: [
        {
          id: "services",
          title: "Services & Lectures",
          description:
            "Schedule and manage church services and lecture events.",
          icon: Calendar,
          path: "/services",
        },
        {
          id: "lectures_list",
          title: "Lectures List",
          description:
            "Browse the complete archive of lectures from all communities.",
          icon: Mic2,
          path: "/lectures",
        },
        {
          id: "holidays",
          title: "Feast Days",
          description: "Configure upcoming holidays and special feast days.",
          icon: Sparkles,
          path: "/holidays",
        },
        {
          id: "services_list",
          title: "Services List",
          description: "View only the scheduled services overview.",
          icon: List,
          path: "/services-list",
        },
      ],
    },
    {
      title: "Music & Content",
      items: [
        {
          id: "songbooks",
          title: "Songbooks",
          description: "Manage digital songbook collections and versions.",
          icon: BookOpen,
          path: "/songbooks",
        },
        {
          id: "songs",
          title: "Songs & Poems",
          description: "Create and edit lyrics, poems, and musical content.",
          icon: Music,
          path: "/songs",
        },
        {
          id: "themes",
          title: "Themes",
          description: "Organize songs and poems into thematic categories.",
          icon: Tag,
          path: "/themes",
        },
        {
          id: "titles",
          title: "Titles",
          description: "Index of all titles for lectures, songs, and poems.",
          icon: Layout,
          path: "/titles",
        },
      ],
    },
    {
      title: "System & Config",
      items: [
        {
          id: "changes",
          title: "Change Log",
          description: "Track database modifications and user activities.",
          icon: History,
          path: "/changes",
        },
        {
          id: "types",
          title: "Lecture Types",
          description:
            "Define and categorize different types of presentations.",
          icon: Tag,
          path: "/types",
        },
        {
          id: "contributions",
          title: "Contributions",
          description: "Manage community posts and member contributions.",
          icon: FileText,
          path: "/contributions",
        },
        {
          id: "languages",
          title: "Languages",
          description: "Configure supported languages and translations.",
          icon: Languages,
          path: "/languages",
        },
      ],
    },
  ];

  return (
    <div className="mx-auto max-w-7xl space-y-8">
      {/* Welcome Section */}
      <div data-cmp="ModuleCard" className="group bg-card border border-border rounded-xl p-6 h-full overflow-hidden">
        <div className="animate-in items-baseline fade-in slide-in-from-bottom-4 duration-700 flex flex-col sm:flex-row grow pr-6 gap-2">
          <span className="text-2xl md:text-3xl text-nowrap font-semibold leading-none">{t("greeting_name", { user: "Alexander" })}</span>
          <span className="text-xl font-semibold text-nowrap leading-none"> {t("greeting")}</span>
        </div>
        <div className="flex-col mt-4">
          <p>
            <span className="font-semibold">{t("verse_intro")}</span> <br />
            <i className="italic text-foreground">"{todayVerse.content[lng]}"</i>
          </p>
          <div className="flex justify-end mt-3">
            <Badge variant="outline" className="rounded-sm self-start">
              {todayVerse.reference}
            </Badge>
          </div>
        </div>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
        <StatCard
          label="Total Members"
          value="2,845"
          icon={Users}
          trend="up"
          change="12% this month"
        />
        <StatCard
          label="Upcoming Services"
          value="24"
          icon={Calendar}
          trend="neutral"
          change="Next 7 days"
        />
        <StatCard
          label="Songs Database"
          value="1,430"
          icon={Music}
          trend="up"
          change="5 new added"
        />
      </div>

      {/* Categories */}
      <div className="space-y-10">
        {categories.map((category) => (
          <div
            key={category.title}
            className="animate-in fade-in slide-in-from-bottom-4 duration-700"
          >
            <div className="mb-6 flex items-center space-x-2">
              <h2 className="text-foreground border-primary border-l-4 pl-3 text-xl font-semibold">
                {category.title}
              </h2>
              <div className="bg-border ml-4 h-px flex-1 opacity-50"></div>
            </div>

            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
              {category.items.map((item) => (
                <Link key={item.id} href={item.path} className="block">
                  <ModuleCard
                    key={item.id}
                    title={item.title}
                    description={item.description}
                    icon={item.icon}
                  //onClick={() => console.log(`Navigating to ${item.path}`)}
                  />
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Dashboard;