'use client'

import * as React from 'react'
import { Calendar, Save, RefreshCw, Clock, Send } from 'lucide-react'
import { updateBiddingSchedule, getBiddingById, getSpecificationMeetingDetailsAction } from '@/lib/bidding/service'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import { ApprovalPreviewDialog } from '@/lib/approval/approval-preview-dialog'
import { requestBiddingInvitationWithApproval } from '@/lib/bidding/approval-actions'
import { prepareBiddingApprovalData } from '@/lib/bidding/approval-actions'
import { BiddingInvitationDialog } from '@/lib/bidding/detail/table/bidding-invitation-dialog'
import { sendBiddingBasicContracts, getSelectedVendorsForBidding } from '@/lib/bidding/pre-quote/service'
import { registerBidding } from '@/lib/bidding/detail/service'
import { useToast } from '@/hooks/use-toast'
import { format } from 'date-fns'
interface BiddingSchedule {
  submissionStartDate?: string
  submissionEndDate?: string
  remarks?: string
  isUrgent?: boolean
  hasSpecificationMeeting?: boolean
}

interface SpecificationMeetingInfo {
  meetingDate: string
  meetingTime: string
  location: string
  address: string
  contactPerson: string
  contactPhone: string
  contactEmail: string
  agenda: string
  materials: string
  notes: string
  isRequired: boolean
}

interface BiddingScheduleEditorProps {
  biddingId: number
  readonly?: boolean
}

interface VendorContractRequirement {
  vendorId: number
  vendorName: string
  vendorCode?: string
  vendorCountry?: string
  vendorEmail?: string
  contactPerson?: string
  contactEmail?: string
  ndaYn?: boolean
  generalGtcYn?: boolean
  projectGtcYn?: boolean
  agreementYn?: boolean
  biddingCompanyId: number
  biddingId: number
}

interface VendorWithContactInfo extends VendorContractRequirement {
  contacts: Array<{
    id: number
    contactName: string
    contactEmail: string
    contactPhone?: string | null
    contactPosition?: string | null
    contactDepartment?: string | null
  }>
  selectedMainEmail: string
  additionalEmails: string[]
  customEmails: Array<{
    id: string
    email: string
    name?: string
  }>
  hasExistingContracts: boolean
}

interface BiddingInvitationData {
  vendors: VendorWithContactInfo[]
  generatedPdfs: Array<{
    key: string
    buffer: number[]
    fileName: string
  }>
  message?: string
}

