"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { AlertCircle, Users } from "lucide-react";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { UserSelector, UserSelectItem } from "@/components/common/user/user-selector";
import { 
  getOrCreateRedFlagManagers, 
  updateRedFlagManagers 
} from "@/lib/compliance/services";

type ManagerDialogMode = "redflag" | "hse";

interface RedFlagManagersDialogProps {
  mode?: ManagerDialogMode;
}

export function RedFlagManagersDialog({ mode = "redflag" }: RedFlagManagersDialogProps) {
  const [open, setOpen] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [isFetching, setIsFetching] = React.useState(false);
  const router = useRouter();

  // 담당자 state
  const [managerId, setManagerId] = React.useState<number | null>(null);
  const [purchasingManager, setPurchasingManager] = React.useState<UserSelectItem[]>([]);
  const [complianceManager, setComplianceManager] = React.useState<UserSelectItem[]>([]);
  const [hseManager, setHseManager] = React.useState<UserSelectItem[]>([]);

  // 다이얼로그 열릴 때 현재 담당자 정보 가져오기
  React.useEffect(() => {
    if (open) {
      loadManagers();
    }
  }, [open]);

  const loadManagers = async () => {
    setIsFetching(true);
    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const managers: any = await getOrCreateRedFlagManagers();
      
      if (managers) {
        setManagerId(managers.id);
        
        // 구매기획 담당자 설정
        if (managers.purchasingManager) {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          const pm: any = managers.purchasingManager;
          setPurchasingManager([{
            id: pm.id,
            name: pm.name,
            email: pm.email,
            epId: pm.epId,
            deptCode: pm.deptCode,
            deptName: pm.deptName,
            imageUrl: pm.imageUrl,
            domain: pm.domain,
          }]);
        }

        // 준법 담당자 설정
        if (managers.complianceManager) {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          const cm: any = managers.complianceManager;
          setComplianceManager([{
            id: cm.id,
            name: cm.name,
            email: cm.email,
            epId: cm.epId,
            deptCode: cm.deptCode,
            deptName: cm.deptName,
            imageUrl: cm.imageUrl,
            domain: cm.domain,
          }]);
        }

        // 안전(HSE) 담당자 설정
        if (managers.hseManager) {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          const hm: any = managers.hseManager;
          setHseManager([{
            id: hm.id,
            name: hm.name,
            email: hm.email,
            epId: hm.epId,
            deptCode: hm.deptCode,
            deptName: hm.deptName,
            imageUrl: hm.imageUrl,
            domain: hm.domain,
          }]);
        }
      }
    } catch (error) {
      console.error("Error loading red flag managers:", error);
      toast.error("담당자 정보를 불러오는 중 오류가 발생했습니다.");
    } finally {
      setIsFetching(false);
    }
  };

  const handleSave = async () => {
    if (!managerId) {
      toast.error("담당자 정보를 불러오지 못했습니다.");
      return;
    }

    setIsLoading(true);
    try {
      const payload: {
        purchasingManagerId?: number | null;
        complianceManagerId?: number | null;
        hseManagerId?: number | null;
      } = {};

      if (mode === "redflag") {
        payload.purchasingManagerId = purchasingManager[0]?.id || null;
        payload.complianceManagerId = complianceManager[0]?.id || null;
      } else if (mode === "hse") {
        payload.hseManagerId = hseManager[0]?.id || null;
      }

      await updateRedFlagManagers(managerId, payload);

      toast.success("담당자 설정이 저장되었습니다.");
      setOpen(false);
      router.refresh();
    } catch (error) {
      console.error("Error saving red flag managers:", error);
      toast.error("담당자 저장 중 오류가 발생했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <AlertCircle className="mr-2 h-4 w-4 text-red-600" />
          {mode === "hse" ? "안전(HSE) 담당자" : "레드플래그 담당자"}
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5 text-red-600" />
            {mode === "hse" ? "안전(HSE) 담당자 관리" : "레드플래그 담당자 관리"}
          </DialogTitle>
          <DialogDescription>
            {mode === "hse"
              ? "PQ 제출 및 안전 관련 알림을 받을 담당자를 지정합니다."
              : "레드플래그 발생 시 알림을 받을 담당자를 지정합니다."}
          </DialogDescription>
        </DialogHeader>

        {isFetching ? (
          <div className="space-y-4 py-4">
            <div className="text-center text-sm text-muted-foreground">
              담당자 정보를 불러오는 중...
            </div>
          </div>
        ) : (
          <div className="space-y-6 py-4">
            {mode === "redflag" && (
              <>
                {/* 구매기획 담당자 */}
                <div className="space-y-2">
                  <Label htmlFor="purchasing-manager" className="flex items-center gap-2">
                    <Users className="h-4 w-4" />
                    구매기획 담당자
                  </Label>
                  <UserSelector
                    selectedUsers={purchasingManager}
                    onUsersChange={setPurchasingManager}
                    singleSelect={true}
                    placeholder="구매기획 담당자를 검색하세요..."
                    domainFilter={{ type: "exclude", domains: ["partners"] }}
                    closeOnSelect={true}
                  />
                  <p className="text-xs text-muted-foreground">
                    레드플래그 발생 시 알림을 받을 구매기획 담당자를 지정합니다.
                  </p>
                </div>

                {/* 준법 담당자 */}
                <div className="space-y-2">
                  <Label htmlFor="compliance-manager" className="flex items-center gap-2">
                    <Users className="h-4 w-4" />
                    준법 담당자
                  </Label>
                  <UserSelector
                    selectedUsers={complianceManager}
                    onUsersChange={setComplianceManager}
                    singleSelect={true}
                    placeholder="준법 담당자를 검색하세요..."
                    domainFilter={{ type: "exclude", domains: ["partners"] }}
                    closeOnSelect={true}
                  />
                  <p className="text-xs text-muted-foreground">
                    레드플래그 발생 시 알림을 받을 준법 담당자를 지정합니다.
                  </p>
                </div>
              </>
            )}

            {mode === "hse" && (
              <div className="space-y-2">
                <Label htmlFor="hse-manager" className="flex items-center gap-2">
                  <Users className="h-4 w-4" />
                  안전(HSE) 담당자
                </Label>
                <UserSelector
                  selectedUsers={hseManager}
                  onUsersChange={setHseManager}
                  singleSelect={true}
                  placeholder="안전(HSE) 담당자를 검색하세요..."
                  domainFilter={{ type: "exclude", domains: ["partners"] }}
                  closeOnSelect={true}
                />
                <p className="text-xs text-muted-foreground">
                  PQ 제출 및 안전 관련 알림을 받을 담당자를 지정합니다.
                </p>
              </div>
            )}
          </div>
        )}

        <DialogFooter>
          <Button 
            type="button" 
            variant="outline" 
            onClick={() => setOpen(false)}
            disabled={isLoading || isFetching}
          >
            취소
          </Button>
          <Button 
            type="button" 
            onClick={handleSave}
            disabled={isLoading || isFetching}
          >
            {isLoading ? "저장 중..." : "저장"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}