"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 Link from "next/link";
import React from "react";

const Dashboard: React.FC = () => {
  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 className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <div>
          <h1 className="text-foreground text-3xl font-bold tracking-tight">
            Community Dashboard
          </h1>
          <p className="text-muted-foreground mt-1">
            Welcome to the admin area. Manage your community resources safely.
          </p>
        </div>
        <div className="flex space-x-3">
          <Badge variant="secondary" className="px-2.5 py-0.5 text-sm">
            v2.4.0 Live
          </Badge>
        </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;