"use client"

import * as React from "react"
import { toast } from "sonner"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Loader, Plus, Minus, Users } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { AssginedUserTable } from "../userTable/assignedUsers-table"
import { assignUsersToRole, removeUsersFromRole } from "@/lib/users/service"
import { RoleView } from "@/db/schema/users"

export interface ManageRoleSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  role: RoleView | null
  // 현재 구조에 맞춰 allUsersPromises 사용
  allUsersPromises: Promise<[{ data: any[]; pageCount: number }]>
}

export function ManageRoleSheet({ 
  role, 
  allUsersPromises, 
  ...props 
}: ManageRoleSheetProps) {
  const [isUpdatePending, startUpdateTransition] = React.useTransition()
  const [selectedUserIds, setSelectedUserIds] = React.useState<number[]>([])
  const [activeTab, setActiveTab] = React.useState("assign")

  function handleSelectedChange(ids: number[]) {
    setSelectedUserIds(ids)
  }

  async function handleAssign() {
    if (!role || selectedUserIds.length === 0) {
      toast.error("선택된 사용자가 없습니다.")
      return
    }

    startUpdateTransition(async () => {
      const { data, error } = await assignUsersToRole(role.id, selectedUserIds)
      if (error) {
        toast.error(error)
        return
      }
      
      setSelectedUserIds([]) // 선택 초기화
      toast.success(data?.message || `${selectedUserIds.length}명의 사용자가 "${role.name}" 롤에 할당되었습니다.`)
      
      // 작업 완료 후 시트를 닫지 않고 유지 (계속 작업할 수 있도록)
    })
  }

  async function handleRemove() {
    if (!role || selectedUserIds.length === 0) {
      toast.error("선택된 사용자가 없습니다.")
      return
    }

    startUpdateTransition(async () => {
      const { data, error } = await removeUsersFromRole(role.id, selectedUserIds)
      if (error) {
        toast.error(error)
        return
      }
      
      setSelectedUserIds([]) // 선택 초기화  
      toast.success(data?.message || `${selectedUserIds.length}명의 사용자가 "${role.name}" 롤에서 제거되었습니다.`)
    })
  }

  // 탭 변경시 선택 초기화
  React.useEffect(() => {
    setSelectedUserIds([])
  }, [activeTab])

  // 롤 변경시 선택 초기화
  React.useEffect(() => {
    setSelectedUserIds([])
    setActiveTab("assign") // 기본적으로 assign 탭으로 리셋
  }, [role?.id])

  // 시트가 닫힐 때 상태 초기화
  React.useEffect(() => {
    if (!props.open) {
      setSelectedUserIds([])
      setActiveTab("assign")
    }
  }, [props.open])

  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-md" style={{width: 1000, maxWidth: 1000}}>
        <SheetHeader className="text-left">
          <SheetTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Manage "{role?.name}" Role
          </SheetTitle>
          <SheetDescription className="space-y-2">
            <div className="flex items-center gap-2">
              <span>Currently assigned:</span>
              <Badge variant="secondary">{role?.user_count || 0} users</Badge>
            </div>
            <div className="text-sm">
              {role?.description}
            </div>
          </SheetDescription>
        </SheetHeader>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="assign" className="flex items-center gap-2">
              <Plus className="h-4 w-4" />
              Assign Users
            </TabsTrigger>
            <TabsTrigger value="remove" className="flex items-center gap-2">
              <Minus className="h-4 w-4" />
              Remove Users
            </TabsTrigger>
          </TabsList>

          <TabsContent value="assign" className="flex-1 mt-4">
            <div className="mb-3 text-sm text-muted-foreground">
              Select users to assign to this role:

            </div>
            <AssginedUserTable 
              promises={allUsersPromises} 
              onSelectedChange={handleSelectedChange}
              mode="assign"
              currentRoleName={role?.name}
            />
          </TabsContent>

          <TabsContent value="remove" className="flex-1 mt-4">
            <div className="mb-3 text-sm text-muted-foreground">
              Select users to remove from this role:
            </div>
            <AssginedUserTable 
              promises={allUsersPromises} 
              onSelectedChange={handleSelectedChange}
              mode="remove"
              currentRoleName={role?.name}
            />
          </TabsContent>
        </Tabs>

        <SheetFooter className="gap-2 pt-2 sm:space-x-0">
          <SheetClose asChild>
            <Button type="button" variant="outline">
              Cancel
            </Button>
          </SheetClose>

          {activeTab === "assign" ? (
            <Button 
              disabled={isUpdatePending || selectedUserIds.length === 0} 
              onClick={handleAssign}
            >
              {isUpdatePending && (
                <Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
              )}
              <Plus className="mr-2 h-4 w-4" />
              Assign ({selectedUserIds.length})
            </Button>
          ) : (
            <Button 
              disabled={isUpdatePending || selectedUserIds.length === 0} 
              onClick={handleRemove}
              variant="destructive"
            >
              {isUpdatePending && (
                <Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
              )}
              <Minus className="mr-2 h-4 w-4" />
              Remove ({selectedUserIds.length})
            </Button>
          )}
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}