"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { Plus } from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
import { format } from "date-fns"
import { ko } from "date-fns/locale"
import { cn } from "@/lib/utils"
import { createContract, getVendors } from "@/lib/general-contracts/service"
import { 
  GENERAL_CONTRACT_CATEGORIES, 
  GENERAL_CONTRACT_TYPES,
  GENERAL_EXECUTION_METHODS
} from "@/lib/general-contracts/types"
import { useSession } from "next-auth/react"

interface CreateContractForm {
  contractNumber: string
  name: string
  category: string
  type: string
  executionMethod: string
  vendorId: number | null
  startDate: Date | undefined
  endDate: Date | undefined
  validityEndDate: Date | undefined
  notes: string
}

export function CreateGeneralContractDialog() {
  const router = useRouter()
  const { data: session } = useSession()
  const [open, setOpen] = React.useState(false)
  const [isLoading, setIsLoading] = React.useState(false)
  const [vendors, setVendors] = React.useState<Array<{ id: number; vendorName: string; vendorCode: string | null }>>([])
  const [vendorSearchTerm, setVendorSearchTerm] = React.useState("")
  const [vendorOpen, setVendorOpen] = React.useState(false)

  const [form, setForm] = React.useState<CreateContractForm>({
    contractNumber: '',
    name: '',
    category: '',
    type: '',
    executionMethod: '',
    vendorId: null,
    startDate: undefined,
    endDate: undefined,
    validityEndDate: undefined,
    notes: '',
  })

  // 업체 목록 조회
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const vendorList = await getVendors()
        console.log('vendorList', vendorList)
        setVendors(vendorList)
      } catch (error) {
        console.error('데이터 조회 오류:', error)
        toast.error('데이터를 불러오는데 실패했습니다')
        setVendors([])
      }
    }
    fetchData()
  }, [])

  // 협력업체 검색 필터링
  const filteredVendors = React.useMemo(() => {
    if (!vendorSearchTerm.trim()) return vendors
    const lowerSearch = vendorSearchTerm.toLowerCase()
    return vendors.filter(
      vendor => 
        vendor.vendorName.toLowerCase().includes(lowerSearch) || 
        (vendor.vendorCode && vendor.vendorCode.toLowerCase().includes(lowerSearch))
    )
  }, [vendors, vendorSearchTerm])

  const handleSubmit = async () => {
    // 필수 필드 검증
    const validationErrors: string[] = []
    
    if (!form.name) validationErrors.push('계약명')
    if (!form.category) validationErrors.push('계약구분')
    if (!form.type) validationErrors.push('계약종류')
    if (!form.executionMethod) validationErrors.push('체결방식')
    if (!form.vendorId) validationErrors.push('협력업체')
    
    // AD, LO, OF 계약이 아닌 경우에만 계약기간 필수값 체크
    if (!['AD', 'LO', 'OF'].includes(form.type)) {
      if (!form.startDate) validationErrors.push('계약시작일')
      if (!form.endDate) validationErrors.push('계약종료일')
    }
    
    // LO 계약인 경우 계약체결유효기간 필수값 체크
    if (form.type === 'LO' && !form.validityEndDate) {
      validationErrors.push('유효기간')
    }
    
    if (validationErrors.length > 0) {
      toast.error(`다음 필수 항목을 입력해주세요: ${validationErrors.join(', ')}`)
      return
    }

    if (!form.validityEndDate) {
      setForm(prev => ({ ...prev, validityEndDate: form.endDate }))
    }

    try {
      setIsLoading(true)
      
      const contractData = {
        contractNumber: '',
        name: form.name,
        category: form.category,
        type: form.type,
        executionMethod: form.executionMethod,
        contractSourceType: 'manual',
        vendorId: form.vendorId!,
        startDate: form.startDate!.toISOString().split('T')[0],
        endDate: form.endDate!.toISOString().split('T')[0],
        validityEndDate: (form.validityEndDate || form.endDate!).toISOString().split('T')[0],
        status: 'Draft',
        registeredById: session?.user?.id || 1,
        lastUpdatedById: session?.user?.id || 1,
        notes: form.notes,
      }

      await createContract(contractData)
      
      toast.success("새 계약이 생성되었습니다.")
      setOpen(false)
      resetForm()
      
      // 상세 페이지로 이동
      router.refresh()
    } catch (error) {
      console.error('Error creating contract:', error)
      toast.error("계약 생성 중 오류가 발생했습니다.")
    } finally {
      setIsLoading(false)
    }
  }

  const resetForm = () => {
    setForm({
      contractNumber: '',
      name: '',
      category: '',
      type: '',
      executionMethod: '',
      vendorId: null,
      startDate: undefined,
      endDate: undefined,
      validityEndDate: undefined,
      notes: '',
    })
  }

  return (
    <Dialog open={open} onOpenChange={(newOpen) => {
      setOpen(newOpen)
      if (!newOpen) resetForm()
    }}>
      <DialogTrigger asChild>
        <Button size="sm">
          <Plus className="mr-2 h-4 w-4" />
          신규등록
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>새 계약 등록</DialogTitle>
          <DialogDescription>
            새로운 계약의 기본 정보를 입력하세요.
          </DialogDescription>
        </DialogHeader>
        
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-1 gap-4">
            <div className="grid gap-2">
              <Label htmlFor="name">계약명 *</Label>
              <Input
                id="name"
                value={form.name}
                onChange={(e) => setForm(prev => ({ ...prev, name: e.target.value }))}
                placeholder="계약명을 입력하세요"
              />
            </div>
          </div>

          <div className="grid grid-cols-3 gap-4">
            <div className="grid gap-2">
              <Label htmlFor="category">계약구분 *</Label>
              <Select value={form.category} onValueChange={(value) => setForm(prev => ({ ...prev, category: value }))}>
                <SelectTrigger>
                  <SelectValue placeholder="계약구분 선택" />
                </SelectTrigger>
                <SelectContent>
                  {GENERAL_CONTRACT_CATEGORIES.map((category) => {
                    const categoryLabels = {
                      'unit_price': '단가계약',
                      'general': '일반계약',
                      'sale': '매각계약'
                    }
                    return (
                    <SelectItem key={category} value={category}>
                      {category} - {categoryLabels[category as keyof typeof categoryLabels]}
                      </SelectItem>
                    )
                  })}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-2">
              <Label htmlFor="type">계약종류 *</Label>
              <Select value={form.type} onValueChange={(value) => setForm(prev => ({ ...prev, type: value }))}>
                <SelectTrigger>
                  <SelectValue placeholder="계약종류 선택" />
                </SelectTrigger>
                <SelectContent>
                  {GENERAL_CONTRACT_TYPES.map((type) => {
                    const typeLabels = {
                      'UP': '자재단가계약',
                      'LE': '임대차계약',
                      'IL': '개별운송계약',
                      'AL': '연간운송계약',
                      'OS': '외주용역계약',
                      'OW': '도급계약',
                      'LO': 'LOI',
                      'FA': 'FA',
                      'SC': '납품합의계약',
                      'OF': '클레임상계계약',
                      'AW': '사전작업합의',
                      'AD': '사전납품합의',
                      'SG': '임치(물품보관)계약',
                      'SR': '폐기물매각계약'
                    }
                    return (
                      <SelectItem key={type} value={type}>
                        {type} - {typeLabels[type as keyof typeof typeLabels]}
                      </SelectItem>
                    )
                  })}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-2">
              <Label htmlFor="executionMethod">체결방식 *</Label>
              <Select value={form.executionMethod} onValueChange={(value) => setForm(prev => ({ ...prev, executionMethod: value }))}>
                <SelectTrigger>
                  <SelectValue placeholder="체결방식 선택" />
                </SelectTrigger>
                <SelectContent>
                  {GENERAL_EXECUTION_METHODS.map((method) => (
                    <SelectItem key={method} value={method}>
                      {method}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid gap-2">
            <Label htmlFor="vendor">협력업체 *</Label>
            <Popover open={vendorOpen} onOpenChange={setVendorOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={vendorOpen}
                  className="w-full justify-between"
                >
                  {form.vendorId ? (
                    (() => {
                      const selected = vendors.find(v => v.id === form.vendorId)
                      return selected ? `${selected.vendorName} (${selected.vendorCode || ''})` : "협력업체 선택"
                    })()
                  ) : (
                    "협력업체 선택"
                  )}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-[400px] p-0">
                <Command>
                  <CommandInput
                    placeholder="협력업체명/코드 검색..."
                    onValueChange={setVendorSearchTerm}
                  />
                  <CommandList className="max-h-[300px]">
                    <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
                    <CommandGroup>
                      {filteredVendors.map((vendor) => (
                        <CommandItem
                          key={vendor.id}
                          value={`${vendor.vendorName} ${vendor.vendorCode || ''}`}
                          onSelect={() => {
                            setForm(prev => ({ ...prev, vendorId: vendor.id }))
                            setVendorOpen(false)
                            setVendorSearchTerm("")
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              form.vendorId === vendor.id ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <span className="font-medium">{vendor.vendorName}</span>
                          {vendor.vendorCode && (
                            <span className="ml-2 text-gray-500">({vendor.vendorCode})</span>
                          )}
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>

          <div className="grid grid-cols-3 gap-4">
            <div className="grid gap-2">
              <Label>계약시작일 *</Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "justify-start text-left font-normal",
                      !form.startDate && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {form.startDate ? format(form.startDate, "yyyy-MM-dd", { locale: ko }) : "날짜 선택"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar
                    mode="single"
                    selected={form.startDate}
                    onSelect={(date) => setForm(prev => ({ ...prev, startDate: date }))}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>

            <div className="grid gap-2">
              <Label>계약종료일 *</Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "justify-start text-left font-normal",
                      !form.endDate && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {form.endDate ? format(form.endDate, "yyyy-MM-dd", { locale: ko }) : "날짜 선택"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar
                    mode="single"
                    selected={form.endDate}
                    onSelect={(date) => setForm(prev => ({ ...prev, endDate: date }))}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>

            <div className="grid gap-2">
              <Label>유효기간종료일</Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "justify-start text-left font-normal",
                      !form.validityEndDate && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {form.validityEndDate ? format(form.validityEndDate, "yyyy-MM-dd", { locale: ko }) : "날짜 선택"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0">
                  <Calendar
                    mode="single"
                    selected={form.validityEndDate}
                    onSelect={(date) => setForm(prev => ({ ...prev, validityEndDate: date }))}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="notes">비고</Label>
            <Textarea
              id="notes"
              value={form.notes}
              onChange={(e) => setForm(prev => ({ ...prev, notes: e.target.value }))}
              placeholder="비고사항을 입력하세요"
              rows={3}
            />
          </div>
        </div>

        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={() => setOpen(false)}
          >
            취소
          </Button>
          <Button
            type="button"
            onClick={handleSubmit}
            disabled={isLoading}
          >
            {isLoading ? '생성 중...' : '생성'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}