cgr-next-js/app/(backend)/users/page.tsx

'use client';

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, Plus, MoreVertical, Filter } from "lucide-react";
import { UserMobileCard } from "./components/UserMobileCard";
import { UserFormWrapper } from "./components/UserFormWrapper";

// Temporary user data for demonstration
const tempUsers = [
    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", joinedAt: "2023-01-01", status: "active" },
    { id: 2, name: "Alice Smith", email: "alice@test.com", role: "Editor", joinedAt: "2023-02-15", status: "active" },
    { id: 3, name: "Bob Johnson", email: "bob@community.com", role: "Member", joinedAt: "2023-03-10", status: "inactive" },
    { id: 4, name: "Charlie Brown", email: "charlie@community.com", role: "Member", joinedAt: "2023-04-20", status: "active" },
];

export default function UsersPage() {

    const [open, setOpen] = useState(false)

    return (
        <div className="space-y-6">
            <div className="flex flex-col gap-6 md:gap-10 p-0">

                {/* Header: Title + Button for Desktop only */}
                <div className="hidden md:flex items-center justify-between">
                    <div className="space-y-1">
                        <h1 className="text-4xl font-bold tracking-tight text-white">
                            Users
                        </h1>
                        <p className="hidden md:block text-muted-foreground text-lg mt-3 max-w-2xl">
                            Manage your community members, roles, and permissions here.
                        </p>
                    </div>

                    {/* Button: Add New User for Desktop only */}
                    <UserFormWrapper />
                </div>

                {/* Search + Filter */}
                <div className="flex gap-3 md:gap-4">
                    <div className="relative w-full group">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
                        <Input
                            className="w-full bg-card border border-border rounded-lg py-1 pl-10 pr-12 h-10 focus:outline-1"
                            placeholder="Search users..."
                        />
                        <div className="absolute right-2 top-1/2 -translate-y-1/2">
                            <Button
                                variant="ghost"
                                size="icon"
                                className="size-8 md:size-10 hover:bg-muted text-muted-foreground hover:text-white transition-colors"
                            >
                                <Filter className="size-4 md:size-5" />
                                <span className="sr-only">Filters</span>
                            </Button>
                        </div>
                    </div>
                    {/* Button: Add New User for Mobile only */}
                    <div className="md:hidden">
                        <UserFormWrapper />
                    </div>
                </div>
            </div>

            {/* --- For Mobile Phones --- */}
            <div className="flex flex-col gap-4 md:hidden">
                {tempUsers.map((user) => (
                    <UserMobileCard
                        key={user.id}
                        name={user.name}
                        email={user.email}
                        role={user.role}
                        joinedAt={user.joinedAt}
                        status={user.status as "active" | "inactive"}
                    />
                ))}
            </div>

            {/* Users List / Table */}
            <div className="hidden md:block bg-card border border-border rounded-xl overflow-hidden shadow-sm">
                <table className="w-full text-left">
                    <thead className="bg-muted/50 border-b border-border">
                        <tr>
                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">User</th>
                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Role</th>
                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Status</th>
                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Joined</th>
                            <th className="px-6 py-3"></th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                        {/* Example Row */}
                        {tempUsers.map((user) => (
                            <tr key={user.id} className="hover:bg-muted/20 transition-colors cursor-pointer">
                                <td className="px-6 py-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">{user.name.charAt(0)}</div>
                                        <div>
                                            <div className="text-sm font-medium text-foreground">{user.name}</div>
                                            <div className="text-xs text-muted-foreground">{user.email}</div>
                                        </div>
                                    </div>
                                </td>
                                <td className="px-6 py-4">
                                    <span className="text-sm text-muted-foreground">{user.role}</span>
                                </td>
                                <td className="px-6 py-4">
                                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${user.status === "active"
                                        ? "bg-green-500/10 text-green-500"
                                        : "bg-red-500/10 text-red-500"}`}>
                                        {user.status}
                                    </span>
                                </td>
                                <td className="px-6 py-4 text-sm text-muted-foreground">{user.joinedAt}</td>
                                <td className="px-6 py-4 text-right">
                                    <button className="p-2 hover:bg-muted rounded-full transition-colors">
                                        <MoreVertical className="w-4 h-4 text-muted-foreground" />
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}