"use client";

import { FormEvent, useMemo, useState } from "react";
import { Pencil, Plus, Power } from "lucide-react";
import { useRouter } from "next/navigation";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Dialog } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import type { ApiResult } from "@/modules/core/server/api";
import type { Permission, RoleDefinition } from "@/modules/core/types";

type PermissionDefinition = {
  id: Permission;
  label: string;
  category: string;
  description: string;
};

type RoleManagementClientProps = {
  permissions: PermissionDefinition[];
};

type PermissionGroup = {
  category: string;
  permissions: PermissionDefinition[];
};

type PermissionTreeProps = {
  permissions: PermissionDefinition[];
  selectedPermissions: Permission[];
  onChange: (permissions: Permission[]) => void;
};

function groupPermissions(permissions: PermissionDefinition[]): PermissionGroup[] {
  const groups = new Map<string, PermissionDefinition[]>();

  for (const permission of permissions) {
    const currentGroup = groups.get(permission.category) ?? [];
    currentGroup.push(permission);
    groups.set(permission.category, currentGroup);
  }

  return Array.from(groups.entries()).map(([category, groupPermissions]) => ({
    category,
    permissions: groupPermissions,
  }));
}

function orderSelectedPermissions(permissions: PermissionDefinition[], selectedSet: ReadonlySet<Permission>): Permission[] {
  return permissions.filter((permission) => selectedSet.has(permission.id)).map((permission) => permission.id);
}

