path: root/lib/tech-vendors/table/update-vendor-sheet.tsx

"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { 
  Loader, 
  Activity, 
  AlertCircle, 
  AlertTriangle, 
  Circle as CircleIcon,
  Building,
} from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormDescription
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { useSession } from "next-auth/react" // Import useSession

import { TechVendor, techVendors } from "@/db/schema/techVendors"
import { updateTechVendorSchema, type UpdateTechVendorSchema } from "../validations"
import { modifyTechVendor } from "../service"

interface UpdateVendorSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  vendor: TechVendor | null
}
type StatusType = (typeof techVendors.status.enumValues)[number];

type StatusConfig = {
  Icon: React.ElementType;
  className: string;
  label: string;
};

// 상태 표시 유틸리티 함수
const getStatusConfig = (status: StatusType): StatusConfig => {
  switch(status) {
    case "ACTIVE":
      return { 
        Icon: Activity,
        className: "text-emerald-600", 
        label: "활성 상태"
      };
    case "INACTIVE":
      return { 
        Icon: AlertCircle,
        className: "text-gray-600", 
        label: "비활성 상태"
      };
    case "BLACKLISTED":
      return { 
        Icon: AlertTriangle,
        className: "text-slate-800", 
        label: "거래 금지"
      };
    case "PENDING_REVIEW":
      return { 
        Icon: AlertTriangle,
        className: "text-slate-800", 
        label: "비교 견적"
      };
    default:
      return { 
        Icon: CircleIcon,
        className: "text-gray-600", 
        label: status
      };
  }
};


