// components/permissions/role-permission-manager.tsx

"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { toast } from "sonner";
import { assignPermissionsToRole, getRolePermissions } from "@/lib/permissions/service";
import { RoleSelector } from "@/components/permissions/role-selector";

export function RolePermissionManager() {
  const [selectedRole, setSelectedRole] = useState<string>("");
  const [permissions, setPermissions] = useState<any[]>([]);
  const [selectedPermissions, setSelectedPermissions] = useState<Set<number>>(new Set());
  const [loading, setLoading] = useState(false);

  console.log(selectedRole)

  useEffect(() => {
    if (selectedRole) {
      loadRolePermissions(selectedRole.id);
    }
  }, [selectedRole]);

  const loadRolePermissions = async (roleId: string) => {
    try {
      const data = await getRolePermissions(parseInt(roleId));
      setPermissions(data.permissions);
      setSelectedPermissions(new Set(data.assignedPermissionIds));
    } catch (error) {
      toast.error("권한 목록을 불러오는데 실패했습니다.");
    }
  };

  const handleSave = async () => {
    if (!selectedRole) {
      toast.error("역할을 선택해주세요.");
      return;
    }

    try {
      setLoading(true);
      await assignPermissionsToRole(
        parseInt(selectedRole.id),
        Array.from(selectedPermissions)
      );
      toast.success("권한이 성공적으로 저장되었습니다.");
    } catch (error) {
      toast.error("권한 저장에 실패했습니다.");
    } finally {
      setLoading(false);
    }
  };

  const togglePermission = (permissionId: number) => {
    const newSet = new Set(selectedPermissions);
    if (newSet.has(permissionId)) {
      newSet.delete(permissionId);
    } else {
      newSet.add(permissionId);
    }
    setSelectedPermissions(newSet);
  };

  // 권한 그룹별로 정리
  const groupedPermissions = permissions.reduce((acc, perm) => {
    const group = perm.menuPath || "기타";
    if (!acc[group]) acc[group] = [];
    acc[group].push(perm);
    return acc;
  }, {} as Record<string, any[]>);

  return (
    <Card>
      <CardHeader>
        <CardTitle>역할별 권한 설정</CardTitle>
        <CardDescription>
          역할을 선택하고 해당 역할에 부여할 권한을 선택하세요.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {/* 역할 선택 */}
          <div className="flex items-center gap-4">
            <RoleSelector
              selectedRoleId={selectedRole?.id}
              onRoleSelect={setSelectedRole}
              placeholder="역할을 선택하세요..."
              className='max-w-[400px]'
            domain="evcp" // 선택사항: 특정 도메인만 필터링
            />

            <Button
              onClick={handleSave}
              disabled={!selectedRole || loading}
            >
              권한 저장
            </Button>
          </div>

          {/* 권한 목록 */}
          {selectedRole && (
            <div className="border rounded-lg">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[50px]">선택</TableHead>
                    <TableHead>메뉴/그룹</TableHead>
                    <TableHead>권한명</TableHead>
                    <TableHead>타입</TableHead>
                    <TableHead>범위</TableHead>
                    <TableHead>설명</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {Object.entries(groupedPermissions).map(([group, perms]) => (
                    <>
                      <TableRow key={group} className="bg-muted/50">
                        <TableCell colSpan={6} className="font-medium">
                          {group}
                        </TableCell>
                      </TableRow>
                      {perms.map((permission) => (
                        <TableRow key={permission.id}>
                          <TableCell>
                            <Checkbox
                              checked={selectedPermissions.has(permission.id)}
                              onCheckedChange={() => togglePermission(permission.id)}
                            />
                          </TableCell>
                          <TableCell>
                            <Badge variant="outline">{permission.resource}</Badge>
                          </TableCell>
                          <TableCell className="font-medium">
                            {permission.name}
                          </TableCell>
                          <TableCell>
                            <Badge>{permission.permissionType}</Badge>
                          </TableCell>
                          <TableCell>
                            <Badge variant="secondary">{permission.scope}</Badge>
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground">
                            {permission.description}
                          </TableCell>
                        </TableRow>
                      ))}
                    </>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}