function PermissionTree({
  permissions,
  selectedPermissions,
  onChange,
}: PermissionTreeProps): React.ReactElement {
  const groups = useMemo(() => groupPermissions(permissions), [permissions]);
  const selectedSet = useMemo(() => new Set(selectedPermissions), [selectedPermissions]);

  function togglePermission(permissionId: Permission, isChecked: boolean): void {
    const nextSelected = new Set(selectedSet);
    if (isChecked) {
      nextSelected.add(permissionId);
    } else {
      nextSelected.delete(permissionId);
    }

    onChange(orderSelectedPermissions(permissions, nextSelected));
  }

  function toggleCategory(groupPermissions: PermissionDefinition[], isChecked: boolean): void {
    const nextSelected = new Set(selectedSet);
    for (const permission of groupPermissions) {
      if (isChecked) {
        nextSelected.add(permission.id);
      } else {
        nextSelected.delete(permission.id);
      }
    }

    onChange(orderSelectedPermissions(permissions, nextSelected));
  }

  return (
    <div className="grid gap-3">
      <div className="flex items-center justify-between gap-3 rounded-md border bg-secondary/35 px-3 py-2 text-sm">
        <span className="font-medium">权限树</span>
        <Badge variant="secondary">
          {selectedPermissions.length}/{permissions.length}
        </Badge>
      </div>
      <div className="grid gap-3">
        {groups.map((group) => {
          const selectedCount = group.permissions.filter((permission) => selectedSet.has(permission.id)).length;
          const isAllSelected = selectedCount === group.permissions.length && group.permissions.length > 0;

          return (
            <div className="rounded-md border bg-card" key={group.category}>
              <label className="flex items-center justify-between gap-3 border-b px-3 py-3 text-sm">
                <span className="flex min-w-0 items-center gap-3">
                  <Checkbox
                    aria-label={`切换 ${group.category} 权限`}
                    checked={isAllSelected}
                    onCheckedChange={(checked) => toggleCategory(group.permissions, checked)}
                  />
                  <span>
                    <span className="block font-medium">{group.category}</span>
                    <span className="block text-xs text-muted-foreground">
                      已选 {selectedCount} / {group.permissions.length}
                    </span>
                  </span>
                </span>
                <Badge variant={selectedCount > 0 ? "success" : "secondary"}>{selectedCount}</Badge>
              </label>
              <div className="grid gap-2 bg-secondary/15 p-3 md:grid-cols-2">
                {group.permissions.map((permission) => (
                  <label
                    className="flex min-h-16 items-start gap-3 rounded-md border bg-background p-3 text-sm transition-colors hover:bg-secondary/50"
                    key={permission.id}
                  >
                    <Checkbox
                      aria-label={`切换 ${permission.label}`}
                      checked={selectedSet.has(permission.id)}
                      className="mt-1"
                      onCheckedChange={(checked) => togglePermission(permission.id, checked)}
                    />
                    <span className="min-w-0">
                      <span className="block font-medium">{permission.label}</span>
                      <span className="block break-all text-xs text-muted-foreground">{permission.id}</span>
                      <span className="mt-1 block text-xs text-muted-foreground">{permission.description}</span>
                    </span>
                  </label>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export function RoleManagementClient({ permissions }: RoleManagementClientProps): React.ReactElement {
  const router = useRouter();
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [selectedPermissions, setSelectedPermissions] = useState<Permission[]>([]);
  const [message, setMessage] = useState("");
  const [isPending, setIsPending] = useState(false);

  function openCreateDialog(): void {
    setMessage("");
    setSelectedPermissions([]);
    setIsCreateOpen(true);
  }

  function closeCreateDialog(): void {
    if (isPending) {
      return;
    }

    setIsCreateOpen(false);
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    setMessage("");
    setIsPending(true);
    const formData = new FormData(event.currentTarget);
    const response = await fetch("/api/settings/roles", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        label: String(formData.get("label") ?? ""),
        key: String(formData.get("key") ?? ""),
        description: String(formData.get("description") ?? ""),
        permissions: selectedPermissions,
      }),
    });
    const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    setMessage(result.reason);
    setSelectedPermissions([]);
    setIsCreateOpen(false);
    event.currentTarget.reset();
    router.refresh();
  }

  return (
    <>
      <Button onClick={openCreateDialog} type="button">
        <Plus className="size-4" aria-hidden="true" />
        新增角色
      </Button>
      <Dialog
        className="max-w-5xl"
        description="角色由系统注册权限点组合而成。"
        onClose={closeCreateDialog}
        open={isCreateOpen}
        title="新增角色"
      >
        <form className="grid gap-4" onSubmit={handleSubmit}>
          <div className="grid gap-3 md:grid-cols-3">
            <Input name="label" placeholder="角色名称" required />
            <Input name="key" placeholder="角色标识，可留空" />
            <Input name="description" placeholder="角色说明" />
          </div>
          <PermissionTree
            onChange={setSelectedPermissions}
            permissions={permissions}
            selectedPermissions={selectedPermissions}
          />
          {message ? (
            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
              {message}
            </p>
          ) : null}
          <div className="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end">
            <Button disabled={isPending} onClick={closeCreateDialog} type="button" variant="outline">
              取消
            </Button>
            <Button disabled={isPending} type="submit">
              <Plus className="size-4" aria-hidden="true" />
              新增角色
            </Button>
          </div>
        </form>
      </Dialog>
    </>
  );
}

type RoleRowActionsProps = {
  permissions: PermissionDefinition[];
  role: RoleDefinition;
};

export function RoleRowActions({ permissions, role }: RoleRowActionsProps): React.ReactElement {
  const router = useRouter();
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [selectedPermissions, setSelectedPermissions] = useState<Permission[]>(role.permissions);
  const [message, setMessage] = useState("");
  const [isPending, setIsPending] = useState(false);

  function openEditDialog(): void {
    setMessage("");
    setSelectedPermissions(role.permissions);
    setIsEditOpen(true);
  }

  function closeEditDialog(): void {
    if (isPending) {
      return;
    }

    setIsEditOpen(false);
  }

  async function updateRole(payload: Record<string, string | boolean | string[]>): Promise<void> {
    setMessage("");
    setIsPending(true);
    const response = await fetch(`/api/settings/roles/${role.id}`, {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(payload),
    });
    const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    setMessage(result.reason);
    setIsEditOpen(false);
    router.refresh();
  }

  async function disableRole(): Promise<void> {
    setMessage("");
    setIsPending(true);
    const response = await fetch(`/api/settings/roles/${role.id}`, {
      method: "DELETE",
    });
    const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    router.refresh();
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    await updateRole({
      label: String(formData.get("label") ?? ""),
      key: String(formData.get("key") ?? ""),
      description: String(formData.get("description") ?? ""),
      isEnabled: String(formData.get("isEnabled") ?? "") === "true",
      permissions: selectedPermissions,
    });
  }

  if (role.isSystem) {
    return <span className="block text-right text-xs text-muted-foreground">内置只读</span>;
  }

  return (
    <div className="flex items-center justify-end gap-2">
      <Button onClick={openEditDialog} size="sm" type="button" variant="outline">
        <Pencil className="size-4" aria-hidden="true" />
        编辑
      </Button>
      {role.isEnabled ? (
        <Button disabled={isPending} onClick={() => void disableRole()} size="sm" type="button" variant="destructive">
          <Power className="size-4" aria-hidden="true" />
          停用
        </Button>
      ) : (
        <Button
          disabled={isPending}
          onClick={() => void updateRole({ isEnabled: true })}
          size="sm"
          type="button"
          variant="outline"
        >
          <Power className="size-4" aria-hidden="true" />
          启用
        </Button>
      )}
      <Dialog
        className="max-w-5xl"
        description="编辑自定义角色的名称、说明、状态和权限点。"
        onClose={closeEditDialog}
        open={isEditOpen}
        title="编辑角色"
      >
        <form className="grid gap-4" onSubmit={handleSubmit}>
          <div className="grid gap-3 md:grid-cols-2">
            <label className="grid gap-2 text-sm">
              <span className="font-medium">角色名称</span>
              <Input defaultValue={role.label} name="label" required />
            </label>
            <label className="grid gap-2 text-sm">
              <span className="font-medium">角色标识</span>
              <Input defaultValue={role.key} name="key" required />
            </label>
          </div>
          <label className="grid gap-2 text-sm">
            <span className="font-medium">角色说明</span>
            <Input defaultValue={role.description} name="description" />
          </label>
          <label className="grid gap-2 text-sm">
            <span className="font-medium">状态</span>
            <Select
              aria-label="角色状态"
              defaultValue={String(role.isEnabled)}
              name="isEnabled"
              options={[
                { value: "true", label: "启用" },
                { value: "false", label: "停用" },
              ]}
            />
          </label>
          <PermissionTree
            onChange={setSelectedPermissions}
            permissions={permissions}
            selectedPermissions={selectedPermissions}
          />
          {message ? (
            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
              {message}
            </p>
          ) : null}
          <div className="flex justify-end gap-2">
            <Button onClick={closeEditDialog} type="button" variant="outline">
              取消
            </Button>
            <Button disabled={isPending} type="submit">
              保存
            </Button>
          </div>
        </form>
      </Dialog>
    </div>
  );
}