// 폼 컴포넌트
export function UpdateVendorSheet({ vendor, ...props }: UpdateVendorSheetProps) {
  const [isPending, startTransition] = React.useTransition()
  const { data: session } = useSession()
  // 폼 정의 - UpdateVendorSchema 타입을 직접 사용
  const form = useForm<UpdateTechVendorSchema>({
    resolver: zodResolver(updateTechVendorSchema),
    defaultValues: {
      // 업체 기본 정보
      vendorName: vendor?.vendorName ?? "",
      vendorCode: vendor?.vendorCode ?? "",
      address: vendor?.address ?? "",
      country: vendor?.country ?? "",
      phone: vendor?.phone ?? "",
      email: vendor?.email ?? "",
      website: vendor?.website ?? "",
      techVendorType: vendor?.techVendorType ? vendor.techVendorType.split(',').map(s => s.trim()).filter(Boolean) as ("조선" | "해양TOP" | "해양HULL")[] : [],
      status: vendor?.status ?? "ACTIVE",
    },
  })

  React.useEffect(() => {
    if (vendor) {
      form.reset({
        vendorName: vendor?.vendorName ?? "",
        vendorCode: vendor?.vendorCode ?? "",
        address: vendor?.address ?? "",
        country: vendor?.country ?? "",
        phone: vendor?.phone ?? "",
        email: vendor?.email ?? "",
        website: vendor?.website ?? "",
        techVendorType: vendor?.techVendorType ? vendor.techVendorType.split(',').map(s => s.trim()).filter(Boolean) as ("조선" | "해양TOP" | "해양HULL")[] : [],
        status: vendor?.status ?? "ACTIVE",

      });
    }
  }, [vendor, form]);


  // 제출 핸들러
  async function onSubmit(data: UpdateTechVendorSchema) {
    if (!vendor) return
    
    if (!session?.user?.id) {
      toast.error("사용자 인증 정보를 찾을 수 없습니다.")
      return
    }
  startTransition(async () => {
    try {
      // Add status change comment if status has changed
      const oldStatus = vendor.status ?? "ACTIVE" // Default to ACTIVE if undefined
      const newStatus = data.status ?? "ACTIVE" // Default to ACTIVE if undefined
      
      const statusComment = 
        oldStatus !== newStatus 
          ? `상태 변경: ${getStatusConfig(oldStatus).label} → ${getStatusConfig(newStatus).label}`
          : ""  // Empty string instead of undefined
      
      // 업체 정보 업데이트 - userId와 상태 변경 코멘트 추가
      const { error } = await modifyTechVendor({ 
        id: String(vendor.id),
        userId: Number(session.user.id), // Add user ID from session
        comment: statusComment, // Add comment for status changes
        ...data,  // 모든 데이터 전달 - 서비스 함수에서 필요한 필드만 처리
        techVendorType: Array.isArray(data.techVendorType) ? data.techVendorType.join(',') : undefined,
      })
      
      if (error) throw new Error(error)
      
      toast.success("업체 정보가 업데이트되었습니다!")
      form.reset()
      props.onOpenChange?.(false)
    } catch (err: unknown) {
      toast.error(String(err))
    }
  })
}

  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-lg overflow-y-auto">
        <SheetHeader className="text-left">
          <SheetTitle>업체 정보 수정</SheetTitle>
          <SheetDescription>
            업체 세부 정보를 수정하고 변경 사항을 저장하세요
          </SheetDescription>
        </SheetHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
            {/* 업체 기본 정보 섹션 */}
            <div className="space-y-4">
              <div className="flex items-center">
                <Building className="mr-2 h-5 w-5 text-muted-foreground" />
                <h3 className="text-sm font-medium">업체 기본 정보</h3>
              </div>
              <FormDescription>
                업체가 제공한 기본 정보입니다. 필요시 수정하세요.
              </FormDescription>
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                {/* vendorName */}
                <FormField
                  control={form.control}
                  name="vendorName"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>업체명</FormLabel>
                      <FormControl>
                        <Input placeholder="업체명 입력" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* vendorCode */}
                <FormField
                  control={form.control}
                  name="vendorCode"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>업체 코드</FormLabel>
                      <FormControl>
                        <Input placeholder="예: ABC123" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* address */}
                <FormField
                  control={form.control}
                  name="address"
                  render={({ field }) => (
                    <FormItem className="md:col-span-2">
                      <FormLabel>주소</FormLabel>
                      <FormControl>
                        <Input placeholder="주소 입력" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* country */}
                <FormField
                  control={form.control}
                  name="country"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>국가</FormLabel>
                      <FormControl>
                        <Input placeholder="예: 대한민국" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* phone */}
                <FormField
                  control={form.control}
                  name="phone"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>전화번호</FormLabel>
                      <FormControl>
                        <Input placeholder="예: 010-1234-5678" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* email */}
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>이메일</FormLabel>
                      <FormControl>
                        <Input placeholder="예: info@company.com" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* website */}
                <FormField
                  control={form.control}
                  name="website"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>웹사이트</FormLabel>
                      <FormControl>
                        <Input placeholder="예: https://www.company.com" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* techVendorType */}
                <FormField
                  control={form.control}
                  name="techVendorType"
                  render={({ field }) => (
                    <FormItem className="md:col-span-2">
                      <FormLabel>벤더 타입 *</FormLabel>
                      <div className="space-y-2">
                        {["조선", "해양TOP", "해양HULL"].map((type) => (
                          <div key={type} className="flex items-center space-x-2">
                            <input
                              type="checkbox"
                              id={`update-${type}`}
                              checked={field.value?.includes(type as "조선" | "해양TOP" | "해양HULL")}
                              onChange={(e) => {
                                const currentValue = Array.isArray(field.value) ? field.value : [];
                                if (e.target.checked) {
                                  field.onChange([...currentValue, type]);
                                } else {
                                  field.onChange(currentValue.filter((v: string) => v !== type));
                                }
                              }}
                              className="w-4 h-4"
                            />
                            <label htmlFor={`update-${type}`} className="text-sm font-medium cursor-pointer">
                              {type}
                            </label>
                          </div>
                        ))}
                      </div>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {/* status with icons */}
                <FormField
                  control={form.control}
                  name="status"
                  render={({ field }) => {
                    // 현재 선택된 상태의 구성 정보 가져오기
                    const selectedConfig = getStatusConfig(field.value ?? "ACTIVE");
                    const SelectedIcon = selectedConfig?.Icon || CircleIcon;

                    return (
                      <FormItem>
                        <FormLabel>업체승인상태</FormLabel>
                        <FormControl>
                          <Select
                            value={field.value || ""}
                            onValueChange={field.onChange}
                          >
                            <SelectTrigger className="w-full">
                              <SelectValue>
                                {field.value && (
                                  <div className="flex items-center">
                                    <SelectedIcon className={`mr-2 h-4 w-4 ${selectedConfig.className}`} />
                                    <span>{selectedConfig.label}</span>
                                  </div>
                                )}
                              </SelectValue>
                            </SelectTrigger>
                            <SelectContent>
                              <SelectGroup>
                                {techVendors.status.enumValues.map((status) => {
                                  const config = getStatusConfig(status);
                                  const StatusIcon = config.Icon;
                                  return (
                                    <SelectItem key={status} value={status}>
                                      <div className="flex items-center">
                                        <StatusIcon className={`mr-2 h-4 w-4 ${config.className}`} />
                                        <span>{config.label}</span>
                                      </div>
                                    </SelectItem>
                                  );
                                })}
                              </SelectGroup>
                            </SelectContent>
                          </Select>
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    );
                  }}
                />

                                
               

              </div>
            </div>

            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
              <SheetClose asChild>
                <Button type="button" variant="outline">
                  취소
                </Button>
              </SheetClose>
              <Button disabled={isPending}>
                {isPending && (
                  <Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
                )}
                저장
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}