export function BiddingScheduleEditor({ biddingId, readonly = false }: BiddingScheduleEditorProps) {
  const { data: session } = useSession()
  const router = useRouter()
  const { toast } = useToast()
  const [schedule, setSchedule] = React.useState<BiddingSchedule>({})
  const [specMeetingInfo, setSpecMeetingInfo] = React.useState<SpecificationMeetingInfo>({
    meetingDate: '',
    meetingTime: '',
    location: '',
    address: '',
    contactPerson: '',
    contactPhone: '',
    contactEmail: '',
    agenda: '',
    materials: '',
    notes: '',
    isRequired: false,
  })
  const [isLoading, setIsLoading] = React.useState(false)
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const [biddingInfo, setBiddingInfo] = React.useState<{ title: string; projectName?: string; status: string; biddingNumber?: string } | null>(null)
  const [isBiddingInvitationDialogOpen, setIsBiddingInvitationDialogOpen] = React.useState(false)
  const [isApprovalDialogOpen, setIsApprovalDialogOpen] = React.useState(false)
  const [selectedVendors, setSelectedVendors] = React.useState<VendorContractRequirement[]>([])
  const [approvalVariables, setApprovalVariables] = React.useState<Record<string, string>>({})
  const [approvalTitle, setApprovalTitle] = React.useState('')
  const [invitationData, setInvitationData] = React.useState<BiddingInvitationData | null>(null)

  // 차수 추출 헬퍼 함수
  const getRoundNumber = (biddingNumber: string): number => {
    const match = biddingNumber.match(/-(\d+)$/)
    return match ? parseInt(match[1]) : 1
  }

  // 차수 증가된 입찰인지 확인 (01이 아닌 경우)
  const isRoundIncreased = (biddingNumber?: string): boolean => {
    if (!biddingNumber) return false
    const round = getRoundNumber(biddingNumber)
    return round > 1
  }

  // 데이터 로딩
  React.useEffect(() => {
    const loadSchedule = async () => {
      setIsLoading(true)
      try {
        const bidding = await getBiddingById(biddingId)
        if (bidding) {
          // 입찰 정보 저장
          setBiddingInfo({
            title: bidding.title || '',
            projectName: bidding.projectName || undefined,
            status: bidding.status || '',
            biddingNumber: bidding.biddingNumber || undefined,
          })

          setSchedule({
            submissionStartDate: bidding.submissionStartDate ? new Date(bidding.submissionStartDate).toISOString().slice(0, 16) : '',
            submissionEndDate: bidding.submissionEndDate ? new Date(bidding.submissionEndDate).toISOString().slice(0, 16) : '',
            remarks: bidding.remarks || '',
            isUrgent: bidding.isUrgent || false,
            hasSpecificationMeeting: bidding.hasSpecificationMeeting || false,
          })

          // 사양설명회 정보 로드
          if (bidding.hasSpecificationMeeting) {
            try {
              const meetingDetails = await getSpecificationMeetingDetailsAction(biddingId)
              if (meetingDetails.success && meetingDetails.data) {
                const meeting = meetingDetails.data
                setSpecMeetingInfo({
                  meetingDate: meeting.meetingDate ? new Date(meeting.meetingDate).toISOString().slice(0, 16) : '',
                  meetingTime: meeting.meetingTime || '',
                  location: meeting.location || '',
                  address: meeting.address || '',
                  contactPerson: meeting.contactPerson || '',
                  contactPhone: meeting.contactPhone || '',
                  contactEmail: meeting.contactEmail || '',
                  agenda: meeting.agenda || '',
                  materials: meeting.materials || '',
                  notes: meeting.notes || '',
                  isRequired: meeting.isRequired || false,
                })
              }
            } catch (error) {
              console.error('Failed to load specification meeting details:', error)
            }
          }
        }
      } catch (error) {
        console.error('Failed to load schedule:', error)
        toast({
          title: '오류',
          description: '일정 정보를 불러오는데 실패했습니다.',
          variant: 'destructive',
        })
      } finally {
        setIsLoading(false)
      }
    }

    loadSchedule()
  }, [biddingId, toast])

  // 선정된 업체들 조회
  const getSelectedVendors = React.useCallback(async (): Promise<VendorContractRequirement[]> => {
    try {
      const result = await getSelectedVendorsForBidding(biddingId)
      if (result.success) {
        // 타입 변환: null을 undefined로 변환
        return result.vendors.map((vendor): VendorContractRequirement => ({
          vendorId: vendor.vendorId,
          vendorName: vendor.vendorName,
          vendorCode: vendor.vendorCode || undefined,
          vendorCountry: vendor.vendorCountry,
          vendorEmail: vendor.vendorEmail || undefined,
          contactPerson: vendor.contactPerson || undefined,
          contactEmail: vendor.contactEmail || undefined,
          ndaYn: vendor.ndaYn,
          generalGtcYn: vendor.generalGtcYn,
          projectGtcYn: vendor.projectGtcYn,
          agreementYn: vendor.agreementYn,
          biddingCompanyId: vendor.biddingCompanyId,
          biddingId: vendor.biddingId,
        }))
      } else {
        console.error('선정된 업체 조회 실패:', 'error' in result ? result.error : '알 수 없는 오류')
        return []
      }
    } catch (error) {
      console.error('선정된 업체 조회 실패:', error)
      return []
    }
  }, [biddingId])

  // 입찰 초대 다이얼로그가 열릴 때 선정된 업체들 조회
  React.useEffect(() => {
    if (isBiddingInvitationDialogOpen) {
      getSelectedVendors().then(vendors => {
        setSelectedVendors(vendors)
      })
    }
  }, [isBiddingInvitationDialogOpen, getSelectedVendors])

  // 입찰공고 버튼 클릭 핸들러 - 입찰 초대 다이얼로그 열기
  const handleBiddingInvitationClick = () => {
    setIsBiddingInvitationDialogOpen(true)
  }

  // 결재 상신 핸들러 - 결재 완료 시 실제 입찰 등록 실행
  const handleApprovalSubmit = async ({ approvers, title, attachments }: { approvers: string[], title: string, attachments?: File[] }) => {
    try {
      if (!session?.user?.id || !session.user.epId || !invitationData) {
        toast({
          title: '오류',
          description: '필요한 정보가 없습니다.',
          variant: 'destructive',
        })
        return
      }

      // 결재 상신
      const result = await requestBiddingInvitationWithApproval({
        biddingId,
        vendors: selectedVendors,
        message: invitationData.message || '',
        currentUser: {
          id: session.user.id,
          epId: session.user.epId,
          email: session.user.email || undefined,
        },
        approvers,
      })

      if (result.status === 'pending_approval') {
        toast({
          title: '입찰초대 결재 상신 완료',
          description: `결재가 상신되었습니다. (ID: ${result.approvalId})`,
        })
        setIsApprovalDialogOpen(false)
        setIsBiddingInvitationDialogOpen(false)
        setInvitationData(null)
        router.refresh()
      }
    } catch (error) {
      console.error('결재 상신 중 오류 발생:', error)
      toast({
        title: '오류',
        description: '결재 상신 중 오류가 발생했습니다.',
        variant: 'destructive',
      })
    }
  }

  // 차수 증가된 입찰의 직접 입찰공고 함수 (결재 생략)
  const handleDirectBiddingInvitation = async (data: BiddingInvitationData, vendors: VendorContractRequirement[]) => {
    try {
      if (!session?.user?.id) {
        toast({
          title: '오류',
          description: '사용자 정보가 없습니다.',
          variant: 'destructive',
        })
        return
      }

      // 입찰 등록 (결재 생략)
      const result = await registerBidding(biddingId, session.user.id.toString())

      if (result.success) {
        toast({
          title: '입찰공고 완료',
          description: '차수 증가된 입찰이 성공적으로 공고되었습니다.',
        })

        // 다이얼로그 닫기 및 페이지 새로고침
        setIsBiddingInvitationDialogOpen(false)
        setInvitationData(null)
        router.refresh()
      } else {
        toast({
          title: '오류',
          description: result.error || '입찰공고 중 오류가 발생했습니다.',
          variant: 'destructive',
        })
      }
    } catch (error) {
      console.error('직접 입찰공고 중 오류 발생:', error)
      toast({
        title: '오류',
        description: '입찰공고 중 오류가 발생했습니다.',
        variant: 'destructive',
      })
    }
  }

  // 입찰 초대 발송 핸들러 - 결재 준비 및 결재 다이얼로그 열기
  const handleBiddingInvitationSend = async (data: BiddingInvitationData) => {
    try {
      if (!session?.user?.id || !session.user.epId) {
        toast({
          title: '오류',
          description: '사용자 정보가 없습니다.',
          variant: 'destructive',
        })
        return
      }

      // 선정된 업체들 조회
      const vendors = await getSelectedVendors()
      if (vendors.length === 0) {
        toast({
          title: '오류',
          description: '선정된 업체가 없습니다.',
          variant: 'destructive',
        })
        return
      }

      // 차수 증가된 입찰(02, 03 등)인지 확인
      if (isRoundIncreased(biddingInfo?.biddingNumber)) {
        // 차수 증가된 입찰은 결재 생략하고 바로 입찰 등록
        await handleDirectBiddingInvitation(data, vendors)
        return
      }

      // 일반 입찰의 경우 결재 데이터 준비 (템플릿 변수, 제목 등)
      const approvalData = await prepareBiddingApprovalData({
        biddingId,
        vendors,
        message: data.message || '',
      })

      // 결재 준비 완료 - invitationData와 결재 데이터 저장 및 결재 다이얼로그 열기
      setInvitationData(data)
      setApprovalVariables(approvalData.variables)
      setApprovalTitle(`입찰초대 - ${approvalData.bidding.title}`)
      setIsApprovalDialogOpen(true)
    } catch (error) {
      console.error('결재 준비 중 오류 발생:', error)
      toast({
        title: '오류',
        description: '결재 준비 중 오류가 발생했습니다.',
        variant: 'destructive',
      })
    }
  }

  const handleSave = async () => {
    setIsSubmitting(true)
    try {
      const userId = session?.user?.id?.toString() || '1'
      
      // 사양설명회 정보 유효성 검사
      if (schedule.hasSpecificationMeeting) {
        if (!specMeetingInfo.meetingDate || !specMeetingInfo.location || !specMeetingInfo.contactPerson) {
          toast({
            title: '오류',
            description: '사양설명회 필수 정보가 누락되었습니다. (회의일시, 장소, 담당자)',
            variant: 'destructive',
          })
          setIsSubmitting(false)
          return
        }
      }

      const result = await updateBiddingSchedule(
        biddingId, 
        schedule, 
        userId,
        schedule.hasSpecificationMeeting ? specMeetingInfo : undefined
      )

      if (result.success) {
        toast({
          title: '성공',
          description: '일정 정보가 성공적으로 저장되었습니다.',
        })
      } else {
        toast({
          title: '오류',
          description: 'error' in result ? result.error : '일정 정보 저장에 실패했습니다.',
          variant: 'destructive',
        })
      }
    } catch (error) {
      console.error('Failed to save schedule:', error)
      toast({
        title: '오류',
        description: '일정 정보 저장에 실패했습니다.',
        variant: 'destructive',
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleScheduleChange = (field: keyof BiddingSchedule, value: string | boolean) => {
    setSchedule(prev => ({ ...prev, [field]: value }))
    
    // 사양설명회 실시 여부가 false로 변경되면 상세 정보 초기화
    if (field === 'hasSpecificationMeeting' && value === false) {
      setSpecMeetingInfo({
        meetingDate: '',
        meetingTime: '',
        location: '',
        address: '',
        contactPerson: '',
        contactPhone: '',
        contactEmail: '',
        agenda: '',
        materials: '',
        notes: '',
        isRequired: false,
      })
    }
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
        <span className="ml-2">일정 정보를 불러오는 중...</span>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            입찰 일정 관리
          </CardTitle>
          <p className="text-sm text-muted-foreground mt-1">
            입찰의 주요 일정들을 설정하고 관리합니다.
          </p>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* 입찰서 제출 기간 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium flex items-center gap-2">
              <Clock className="h-4 w-4" />
              입찰서 제출 기간
            </h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="submission-start">제출 시작일시</Label>
                <Input
                  id="submission-start"
                  type="datetime-local"
                  value={schedule.submissionStartDate}
                  onChange={(e) => handleScheduleChange('submissionStartDate', e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="submission-end">제출 마감일시</Label>
                <Input
                  id="submission-end"
                  type="datetime-local"
                  value={schedule.submissionEndDate}
                  onChange={(e) => handleScheduleChange('submissionEndDate', e.target.value)}
                />
              </div>
            </div>
          </div>

          {/* 긴급 여부 */}
          <div className="flex flex-row items-center justify-between rounded-lg border p-4">
            <div className="space-y-0.5">
              <Label className="text-base">긴급여부</Label>
              <p className="text-sm text-muted-foreground">
                긴급 입찰로 표시할 경우 활성화하세요
              </p>
            </div>
            <Switch
              checked={schedule.isUrgent || false}
              onCheckedChange={(checked) => handleScheduleChange('isUrgent', checked)}
            />
          </div>

          {/* 사양설명회 실시 여부 */}
          <div className="flex flex-row items-center justify-between rounded-lg border p-4">
            <div className="space-y-0.5">
              <Label className="text-base">사양설명회 실시</Label>
              <p className="text-sm text-muted-foreground">
                사양설명회를 실시할 경우 상세 정보를 입력하세요
              </p>
            </div>
            <Switch
              checked={schedule.hasSpecificationMeeting || false}
              onCheckedChange={(checked) => handleScheduleChange('hasSpecificationMeeting', checked)}
            />
          </div>

          {/* 사양설명회 상세 정보 */}
          {schedule.hasSpecificationMeeting && (
            <div className="space-y-6 p-4 border rounded-lg bg-muted/50">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>회의일시 <span className="text-red-500">*</span></Label>
                  <Input
                    type="datetime-local"
                    value={specMeetingInfo.meetingDate}
                    onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, meetingDate: e.target.value }))}
                    className={!specMeetingInfo.meetingDate ? 'border-red-200' : ''}
                  />
                  {!specMeetingInfo.meetingDate && (
                    <p className="text-sm text-red-500 mt-1">회의일시는 필수입니다</p>
                  )}
                </div>
                <div>
                  <Label>회의시간</Label>
                  <Input
                    placeholder="예: 14:00 ~ 16:00"
                    value={specMeetingInfo.meetingTime}
                    onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, meetingTime: e.target.value }))}
                  />
                </div>
              </div>
              <div>
                <Label>장소 <span className="text-red-500">*</span></Label>
                <Input
                  placeholder="회의 장소"
                  value={specMeetingInfo.location}
                  onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, location: e.target.value }))}
                  className={!specMeetingInfo.location ? 'border-red-200' : ''}
                />
                {!specMeetingInfo.location && (
                  <p className="text-sm text-red-500 mt-1">회의 장소는 필수입니다</p>
                )}
              </div>
              <div>
                <Label>주소</Label>
                <Input
                  placeholder="회의 장소 주소"
                  value={specMeetingInfo.address}
                  onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, address: e.target.value }))}
                />
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <Label>담당자 <span className="text-red-500">*</span></Label>
                  <Input
                    placeholder="담당자명"
                    value={specMeetingInfo.contactPerson}
                    onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, contactPerson: e.target.value }))}
                    className={!specMeetingInfo.contactPerson ? 'border-red-200' : ''}
                  />
                  {!specMeetingInfo.contactPerson && (
                    <p className="text-sm text-red-500 mt-1">담당자는 필수입니다</p>
                  )}
                </div>
                <div>
                  <Label>연락처</Label>
                  <Input
                    placeholder="전화번호"
                    value={specMeetingInfo.contactPhone}
                    onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, contactPhone: e.target.value }))}
                  />
                </div>
                <div>
                  <Label>이메일</Label>
                  <Input
                    type="email"
                    placeholder="이메일"
                    value={specMeetingInfo.contactEmail}
                    onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, contactEmail: e.target.value }))}
                  />
                </div>
              </div>
              <div>
                <Label>안건</Label>
                <Textarea
                  placeholder="회의 안건을 입력하세요"
                  value={specMeetingInfo.agenda}
                  onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, agenda: e.target.value }))}
                  rows={3}
                />
              </div>
              <div>
                <Label>자료</Label>
                <Textarea
                  placeholder="회의 자료 정보를 입력하세요"
                  value={specMeetingInfo.materials}
                  onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, materials: e.target.value }))}
                  rows={3}
                />
              </div>
              <div>
                <Label>비고</Label>
                <Textarea
                  placeholder="추가 사항을 입력하세요"
                  value={specMeetingInfo.notes}
                  onChange={(e) => setSpecMeetingInfo((prev) => ({ ...prev, notes: e.target.value }))}
                  rows={3}
                />
              </div>
            </div>
          )}

          {/* 비고 */}
          <div className="space-y-4">
            <h3 className="text-lg font-medium">비고</h3>
            <div className="space-y-2">
              <Label htmlFor="remarks">추가 사항</Label>
              <Textarea
                id="remarks"
                value={schedule.remarks || ''}
                onChange={(e) => handleScheduleChange('remarks', e.target.value)}
                placeholder="일정에 대한 추가 설명이나 참고사항을 입력하세요"
                rows={4}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 일정 요약 카드 */}
      <Card>
        <CardHeader>
          <CardTitle>일정 요약</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="font-medium">입찰서 제출 기간:</span>
              <span>
                {schedule.submissionStartDate && schedule.submissionEndDate
                  ? `${format(new Date(schedule.submissionStartDate), "yyyy-MM-dd HH:mm")} ~ ${format(new Date(schedule.submissionEndDate), "yyyy-MM-dd HH:mm")}`
                  : '미설정'
                }
              </span>
            </div>
            <div className="flex justify-between">
              <span className="font-medium">긴급여부:</span>
              <span>
                {schedule.isUrgent ? '예' : '아니오'}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="font-medium">사양설명회 실시:</span>
              <span>
                {schedule.hasSpecificationMeeting ? '예' : '아니오'}
              </span>
            </div>
            {schedule.hasSpecificationMeeting && specMeetingInfo.meetingDate && (
              <div className="flex justify-between">
                <span className="font-medium">사양설명회 일시:</span>
                <span>
                  {format(new Date(specMeetingInfo.meetingDate), "yyyy-MM-dd HH:mm")}
                </span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* 액션 버튼 */}
      {!readonly && (
        <div className="flex justify-between gap-4">
          <Button
            variant="default"
            onClick={handleBiddingInvitationClick}
            disabled={!biddingInfo || biddingInfo.status !== 'bidding_generated'}
            className="min-w-[120px]"
          >
            <Send className="w-4 h-4 mr-2" />
            입찰공고
          </Button>
          <div className="flex gap-4">
            <Button
              onClick={handleSave}
              disabled={isSubmitting || !biddingInfo || biddingInfo.status !== 'bidding_generated'}
              className="min-w-[120px]"
            >
              {isSubmitting ? (
                <>
                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                  저장 중...
                </>
              ) : (
                <>
                  <Save className="w-4 h-4 mr-2" />
                  저장
                </>
              )}
            </Button>
          </div>
        </div>
      )}

      {/* 입찰 초대 다이얼로그 */}
      {biddingInfo && (
        <BiddingInvitationDialog
          open={isBiddingInvitationDialogOpen}
          onOpenChange={setIsBiddingInvitationDialogOpen}
          vendors={selectedVendors}
          biddingId={biddingId}
          biddingTitle={biddingInfo.title}
          onSend={handleBiddingInvitationSend}
        />
      )}

      {/* 입찰초대 결재 다이얼로그 */}
      {session?.user && session.user.epId && biddingInfo && invitationData && Object.keys(approvalVariables).length > 0 && (
        <ApprovalPreviewDialog
          open={isApprovalDialogOpen}
          onOpenChange={(open) => {
            setIsApprovalDialogOpen(open)
            if (!open) {
              // 다이얼로그가 닫히면 결재 변수 초기화
              setApprovalVariables({})
              setApprovalTitle('')
              setInvitationData(null)
            }
          }}
          templateName="입찰초대 결재"
          variables={approvalVariables}
          title={approvalTitle}
          currentUser={{
            id: Number(session.user.id),
            epId: session.user.epId,
            name: session.user.name || undefined,
            email: session.user.email || undefined
          }}
          onConfirm={handleApprovalSubmit}
        />
      )}
    </div>
  )
}

