"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Plus } from "lucide-react";

import ConfirmDialog from "@/components/common/ConfirmDialog";
import SearchInput from "@/components/common/SearchInput";
import { Button } from "@/components/ui/button";
import UserFormDialog from "@/components/users/UserFormDialog";
import UserTable from "@/components/users/UserTable";
import { api } from "@/lib/api";
import type { User, UserPayload, UserRole } from "@/types/user";

const pageSize = 10;

type StatusFilter = "all" | "active" | "inactive";

function getErrorMessage(error: unknown) {
  if (typeof error === "object" && error !== null && "response" in error) {
    const response = (error as { response?: { data?: { detail?: string } } }).response;
    return response?.data?.detail ?? "Aktion konnte nicht abgeschlossen werden";
  }

  return "Aktion konnte nicht abgeschlossen werden";
}

function getSortableValue(user: User, key: string) {
  const value = user[key as keyof User];
  return typeof value === "string" ? value.toLowerCase() : value;
}

export default function UsersPage() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [formError, setFormError] = useState("");
  const [deleteError, setDeleteError] = useState("");
  const [pending, setPending] = useState(false);
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<UserRole | "all">("all");
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
  const [sortKey, setSortKey] = useState("created_at");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
  const [page, setPage] = useState(1);
  const [formOpen, setFormOpen] = useState(false);
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [deleteUser, setDeleteUser] = useState<User | null>(null);

  const loadUsers = useCallback(async () => {
    try {
      const response = await api.get<User[]>("/users");
      setUsers(response.data);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    queueMicrotask(() => {
      void loadUsers();
    });
  }, [loadUsers]);

  const filteredUsers = useMemo(() => {
    const term = search.trim().toLowerCase();

    return users
      .filter((user) => {
        if (!term) {
          return true;
        }

        return [
          user.first_name,
          user.last_name,
          user.username,
          user.email,
          user.role,
        ].some((value) => value.toLowerCase().includes(term));
      })
      .filter((user) => roleFilter === "all" || user.role === roleFilter)
      .filter((user) => {
        if (statusFilter === "all") {
          return true;
        }

        return statusFilter === "active" ? user.is_active : !user.is_active;
      })
      .sort((first, second) => {
        const firstValue = getSortableValue(first, sortKey);
        const secondValue = getSortableValue(second, sortKey);

        if (firstValue === secondValue) {
          return 0;
        }

        const result = firstValue > secondValue ? 1 : -1;
        return sortDirection === "asc" ? result : -result;
      });
  }, [roleFilter, search, sortDirection, sortKey, statusFilter, users]);

  const pageCount = Math.max(1, Math.ceil(filteredUsers.length / pageSize));
  const currentPage = Math.min(page, pageCount);
  const pageUsers = filteredUsers.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize,
  );

  function handleSort(key: string) {
    if (sortKey === key) {
      setSortDirection((current) => (current === "asc" ? "desc" : "asc"));
      return;
    }

    setSortKey(key);
    setSortDirection("asc");
  }

  function openCreateDialog() {
    setSelectedUser(null);
    setFormError("");
    setFormOpen(true);
  }

  function openEditDialog(user: User) {
    setSelectedUser(user);
    setFormError("");
    setFormOpen(true);
  }

  async function saveUser(payload: UserPayload) {
    setPending(true);
    setFormError("");

    try {
      if (selectedUser) {
        const response = await api.put<User>(`/users/${selectedUser.id}`, payload);
        setUsers((current) => current.map((user) => (
          user.id === selectedUser.id ? response.data : user
        )));
      } else {
        const response = await api.post<User>("/users", payload);
        setUsers((current) => [response.data, ...current]);
      }

      setFormOpen(false);
    } catch (err) {
      setFormError(getErrorMessage(err));
    } finally {
      setPending(false);
    }
  }

  async function confirmDelete() {
    if (!deleteUser) {
      return;
    }

    setPending(true);
    setDeleteError("");

    try {
      await api.delete(`/users/${deleteUser.id}`);
      setUsers((current) => current.filter((user) => user.id !== deleteUser.id));
      setDeleteUser(null);
    } catch (err) {
      setDeleteError(getErrorMessage(err));
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="text-3xl font-bold text-slate-950">Benutzer</h1>
          <p className="mt-1 text-sm text-slate-500">
            {filteredUsers.length} von {users.length} Benutzern
          </p>
        </div>

        <Button type="button" onClick={openCreateDialog}>
          <Plus size={16} />
          Neuer Benutzer
        </Button>
      </div>

      <div className="flex flex-col gap-3 rounded-lg border bg-white p-4 lg:flex-row lg:items-center">
        <SearchInput
          value={search}
          onChange={(value) => {
            setSearch(value);
            setPage(1);
          }}
          placeholder="Benutzer suchen"
        />

        <select
          value={roleFilter}
          onChange={(event) => {
            setRoleFilter(event.target.value as UserRole | "all");
            setPage(1);
          }}
          className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
        >
          <option value="all">Alle Rollen</option>
          <option value="admin">Admin</option>
          <option value="manager">Manager</option>
          <option value="user">Benutzer</option>
        </select>

        <select
          value={statusFilter}
          onChange={(event) => {
            setStatusFilter(event.target.value as StatusFilter);
            setPage(1);
          }}
          className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
        >
          <option value="all">Alle Status</option>
          <option value="active">Aktiv</option>
          <option value="inactive">Inaktiv</option>
        </select>
      </div>

      <UserTable
        users={pageUsers}
        loading={loading}
        error={error}
        sortKey={sortKey}
        sortDirection={sortDirection}
        onSort={handleSort}
        onEdit={openEditDialog}
        onDelete={setDeleteUser}
      />

      <div className="flex items-center justify-between text-sm text-slate-600">
        <span>
          Seite {currentPage} von {pageCount}
        </span>
        <div className="flex gap-2">
          <Button
            type="button"
            variant="outline"
            disabled={currentPage === 1}
            onClick={() => setPage((current) => Math.max(1, current - 1))}
          >
            Zurück
          </Button>
          <Button
            type="button"
            variant="outline"
            disabled={currentPage === pageCount}
            onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
          >
            Weiter
          </Button>
        </div>
      </div>

      <UserFormDialog
        open={formOpen}
        user={selectedUser}
        pending={pending}
        serverError={formError}
        onOpenChange={setFormOpen}
        onSubmit={saveUser}
      />

      <ConfirmDialog
        open={Boolean(deleteUser)}
        title="Benutzer löschen"
        description="Möchten Sie den Benutzer wirklich löschen?"
        pending={pending}
        onOpenChange={(open) => {
          if (!open) {
            setDeleteUser(null);
            setDeleteError("");
          }
        }}
        onConfirm={confirmDelete}
      >
        {deleteUser && (
          <dl className="grid gap-2 text-sm">
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Benutzername</dt>
              <dd className="font-medium">{deleteUser.username}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">E-Mail</dt>
              <dd className="font-medium">{deleteUser.email}</dd>
            </div>
            <div className="flex justify-between gap-4">
              <dt className="text-slate-500">Rolle</dt>
              <dd className="font-medium">{deleteUser.role}</dd>
            </div>
            {deleteError && <p className="text-red-600">{deleteError}</p>}
          </dl>
        )}
      </ConfirmDialog>
    </div>
  );
}