'use client';

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

export default function UsersPage() {
  
    const [open, setOpen] = useState(false)
  
    return (
        <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
            <h1 className="text-3xl font-bold tracking-tight text-foreground">Users</h1>
            <p className="text-muted-foreground mt-1">Manage your community members and their permissions.</p>
            </div>
            <Button variant="default" size="sm" onClick={() => setOpen(true)}>
                <Plus />
                Add User
            </Button>
        </div>

        {/* Filters & Search */}
        <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <input 
                className="w-full bg-card border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
                placeholder="Search users by name or email..."
            />
            </div>
            <Button variant="outline" size="sm">
                <Filter className="mr-2" />
                Filters
            </Button>
        </div>

        {/* Users List / Table */}
        <div className="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 */}
                <tr 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">JD</div>
                    <div>
                        <div className="text-sm font-medium text-foreground">John Doe</div>
                        <div className="text-xs text-muted-foreground">john@example.com</div>
                    </div>
                    </div>
                </td>
                <td className="px-6 py-4">
                    <span className="text-sm text-muted-foreground">Administrator</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 bg-green-500/10 text-green-500">Active</span>
                </td>
                <td className="px-6 py-4 text-sm text-muted-foreground">Jan 29, 2026</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>
  );
}