"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { api, SystemUser, SystemGroup, LoginEntry } from "@/lib/api"
import { Header } from "@/components/Header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog } from "@/components/ui/dialog"
import { AlertCircle, Plus, Trash2, Lock, Unlock, Key, Terminal, Search as SearchIcon } from "lucide-react"

export default function IdentitiesPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState<"users" | "groups" | "history">("users")
  const [usersSubTab, setUsersSubTab] = useState<"linux" | "samba">("linux")
  const [users, setUsers] = useState<SystemUser[]>([])
  const [sambaUsers, setSambaUsers] = useState<SystemUser[]>([])
  const [groups, setGroups] = useState<SystemGroup[]>([])
  const [logins, setLogins] = useState<LoginEntry[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedGroupForAdd, setSelectedGroupForAdd] = useState<string | null>(null)
  const [selectedUserForGroup, setSelectedUserForGroup] = useState<string | null>(null)

  // Dialog states
  const [createUserDialog, setCreateUserDialog] = useState(false)
  const [createGroupDialog, setCreateGroupDialog] = useState(false)
  const [passwordDialog, setPasswordDialog] = useState(false)
  const [shellDialog, setShellDialog] = useState(false)
  const [sambaPasswordDialog, setSambaPasswordDialog] = useState(false)
  const [deleteUserDialog, setDeleteUserDialog] = useState(false)
  const [deleteGroupDialog, setDeleteGroupDialog] = useState(false)
  const [addUserToGroupDialog, setAddUserToGroupDialog] = useState(false)

  // Form states
  const [selectedUser, setSelectedUser] = useState<string | null>(null)
  const [selectedGroup, setSelectedGroup] = useState<string | null>(null)
  const [newUsername, setNewUsername] = useState("")
  const [newHomeDir, setNewHomeDir] = useState("")
  const [newShell, setNewShell] = useState("/bin/bash")
  const [newGecos, setNewGecos] = useState("")
  const [newGroupName, setNewGroupName] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [newShellValue, setNewShellValue] = useState("")
  const [sambaPassword, setSambaPassword] = useState("")
  const [removeHomeDir, setRemoveHomeDir] = useState(true)
  const [loginLimit, setLoginLimit] = useState(50)

  useEffect(() => {
    const token = localStorage.getItem("access_token")
    if (!token) {
      router.push("/login")
      return
    }
    loadData()
  }, [router])

  const loadData = async () => {
    try {
      setLoading(true)
      setError(null)
      const [usersData, sambaUsersData, groupsData, loginsData] = await Promise.all([
        api.getUsers(),
        api.getSambaUsers(),
        api.getGroups(),
        api.getLoginHistory(loginLimit),
      ])
      setUsers(usersData)
      setSambaUsers(sambaUsersData)
      setGroups(groupsData)
      setLogins(loginsData)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load data")
    } finally {
      setLoading(false)
    }
  }

  const handleCreateUser = async () => {
    if (!newUsername.trim()) return
    try {
      await api.createUser(newUsername, newHomeDir || undefined, newShell, newGecos || undefined)
      setNewUsername("")
      setNewHomeDir("")
      setNewShell("/bin/bash")
      setNewGecos("")
      setCreateUserDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create user")
    }
  }

  const handleDeleteUser = async () => {
    if (!selectedUser) return
    try {
      await api.deleteUser(selectedUser, removeHomeDir)
      setSelectedUser(null)
      setDeleteUserDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete user")
    }
  }

  const handleChangePassword = async () => {
    if (!selectedUser || !newPassword.trim()) return
    try {
      await api.changePassword(selectedUser, newPassword)
      setSelectedUser(null)
      setNewPassword("")
      setPasswordDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to change password")
    }
  }

  const handleChangeShell = async () => {
    if (!selectedUser || !newShellValue.trim()) return
    try {
      await api.changeShell(selectedUser, newShellValue)
      setSelectedUser(null)
      setNewShellValue("")
      setShellDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to change shell")
    }
  }

  const handleSetSambaPassword = async () => {
    if (!selectedUser || !sambaPassword.trim()) return
    try {
      await api.setSambaPassword(selectedUser, sambaPassword)
      setSelectedUser(null)
      setSambaPassword("")
      setSambaPasswordDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to set Samba password")
    }
  }

  const handleLockUser = async (username: string) => {
    try {
      await api.lockUser(username)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to lock user")
    }
  }

  const handleUnlockUser = async (username: string) => {
    try {
      await api.unlockUser(username)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to unlock user")
    }
  }

  const handleCreateGroup = async () => {
    if (!newGroupName.trim()) return
    try {
      await api.createGroup(newGroupName)
      setNewGroupName("")
      setCreateGroupDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create group")
    }
  }

  const handleAddUserToGroup = async () => {
    if (!selectedUserForGroup || !selectedGroupForAdd) return
    try {
      await api.addUserToGroup(selectedUserForGroup, selectedGroupForAdd)
      setSelectedUserForGroup(null)
      setSelectedGroupForAdd(null)
      setAddUserToGroupDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to add user to group")
    }
  }

  const handleRemoveUserFromGroup = async (username: string, groupname: string) => {
    try {
      await api.removeUserFromGroup(username, groupname)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to remove user from group")
    }
  }

  const handleDeleteGroup = async () => {
    if (!selectedGroup) return
    try {
      await api.deleteGroup(selectedGroup)
      setSelectedGroup(null)
      setDeleteGroupDialog(false)
      loadData()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete group")
    }
  }

  // Filter users and groups based on search
  const filteredUsers = users.filter(u =>
    u.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
    u.gecos?.toLowerCase().includes(searchQuery.toLowerCase())
  )
  const filteredSambaUsers = sambaUsers.filter(u =>
    u.username.toLowerCase().includes(searchQuery.toLowerCase())
  )
  const filteredGroups = groups.filter(g =>
    g.groupname.toLowerCase().includes(searchQuery.toLowerCase())
  )

  return (
    <div className="min-h-screen bg-background">
      <Header />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Page Header */}
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold">Identities</h1>
            <p className="text-muted-foreground mt-1">Manage users, groups, and view login history</p>
          </div>
          <Button onClick={loadData} variant="outline" size="sm">
            Refresh
          </Button>
        </div>

        {/* Error Alert */}
        {error && (
          <Card className="mb-6 border-red-200 bg-red-50">
            <CardContent className="flex items-center gap-3 pt-6">
              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
              <p className="text-sm text-red-800">{error}</p>
            </CardContent>
          </Card>
        )}

        {/* Tab Navigation */}
        <div className="flex gap-2 mb-6 border-b border-border">
          <button
            onClick={() => setActiveTab("users")}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === "users"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Users ({users.length + sambaUsers.length})
          </button>
          <button
            onClick={() => setActiveTab("groups")}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === "groups"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Groups ({groups.length})
          </button>
          <button
            onClick={() => setActiveTab("history")}
            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
              activeTab === "history"
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Login History
          </button>
        </div>

        {/* Search Bar (for Users and Groups tabs) */}
        {(activeTab === "users" || activeTab === "groups") && (
          <div className="mb-6">
            <div className="flex gap-2">
              <SearchIcon className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5" />
              <input
                type="text"
                placeholder={activeTab === "users" ? "Search users..." : "Search groups..."}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="flex-1 px-3 py-2 border border-border rounded bg-background text-foreground text-sm"
              />
              {searchQuery && (
                <Button
                  onClick={() => setSearchQuery("")}
                  variant="outline"
                  size="sm"
                >
                  Clear
                </Button>
              )}
            </div>
          </div>
        )}

        {/* USERS TAB */}
        {activeTab === "users" && (
          <div>
            {/* Sub-tabs for Linux vs Samba users */}
            <div className="flex gap-2 mb-4 border-b border-border">
              <button
                onClick={() => setUsersSubTab("linux")}
                className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
                  usersSubTab === "linux"
                    ? "border-primary text-primary"
                    : "border-transparent text-muted-foreground hover:text-foreground"
                }`}
              >
                Linux Users ({users.length})
              </button>
              <button
                onClick={() => setUsersSubTab("samba")}
                className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
                  usersSubTab === "samba"
                    ? "border-primary text-primary"
                    : "border-transparent text-muted-foreground hover:text-foreground"
                }`}
              >
                Samba Users ({sambaUsers.length})
              </button>
            </div>

            {/* LINUX USERS */}
            {usersSubTab === "linux" && (
              <div>
                <div className="mb-4">
                  <Button onClick={() => setCreateUserDialog(true)} size="sm">
                    <Plus className="w-4 h-4 mr-2" />
                    New User
                  </Button>
                </div>

                {loading ? (
                  <div className="text-center py-12 text-muted-foreground">Loading users...</div>
                ) : (
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-base">System Users</CardTitle>
                    </CardHeader>
                    <CardContent className="p-0">
                      <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                          <thead className="border-b border-border bg-muted/30">
                            <tr>
                              <th className="text-left py-3 px-4 font-medium">Username</th>
                              <th className="text-left py-3 px-4 font-medium">UID</th>
                              <th className="text-left py-3 px-4 font-medium">Home</th>
                              <th className="text-left py-3 px-4 font-medium">Shell</th>
                              <th className="text-left py-3 px-4 font-medium">Groups</th>
                              <th className="text-left py-3 px-4 font-medium">Status</th>
                              <th className="text-left py-3 px-4 font-medium">Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            {filteredUsers.map((user) => (
                              <tr key={user.username} className="border-b border-border/50 hover:bg-muted/30">
                                <td className="py-3 px-4 font-mono text-xs">{user.username}</td>
                                <td className="py-3 px-4 text-xs text-muted-foreground">{user.uid}</td>
                                <td className="py-3 px-4 text-xs text-muted-foreground">{user.home}</td>
                                <td className="py-3 px-4 text-xs font-mono">{user.shell}</td>
                                <td className="py-3 px-4 text-xs">
                                  <div className="flex gap-1 flex-wrap">
                                    {user.groups.map((g) => (
                                      <Badge key={g} variant="secondary" className="text-xs">
                                        {g}
                                      </Badge>
                                    ))}
                                  </div>
                                </td>
                                <td className="py-3 px-4 text-xs">
                                  {user.locked ? (
                                    <Badge variant="destructive">Locked</Badge>
                                  ) : (
                                    <Badge variant="success">Active</Badge>
                                  )}
                                </td>
                                <td className="py-3 px-4 text-xs space-x-1">
                                  <button
                                    onClick={() => {
                                      setSelectedUser(user.username)
                                      setPasswordDialog(true)
                                    }}
                                    className="px-2 py-1 rounded border border-border hover:bg-muted"
                                    title="Change password"
                                  >
                                    <Key className="w-3 h-3 inline" />
                                  </button>
                                  <button
                                    onClick={() => {
                                      setSelectedUser(user.username)
                                      setNewShellValue(user.shell)
                                      setShellDialog(true)
                                    }}
                                    className="px-2 py-1 rounded border border-border hover:bg-muted"
                                    title="Change shell"
                                  >
                                    <Terminal className="w-3 h-3 inline" />
                                  </button>
                                  <button
                                    onClick={() => {
                                      setSelectedUser(user.username)
                                      setSambaPassword("")
                                      setSambaPasswordDialog(true)
                                    }}
                                    className="px-2 py-1 rounded border border-border hover:bg-muted"
                                    title="Set Samba password"
                                  >
                                    <Key className="w-3 h-3 inline" style={{ opacity: 0.6 }} />
                                  </button>
                                  {user.locked ? (
                                    <button
                                      onClick={() => handleUnlockUser(user.username)}
                                      className="px-2 py-1 rounded border border-border hover:bg-muted text-green-600"
                                      title="Unlock"
                                    >
                                      <Unlock className="w-3 h-3 inline" />
                                    </button>
                                  ) : (
                                    <button
                                      onClick={() => handleLockUser(user.username)}
                                      className="px-2 py-1 rounded border border-border hover:bg-muted text-amber-600"
                                      title="Lock"
                                    >
                                      <Lock className="w-3 h-3 inline" />
                                    </button>
                                  )}
                                  <button
                                    onClick={() => {
                                      setSelectedUser(user.username)
                                      setDeleteUserDialog(true)
                                    }}
                                    className="px-2 py-1 rounded border border-destructive/50 hover:bg-destructive/10 text-destructive"
                                    title="Delete"
                                  >
                                    <Trash2 className="w-3 h-3 inline" />
                                  </button>
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
            )}

            {/* SAMBA USERS */}
            {usersSubTab === "samba" && (
              <div>
                {loading ? (
                  <div className="text-center py-12 text-muted-foreground">Loading Samba users...</div>
                ) : sambaUsers.length === 0 ? (
                  <Card>
                    <CardContent className="py-8 text-center text-muted-foreground">
                      No Samba users found. Install and configure Samba to see users here.
                    </CardContent>
                  </Card>
                ) : (
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-base">Samba Users</CardTitle>
                    </CardHeader>
                    <CardContent className="p-0">
                      <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                          <thead className="border-b border-border bg-muted/30">
                            <tr>
                              <th className="text-left py-3 px-4 font-medium">Username</th>
                              <th className="text-left py-3 px-4 font-medium">UID</th>
                              <th className="text-left py-3 px-4 font-medium">Comment</th>
                            </tr>
                          </thead>
                          <tbody>
                            {filteredSambaUsers.map((user) => (
                              <tr key={user.username} className="border-b border-border/50 hover:bg-muted/30">
                                <td className="py-3 px-4 font-mono text-xs">
                                  <Badge variant="outline">{user.username}</Badge>
                                </td>
                                <td className="py-3 px-4 text-xs text-muted-foreground">{user.uid}</td>
                                <td className="py-3 px-4 text-xs text-muted-foreground">{(user as any).comment || "—"}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
            )}
          </div>
        )}

        {/* GROUPS TAB */}
        {activeTab === "groups" && (
          <div>
            <div className="mb-4">
              <Button onClick={() => setCreateGroupDialog(true)} size="sm">
                <Plus className="w-4 h-4 mr-2" />
                New Group
              </Button>
            </div>

            {loading ? (
              <div className="text-center py-12 text-muted-foreground">Loading groups...</div>
            ) : (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">System Groups</CardTitle>
                </CardHeader>
                <CardContent className="p-0">
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead className="border-b border-border bg-muted/30">
                        <tr>
                          <th className="text-left py-3 px-4 font-medium">Group Name</th>
                          <th className="text-left py-3 px-4 font-medium">GID</th>
                          <th className="text-left py-3 px-4 font-medium">Members</th>
                          <th className="text-left py-3 px-4 font-medium">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {filteredGroups.map((group) => (
                          <tr key={group.groupname} className="border-b border-border/50 hover:bg-muted/30">
                            <td className="py-3 px-4 font-mono text-xs">{group.groupname}</td>
                            <td className="py-3 px-4 text-xs text-muted-foreground">{group.gid}</td>
                            <td className="py-3 px-4 text-xs">
                              <div className="flex gap-1 flex-wrap items-center">
                                {group.members && group.members.length > 0 ? (
                                  group.members.map((m) => (
                                    <div key={m} className="flex items-center gap-1 bg-secondary rounded px-2 py-1">
                                      <span>{m}</span>
                                      <button
                                        onClick={() => handleRemoveUserFromGroup(m, group.groupname)}
                                        className="text-xs hover:text-destructive"
                                        title="Remove from group"
                                      >
                                        ×
                                      </button>
                                    </div>
                                  ))
                                ) : (
                                  <span className="text-muted-foreground">(empty)</span>
                                )}
                                <button
                                  onClick={() => {
                                    setSelectedGroupForAdd(group.groupname)
                                    setAddUserToGroupDialog(true)
                                  }}
                                  className="px-2 py-1 rounded border border-primary/50 hover:bg-primary/10 text-primary text-xs"
                                  title="Add user to group"
                                >
                                  +
                                </button>
                              </div>
                            </td>
                            <td className="py-3 px-4 text-xs">
                              <button
                                onClick={() => {
                                  setSelectedGroup(group.groupname)
                                  setDeleteGroupDialog(true)
                                }}
                                className="px-2 py-1 rounded border border-destructive/50 hover:bg-destructive/10 text-destructive"
                                title="Delete"
                              >
                                <Trash2 className="w-3 h-3 inline" />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        )}

        {/* LOGIN HISTORY TAB */}
        {activeTab === "history" && (
          <div>
            <div className="mb-4 flex gap-2 items-center">
              <label className="text-sm text-muted-foreground">Limit:</label>
              <select
                value={loginLimit}
                onChange={(e) => {
                  setLoginLimit(parseInt(e.target.value))
                  loadData()
                }}
                className="px-3 py-1 text-sm border border-border rounded bg-background"
              >
                <option value={25}>25</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
              </select>
            </div>

            {loading ? (
              <div className="text-center py-12 text-muted-foreground">Loading login history...</div>
            ) : (
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">Recent Logins</CardTitle>
                </CardHeader>
                <CardContent className="p-0">
                  {logins.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">No login history found</div>
                  ) : (
                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead className="border-b border-border bg-muted/30">
                          <tr>
                            <th className="text-left py-3 px-4 font-medium">User</th>
                            <th className="text-left py-3 px-4 font-medium">Terminal</th>
                            <th className="text-left py-3 px-4 font-medium">Host/IP</th>
                            <th className="text-left py-3 px-4 font-medium">Login Time</th>
                            <th className="text-left py-3 px-4 font-medium">Logout Time</th>
                            <th className="text-left py-3 px-4 font-medium">Duration</th>
                          </tr>
                        </thead>
                        <tbody>
                          {logins.map((login, idx) => (
                            <tr key={idx} className="border-b border-border/50 hover:bg-muted/30">
                              <td className="py-3 px-4 font-mono text-xs">{(login as any).username || (login as any).user}</td>
                              <td className="py-3 px-4 text-xs text-muted-foreground">{(login as any).tty || (login as any).terminal || "—"}</td>
                              <td className="py-3 px-4 text-xs text-muted-foreground">{(login as any).host || "—"}</td>
                              <td className="py-3 px-4 text-xs">{(login as any).login_str || (login as any).login_time || "—"}</td>
                              <td className="py-3 px-4 text-xs text-muted-foreground">
                                {(login as any).logout_time || "—"}
                              </td>
                              <td className="py-3 px-4 text-xs text-muted-foreground">{(login as any).duration || "—"}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </CardContent>
              </Card>
            )}
          </div>
        )}
      </main>

      {/* Create User Dialog */}
      <Dialog open={createUserDialog} onClose={() => setCreateUserDialog(false)} title="Create User">
        <div className="space-y-4">
          <input
            type="text"
            placeholder="Username"
            value={newUsername}
            onChange={(e) => setNewUsername(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
            autoFocus
          />
          <input
            type="text"
            placeholder="Home directory (optional)"
            value={newHomeDir}
            onChange={(e) => setNewHomeDir(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
          />
          <select
            value={newShell}
            onChange={(e) => setNewShell(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
          >
            <option>/bin/bash</option>
            <option>/bin/sh</option>
            <option>/sbin/nologin</option>
            <option>/usr/sbin/nologin</option>
          </select>
          <input
            type="text"
            placeholder="Full name (optional)"
            value={newGecos}
            onChange={(e) => setNewGecos(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
          />
          <div className="flex gap-2">
            <Button onClick={handleCreateUser} className="flex-1">
              Create
            </Button>
            <Button onClick={() => setCreateUserDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Create Group Dialog */}
      <Dialog open={createGroupDialog} onClose={() => setCreateGroupDialog(false)} title="Create Group">
        <div className="space-y-4">
          <input
            type="text"
            placeholder="Group name"
            value={newGroupName}
            onChange={(e) => setNewGroupName(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
            autoFocus
          />
          <div className="flex gap-2">
            <Button onClick={handleCreateGroup} className="flex-1">
              Create
            </Button>
            <Button onClick={() => setCreateGroupDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Change Password Dialog */}
      <Dialog open={passwordDialog} onClose={() => setPasswordDialog(false)} title={`Change Password for ${selectedUser}`}>
        <div className="space-y-4">
          <input
            type="password"
            placeholder="New password"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
            autoFocus
          />
          <div className="flex gap-2">
            <Button onClick={handleChangePassword} className="flex-1">
              Change
            </Button>
            <Button onClick={() => setPasswordDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Change Shell Dialog */}
      <Dialog open={shellDialog} onClose={() => setShellDialog(false)} title={`Change Shell for ${selectedUser}`}>
        <div className="space-y-4">
          <select
            value={newShellValue}
            onChange={(e) => setNewShellValue(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
          >
            <option>/bin/bash</option>
            <option>/bin/sh</option>
            <option>/sbin/nologin</option>
            <option>/usr/sbin/nologin</option>
          </select>
          <div className="flex gap-2">
            <Button onClick={handleChangeShell} className="flex-1">
              Change
            </Button>
            <Button onClick={() => setShellDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Set Samba Password Dialog */}
      <Dialog open={sambaPasswordDialog} onClose={() => setSambaPasswordDialog(false)} title={`Set Samba Password for ${selectedUser}`}>
        <div className="space-y-4">
          <input
            type="password"
            placeholder="New Samba password"
            value={sambaPassword}
            onChange={(e) => setSambaPassword(e.target.value)}
            className="w-full px-3 py-2 text-sm border border-border rounded bg-background text-foreground"
            autoFocus
          />
          <div className="flex gap-2">
            <Button onClick={handleSetSambaPassword} className="flex-1">
              Set Password
            </Button>
            <Button onClick={() => setSambaPasswordDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Delete User Dialog */}
      <Dialog open={deleteUserDialog} onClose={() => setDeleteUserDialog(false)} title="Delete User">
        <div className="space-y-4">
          <p className="text-sm">Are you sure you want to delete user <span className="font-mono">{selectedUser}</span>?</p>
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={removeHomeDir}
              onChange={(e) => setRemoveHomeDir(e.target.checked)}
              className="rounded border border-border"
            />
            <span className="text-sm">Remove home directory</span>
          </label>
          <div className="flex gap-2">
            <Button onClick={handleDeleteUser} variant="destructive" className="flex-1">
              Delete
            </Button>
            <Button onClick={() => setDeleteUserDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Delete Group Dialog */}
      <Dialog open={deleteGroupDialog} onClose={() => setDeleteGroupDialog(false)} title="Delete Group">
        <div className="space-y-4">
          <p className="text-sm">Are you sure you want to delete group <span className="font-mono">{selectedGroup}</span>?</p>
          <div className="flex gap-2">
            <Button onClick={handleDeleteGroup} variant="destructive" className="flex-1">
              Delete
            </Button>
            <Button onClick={() => setDeleteGroupDialog(false)} variant="outline" className="flex-1">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>

      {/* Add User to Group Dialog */}
      <Dialog open={addUserToGroupDialog} onClose={() => setAddUserToGroupDialog(false)} title="Add User to Group">
        <div className="space-y-4">
          <div>
            <label className="text-sm font-medium block mb-2">Select User</label>
            <select
              value={selectedUserForGroup || ""}
              onChange={(e) => setSelectedUserForGroup(e.target.value)}
              className="w-full px-3 py-2 border border-border rounded bg-background text-foreground text-sm"
            >
              <option value="">Choose a user...</option>
              {users.map((u) => (
                <option key={u.username} value={u.username}>
                  {u.username} (uid {u.uid})
                </option>
              ))}
            </select>
          </div>
          <div className="flex gap-2">
            <Button
              onClick={handleAddUserToGroup}
              disabled={!selectedUserForGroup || !selectedGroupForAdd}
              className="flex-1"
            >
              Add
            </Button>
            <Button
              onClick={() => {
                setAddUserToGroupDialog(false)
                setSelectedUserForGroup(null)
                setSelectedGroupForAdd(null)
              }}
              variant="outline"
              className="flex-1"
            >
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>
    </div>
  )
}