import { useState } from "react";
import { useLocation, Link } from "wouter";
import {
  useListUsers,
  useCreateUser,
  useUpdateUser,
  useDeleteUser,
  useSetUserPassword,
  useListAuditLogs,
  useGetVersion,
  getListUsersQueryKey,
  getListAuditLogsQueryKey,
  getGetVersionQueryKey,
} from "@workspace/api-client-react";
import { useQueryClient } from "@tanstack/react-query";
import { useAuth } from "@/hooks/use-auth";
import { Layout } from "@/components/layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { PasswordInput } from "@/components/password-input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { useToast } from "@/hooks/use-toast";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Users, ScrollText, ShieldAlert, Plus, Pencil, Trash2, Clock, AlertTriangle, Wrench, Server } from "lucide-react";
import { format } from "date-fns";
import { AdminToolsTab } from "@/components/admin-tools-tab";

export default function Admin() {
  const [, setLocation] = useLocation();
  const { user, isAdmin, isLoading: authLoading } = useAuth();
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const [createOpen, setCreateOpen] = useState(false);
  const [editUser, setEditUser] = useState<{ id: number; username: string; role: string; tier: string; authProvider?: string } | null>(null);
  const [editPassword, setEditPassword] = useState("");
  const [deleteConfirm, setDeleteConfirm] = useState<{ id: number; username: string } | null>(null);

  const [newUsername, setNewUsername] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [newEmail, setNewEmail] = useState("");
  const [newRole, setNewRole] = useState<"admin" | "user">("user");
  const [newTier, setNewTier] = useState<"free" | "premium" | "enterprise">("free");

  const { data: users, isLoading: loadingUsers } = useListUsers({
    query: { queryKey: getListUsersQueryKey(), enabled: isAdmin },
  });
  const { data: auditLogs, isLoading: loadingLogs } = useListAuditLogs(
    { limit: 100 },
    { query: { queryKey: getListAuditLogsQueryKey({ limit: 100 }), enabled: isAdmin } },
  );
  const { data: versionInfo } = useGetVersion({
    query: { queryKey: getGetVersionQueryKey(), staleTime: Infinity, retry: false, enabled: isAdmin },
  });

  const createUser = useCreateUser();
  const updateUser = useUpdateUser();
  const deleteUser = useDeleteUser();
  const setUserPassword = useSetUserPassword();

  if (!authLoading && !isAdmin) {
    return (
      <Layout>
        <div className="flex flex-col items-center justify-center py-20 gap-4">
          <ShieldAlert className="w-12 h-12 text-muted-foreground" />
          <h2 className="text-2xl font-bold">Admin Access Required</h2>
          <p className="text-muted-foreground">You need admin rights to view this page.</p>
          <Button variant="outline" onClick={() => setLocation("/")}>Go Home</Button>
        </div>
      </Layout>
    );
  }

  const handleCreateUser = () => {
    if (!newUsername || !newPassword) return;
    createUser.mutate(
      { data: { username: newUsername, password: newPassword, email: newEmail || undefined, role: newRole, tier: newTier } },
      {
        onSuccess: () => {
          toast({ title: "User created", description: `${newUsername} has been created.` });
          queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
          setCreateOpen(false);
          setNewUsername("");
          setNewPassword("");
          setNewEmail("");
          setNewRole("user");
        },
        onError: (err) => {
          toast({ title: "Failed to create user", description: err.data?.error ?? err.message, variant: "destructive" });
        },
      },
    );
  };

  const handleUpdateUser = () => {
    if (!editUser) return;
    updateUser.mutate(
      { id: editUser.id, data: { role: editUser.role as "admin" | "user", tier: editUser.tier as "free" | "premium" | "enterprise" } },
      {
        onSuccess: () => {
          toast({ title: "User updated" });
          queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
          setEditUser(null);
        },
        onError: (err) => {
          toast({ title: "Failed to update user", description: err.data?.error ?? err.message, variant: "destructive" });
        },
      },
    );
  };

  const handleSetUserPassword = () => {
    if (!editUser || !editPassword) return;
    if (editPassword.length < 6) {
      toast({ title: "Password too short", description: "Minimum 6 characters.", variant: "destructive" });
      return;
    }
    setUserPassword.mutate(
      { id: editUser.id, data: { password: editPassword } },
      {
        onSuccess: () => {
          toast({ title: "Password updated", description: `Password for ${editUser.username} has been set.` });
          setEditPassword("");
        },
        onError: (err) => {
          toast({ title: "Failed to set password", description: (err.data as { error?: string } | null)?.error ?? err.message, variant: "destructive" });
        },
      },
    );
  };

  const handleDeleteUser = () => {
    if (!deleteConfirm) return;
    deleteUser.mutate(
      { id: deleteConfirm.id },
      {
        onSuccess: () => {
          toast({ title: "User deleted", description: `${deleteConfirm.username} has been removed.` });
          queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
          setDeleteConfirm(null);
        },
        onError: (err) => {
          toast({ title: "Failed to delete user", description: (err.data as { error?: string } | null)?.error ?? err.message, variant: "destructive" });
        },
      },
    );
  };

  function actionBadgeVariant(action: string): "default" | "secondary" | "destructive" | "outline" {
    if (action === "create") return "default";
    if (action === "delete") return "destructive";
    return "secondary";
  }

  return (
    <Layout>
      <div className="space-y-6 pb-10">
        <div>
          <div className="flex items-start justify-between">
            <div>
              <h1 className="text-3xl font-bold tracking-tight mb-2">Admin Panel</h1>
              <p className="text-muted-foreground">Manage users and review system changes.</p>
            </div>
            <Button asChild variant="outline" size="sm" className="gap-2">
              <Link href="/admin/redundancy"><AlertTriangle className="w-4 h-4" /> Redundancy Dashboard</Link>
            </Button>
          </div>
        </div>

        <Tabs defaultValue="users">
          <TabsList className="mb-4">
            <TabsTrigger value="users" className="gap-2">
              <Users className="w-4 h-4" /> Users
            </TabsTrigger>
            <TabsTrigger value="tools" className="gap-2">
              <Wrench className="w-4 h-4" /> Tools
            </TabsTrigger>
            <TabsTrigger value="audit" className="gap-2">
              <ScrollText className="w-4 h-4" /> Audit Log
            </TabsTrigger>
            <TabsTrigger value="system" className="gap-2">
              <Server className="w-4 h-4" /> System
            </TabsTrigger>
          </TabsList>

          <TabsContent value="users">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <div>
                  <CardTitle>Local Users</CardTitle>
                  <CardDescription>Manage accounts for local authentication.</CardDescription>
                </div>
                <Button size="sm" onClick={() => setCreateOpen(true)}>
                  <Plus className="w-4 h-4 mr-2" /> Add User
                </Button>
              </CardHeader>
              <CardContent>
                {loadingUsers ? (
                  <div className="space-y-3">
                    {[1, 2, 3].map((i) => <Skeleton key={i} className="h-12 w-full" />)}
                  </div>
                ) : (
                  <div className="divide-y">
                    {users?.map((u) => (
                      <div key={u.id} className="flex items-center justify-between py-3 gap-4">
                        <div className="flex items-center gap-3 min-w-0">
                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0 font-medium text-primary text-sm">
                            {u.username.charAt(0).toUpperCase()}
                          </div>
                          <div className="min-w-0">
                            <p className="font-medium text-sm truncate">{u.username}</p>
                            {u.email && <p className="text-xs text-muted-foreground truncate">{u.email}</p>}
                          </div>
                        </div>
                        <div className="flex items-center gap-2 shrink-0">
                          <Badge variant={u.role === "admin" ? "default" : "secondary"}>
                            {u.role}
                          </Badge>
                          <Badge variant="outline" className="capitalize">
                            {u.tier ?? "free"}
                          </Badge>
                          {u.username !== user?.preferredUsername && (
                            <>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8"
                                onClick={() => setEditUser({ id: u.id, username: u.username, role: u.role, tier: u.tier ?? "free", authProvider: u.authProvider })}
                              >
                                <Pencil className="w-3.5 h-3.5" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8 text-muted-foreground hover:text-destructive"
                                onClick={() => setDeleteConfirm({ id: u.id, username: u.username })}
                              >
                                <Trash2 className="w-3.5 h-3.5" />
                              </Button>
                            </>
                          )}
                        </div>
                      </div>
                    ))}
                    {(!users || users.length === 0) && (
                      <p className="text-sm text-muted-foreground py-4 text-center">No users yet.</p>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="tools">
            <AdminToolsTab />
          </TabsContent>

          <TabsContent value="audit">
            <Card>
              <CardHeader>
                <CardTitle>Audit Log</CardTitle>
                <CardDescription>All create, update and delete operations tracked by the system.</CardDescription>
              </CardHeader>
              <CardContent>
                {loadingLogs ? (
                  <div className="space-y-3">
                    {[1, 2, 3, 4, 5].map((i) => <Skeleton key={i} className="h-14 w-full" />)}
                  </div>
                ) : (
                  <div className="divide-y">
                    {auditLogs?.map((log) => (
                      <div key={log.id} className="py-3 space-y-1">
                        <div className="flex items-center gap-2 flex-wrap">
                          <Badge variant={actionBadgeVariant(log.action)} className="capitalize text-xs">
                            {log.action}
                          </Badge>
                          <span className="text-sm font-medium capitalize">{log.entityType}</span>
                          {log.entityId && (
                            <span className="text-sm text-muted-foreground">#{log.entityId}</span>
                          )}
                          <span className="text-xs text-muted-foreground ml-auto flex items-center gap-1">
                            <Clock className="w-3 h-3" />
                            {format(new Date(log.createdAt), "dd.MM.yyyy HH:mm")}
                          </span>
                        </div>
                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
                          <span>by <span className="font-medium text-foreground">{log.username}</span></span>
                          {log.changes && (
                            <span className="truncate max-w-[400px] font-mono bg-muted px-1.5 py-0.5 rounded text-[11px]">
                              {log.changes.length > 120 ? log.changes.slice(0, 120) + "…" : log.changes}
                            </span>
                          )}
                        </div>
                      </div>
                    ))}
                    {(!auditLogs || auditLogs.length === 0) && (
                      <p className="text-sm text-muted-foreground py-4 text-center">No audit entries yet.</p>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="system">
            <Card>
              <CardHeader>
                <CardTitle>System</CardTitle>
                <CardDescription>Build information of the currently live deployment.</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="divide-y">
                  <div className="flex items-center justify-between py-3">
                    <span className="text-sm text-muted-foreground">Version</span>
                    <span className="text-sm font-medium">{versionInfo?.version || "dev"}</span>
                  </div>
                  <div className="flex items-center justify-between py-3">
                    <span className="text-sm text-muted-foreground">Commit</span>
                    {versionInfo?.commitSha ? (
                      <a
                        href={`https://git.kubebase.de/admin/tool-evaluator/commit/${versionInfo.commitSha}`}
                        target="_blank"
                        rel="noreferrer"
                        className="text-sm font-mono text-primary hover:underline"
                        title={versionInfo.commitSha}
                      >
                        {versionInfo.commitSha.slice(0, 7)}
                      </a>
                    ) : (
                      <span className="text-sm text-muted-foreground">—</span>
                    )}
                  </div>
                  <div className="flex items-center justify-between py-3">
                    <span className="text-sm text-muted-foreground">Build date</span>
                    <span className="text-sm">
                      {versionInfo?.buildDate ? format(new Date(versionInfo.buildDate), "dd.MM.yyyy HH:mm") : "—"}
                    </span>
                  </div>
                  <div className="flex items-center justify-between py-3">
                    <span className="text-sm text-muted-foreground">Trash retention</span>
                    <span className="text-sm">
                      {(versionInfo?.trashRetentionDays ?? 0) > 0
                        ? `${versionInfo?.trashRetentionDays} days`
                        : "Keep forever"}
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Create New User</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-2">
              <Label>Username</Label>
              <Input value={newUsername} onChange={(e) => setNewUsername(e.target.value)} placeholder="username" />
            </div>
            <div className="space-y-2">
              <Label>Password</Label>
              <PasswordInput value={newPassword} onChange={(e) => setNewPassword(e.target.value)} placeholder="min. 6 characters" />
            </div>
            <div className="space-y-2">
              <Label>Email (Optional)</Label>
              <Input type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} placeholder="user@example.com" />
            </div>
            <div className="space-y-2">
              <Label>Role</Label>
              <Select value={newRole} onValueChange={(v) => setNewRole(v as "admin" | "user")}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="user">User</SelectItem>
                  <SelectItem value="admin">Admin</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Plan</Label>
              <Select value={newTier} onValueChange={(v) => setNewTier(v as "free" | "premium" | "enterprise")}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="free">Free</SelectItem>
                  <SelectItem value="premium">Premium</SelectItem>
                  <SelectItem value="enterprise">Enterprise</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
            <Button onClick={handleCreateUser} disabled={createUser.isPending || !newUsername || !newPassword}>
              {createUser.isPending ? "Creating…" : "Create User"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={!!editUser} onOpenChange={(open) => { if (!open) { setEditUser(null); setEditPassword(""); } }}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>Edit User — {editUser?.username}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-2">
              <Label>Role</Label>
              <Select
                value={editUser?.role || "user"}
                onValueChange={(v) => setEditUser(editUser ? { ...editUser, role: v } : null)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="user">User</SelectItem>
                  <SelectItem value="admin">Admin</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Plan</Label>
              <Select
                value={editUser?.tier || "free"}
                onValueChange={(v) => setEditUser(editUser ? { ...editUser, tier: v } : null)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="free">Free</SelectItem>
                  <SelectItem value="premium">Premium</SelectItem>
                  <SelectItem value="enterprise">Enterprise</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {editUser?.authProvider !== "oidc" ? (
              <div className="space-y-2 border-t pt-4">
                <Label>Set Password</Label>
                <PasswordInput
                  value={editPassword}
                  onChange={(e) => setEditPassword(e.target.value)}
                  placeholder="min. 6 characters"
                  data-testid="input-set-password"
                />
                <p className="text-xs text-muted-foreground">Resets the user's password immediately.</p>
              </div>
            ) : (
              <div className="space-y-2 border-t pt-4 text-sm text-muted-foreground">
                Password is managed by the identity provider (Keycloak). Reset it there.
              </div>
            )}
          </div>
          <DialogFooter className="flex-col sm:flex-row sm:justify-end gap-2">
            <Button variant="outline" onClick={() => { setEditUser(null); setEditPassword(""); }}>Cancel</Button>
            <Button
              onClick={handleUpdateUser}
              disabled={updateUser.isPending}
            >
              Save
            </Button>
            {editUser?.authProvider !== "oidc" && (
              <Button
                variant="outline"
                onClick={handleSetUserPassword}
                disabled={setUserPassword.isPending || !editPassword}
              >
                {setUserPassword.isPending ? "Setting…" : "Set Password"}
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={!!deleteConfirm} onOpenChange={(open) => !open && setDeleteConfirm(null)}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>Delete User</DialogTitle>
          </DialogHeader>
          <p className="text-sm text-muted-foreground py-2">
            Are you sure you want to delete <span className="font-medium text-foreground">{deleteConfirm?.username}</span>? This cannot be undone.
          </p>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteConfirm(null)}>Cancel</Button>
            <Button variant="destructive" onClick={handleDeleteUser} disabled={deleteUser.isPending}>
              {deleteUser.isPending ? "Deleting…" : "Delete"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Layout>
  );
}