CRM_ENVR/src/app/(dashboard)/users/page.tsx

// ───────────────────────────────────────────────
// Users Page (/(dashboard)/users)
// ───────────────────────────────────────────────
// Route: /users
// Purpose: Team management — list, search, and
//   create users. Shows summary stats cards and
//   a searchable table.
// Layout: PageHeader + stat grid + search bar +
//   UsersTable + inline UserFormDialog.
// ───────────────────────────────────────────────

"use client"

import { useState, useEffect, useCallback } from "react"
import { PageHeader } from "@/components/shared/page-header"
import { UsersTable } from "@/components/users/users-table"
import { UserFormDialog } from "@/components/users/user-form-dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useUser } from "@/providers/user-provider"
import { Plus, Users as UsersIcon, Search } from "lucide-react"
import type { User } from "@/types"

/**
 * UsersPage
 * ─────────
 * Fetches all users on mount, computes summary
 * stats (total / active / admins / sales), and
 * renders a searchable table. "Add User" button
 * opens a modal dialog for creation.
 *
 * @returns Users management layout.
 */
export default function UsersPage() {
  const { user } = useUser()
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [createOpen, setCreateOpen] = useState(false)
  const [search, setSearch] = useState("")

  // ── Fetch all users ──
  const fetchUsers = useCallback(async () => {
    try {
      const res = await fetch("/api/users")
      if (res.ok) {
        const data = await res.json()
        setUsers(data.users || [])
      }
    } catch {
      console.warn("Failed to fetch users in users page")
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchUsers()
  }, [fetchUsers])

  // ── Derived stats ──
  const activeUsers = users.filter((u) => u.active !== false)
  const admins = users.filter((u) => u.role === "admin")

  const stats = [
    { label: "Total Users", value: users.length, color: "bg-blue-500/10", textColor: "text-blue-500" },
    { label: "Active", value: activeUsers.length, color: "bg-green-500/10", textColor: "text-green-500" },
    { label: "Admins", value: admins.length, color: "bg-purple-500/10", textColor: "text-purple-500" },
    { label: "Sales", value: users.filter((u) => u.role === "sales").length, color: "bg-orange-500/10", textColor: "text-orange-500" },
  ]

  // ── Client-side search filter by name/email ──
  const filtered = users.filter((u) => {
    if (!search) return true
    const q = search.toLowerCase()
    return u.name?.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q)
  })

  return (
    <div className="space-y-4">
      {/* ── Header with "Add User" action ── */}
      <PageHeader
        title="Users"
        description="Manage team members and their roles"
      >
        <Button className="gap-2" onClick={() => setCreateOpen(true)}>
          <Plus className="h-4 w-4" />
          Add User
        </Button>
      </PageHeader>

      {/* ── Summary stat cards ── */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
        {stats.map((s) => (
          <div key={s.label} className="rounded-lg border bg-card p-4">
            <div className="flex items-center gap-3">
              <div
                className={`flex h-10 w-10 items-center justify-center rounded-lg ${s.color}`}
              >
                <UsersIcon className={`h-5 w-5 ${s.textColor}`} />
              </div>
              <div>
                <p className="text-2xl font-bold">{s.value}</p>
                <p className="text-xs text-muted-foreground">{s.label}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* ── Search input ── */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          placeholder="Search by name or email..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="h-9 pl-9"
        />
      </div>

      {/* ── Users data table ── */}
      <div className="rounded-lg border bg-card">
        <UsersTable data={filtered} loading={loading} onUserDeleted={fetchUsers} />
      </div>

      {/* ── Create-user dialog ── */}
      <UserFormDialog
        open={createOpen}
        onOpenChange={setCreateOpen}
        onUserCreated={fetchUsers}
      />
    </div>
  )
}