import { useEffect, useState } from "react";

import { Plus, Search } from "lucide-react";
import {
  ApiRequestError,
  type PlatformPermission,
  type Role,
  type RoleCreatePayload,
  type RoleUpdatePayload,
} from "../../services/api";
import { useApi, useAuth } from "../../context/AuthContext";
import { Button } from "~/components/ui/button";
import { PermissionEditDialog } from "./PermissionEditDialog";
import { RoleEditDialog } from "./RoleEditDialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { AdminColgroup, ROLE_COL_WIDTHS } from "./AdminTable";

import "../../styles/admin.css";

export function RoleManagementPage({
  onNotify,
  onConnectionChange,
}: {
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onConnectionChange: (online: boolean) => void;
}) {
  const api = useApi();
  const { user } = useAuth();
  const [roles, setRoles] = useState<Role[]>([]);
  const [permissions, setPermissions] = useState<PlatformPermission[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState("");

  // 新建 / 编辑弹窗
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<Role | null>(null);

  // 权限配置弹窗
  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false);
  const [permissionTarget, setPermissionTarget] = useState<Role | null>(null);

  const canManage = user?.role_code === "admin";

  const load = async (): Promise<void> => {
    setLoading(true);
    setLoadError(null);
    try {
      const [roleList, permissionList] = await Promise.all([
        api.listPlatformRoles(),
        api.listPlatformPermissions(),
      ]);
      setRoles(roleList);
      setPermissions(permissionList);
      onConnectionChange(true);
    } catch (error) {
      onConnectionChange(false);
      const message = error instanceof Error ? error.message : "角色列表加载失败";
      setLoadError(message);
      onNotify({ tone: "error", message });
    } finally {
      setLoading(false);
    }
  };

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

  const openCreate = (): void => {
    setEditing(null);
    setDialogOpen(true);
  };

  const openEdit = (role: Role): void => {
    setEditing(role);
    setDialogOpen(true);
  };

  const openPermissions = (role: Role): void => {
    setPermissionTarget(role);
    setPermissionDialogOpen(true);
  };

  const handleRoleSubmit = async (
    payload: RoleCreatePayload | RoleUpdatePayload,
  ): Promise<void> => {
    setSaving(true);
    try {
      if (editing) {
        const updated = await api.updatePlatformRole(
          editing.role_code,
          payload as RoleUpdatePayload,
        );
        setRoles((current) => current.map(
          (item) => item.role_code === updated.role_code ? updated : item,
        ));
        onNotify({ tone: "success", message: "角色信息已更新" });
      } else {
        const created = await api.createPlatformRole(
          payload as RoleCreatePayload,
        );
        setRoles((current) => [...current, created]);
        onNotify({ tone: "success", message: "角色已创建" });
      }
      setDialogOpen(false);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof ApiRequestError
          ? error.message
          : (editing ? "保存角色失败" : "创建角色失败"),
      });
    } finally {
      setSaving(false);
    }
  };

  const savePermissions = async (codes: string[]): Promise<void> => {
    if (!permissionTarget) return;
    setSaving(true);
    try {
      const updated = await api.updatePlatformRolePermissions(
        permissionTarget.role_code,
        codes,
      );
      setRoles((current) => current.map(
        (item) => item.role_code === updated.role_code ? updated : item,
      ));
      onNotify({ tone: "success", message: "权限已保存" });
      setPermissionDialogOpen(false);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof ApiRequestError ? error.message : "保存权限失败",
      });
    } finally {
      setSaving(false);
    }
  };

  const removeRole = async (role: Role): Promise<void> => {
    if (role.is_builtin) return;
    if (!window.confirm(`确定删除角色"${role.role_name}"吗？`)) return;
    try {
      await api.deletePlatformRole(role.role_code);
      setRoles((current) => current.filter(
        (item) => item.role_code !== role.role_code,
      ));
      onNotify({ tone: "success", message: "角色已删除" });
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "删除角色失败",
      });
    }
  };

  const filteredRoles = roles.filter((role) => {
    const term = searchTerm.toLowerCase().trim();
    if (!term) return true;
    return (
      role.role_code.toLowerCase().includes(term) ||
      role.role_name.toLowerCase().includes(term)
    );
  });

  return (
    <section className="admin-page">
      <div className="admin-toolbar">
        <div className="admin-toolbar__search">
          <Search size={14} className="text-[#8a99a8]" />
          <input
            type="text"
            placeholder="搜索角色编码 / 名称"
            className="admin-toolbar__input"
            value={searchTerm}
            onChange={(event) => setSearchTerm(event.target.value)}
          />
        </div>
        <Button
          variant="default"
          size="sm"
          type="button"
          disabled={!canManage}
          onClick={openCreate}
          className="h-9 gap-1.5 rounded-[6px] bg-gradient-to-br from-[#2e86de] to-[#1978d4] px-3.5 text-[12px] font-semibold text-white shadow-[0_4px_12px_rgb(28_119_222/18%)] enabled:hover:from-[#1f7ed8] enabled:hover:to-[#1669c0]"
        >
          <Plus size={15} />
          新建角色
        </Button>
      </div>

      {!canManage && (
        <div className="admin-readonly">当前为开发人员，只能查看角色列表。</div>
      )}
      {loadError && <div className="admin-readonly">{loadError}</div>}

      <Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
        <AdminColgroup widths={ROLE_COL_WIDTHS} />
        <TableHeader className="bg-[#f5f8fb] text-[#748598]">
          <TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
            <TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">角色编码</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">角色名称</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">类型</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">权限</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {loading ? (
            <TableRow className="min-h-[60px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
              <TableCell colSpan={5} className="p-0">
                <p className="admin-empty">正在加载角色…</p>
              </TableCell>
            </TableRow>
          ) : filteredRoles.length === 0 ? (
            <TableRow className="min-h-[60px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
              <TableCell colSpan={5} className="p-0">
                <p className="admin-empty">
                  {roles.length === 0 ? "暂无角色" : "没有匹配的角色"}
                </p>
              </TableCell>
            </TableRow>
          ) : (
            filteredRoles.map((role) => (
              <TableRow key={role.role_id} className="min-h-[60px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
                <TableCell className="p-3 px-4 align-middle"><code className="role-code">{role.role_code}</code></TableCell>
                <TableCell className="p-3 px-4 align-middle"><span className="role-name">{role.role_name}</span></TableCell>
                <TableCell className="p-3 px-4 align-middle"><span className={`builtin-badge${role.is_builtin ? "" : " is-custom"}`}>
                  {role.is_builtin ? "内置" : "自定义"}
                </span></TableCell>
                <TableCell className="p-3 px-4 align-middle"><span className="permission-count">
                  {role.permission_codes.length} 项权限
                </span></TableCell>
                <TableCell className="p-3 px-4 align-middle"><span className="role-actions">
                  <Button
                    variant="outline"
                    size="xs"
                    type="button"
                    disabled={!canManage}
                    onClick={() => openEdit(role)}
                    className="h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#4c6c88] hover:bg-[#f7fafc] disabled:cursor-not-allowed disabled:opacity-[0.45]"
                  >
                    编辑
                  </Button>
                  <Button
                    variant="outline"
                    size="xs"
                    type="button"
                    disabled={!canManage}
                    onClick={() => openPermissions(role)}
                    className="h-6 gap-1 rounded-[4px] border-[#d9e3ec] bg-white px-[9px] text-[11px] text-[#4c6c88] hover:bg-[#f7fafc] disabled:cursor-not-allowed disabled:opacity-[0.45]"
                  >
                    权限
                  </Button>
                  <Button
                    variant="destructive"
                    size="xs"
                    type="button"
                    disabled={!canManage || role.is_builtin}
                    title={role.is_builtin ? "内置角色不可删除" : "删除角色"}
                    onClick={() => void removeRole(role)}
                    className="h-6 gap-1 rounded-[4px] border-red-200 bg-white px-[9px] text-[11px] text-red-700 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-[0.45]"
                  >
                    删除
                  </Button>
                </span></TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>

      {dialogOpen && (
        <RoleEditDialog
          open={dialogOpen}
          editing={editing}
          permissions={permissions}
          saving={saving}
          onNotify={onNotify}
          onSubmit={(payload) => void handleRoleSubmit(payload)}
          onClose={() => setDialogOpen(false)}
        />
      )}

      {permissionDialogOpen && permissionTarget && (
        <PermissionEditDialog
          open={permissionDialogOpen}
          target={permissionTarget}
          permissions={permissions}
          currentCodes={permissionTarget.permission_codes}
          saving={saving}
          onSubmit={(codes) => void savePermissions(codes)}
          onClose={() => setPermissionDialogOpen(false)}
        />
      )}
    </section>
  );
}