"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

interface BulkImportDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (data: Record<string, any>) => void
}

export function BulkImportDialog({ open, onOpenChange, onSubmit }: BulkImportDialogProps) {
  const [formData, setFormData] = React.useState<Record<string, any>>({
    equipBulkDivision: "",
    similarMaterialNamePurchase: "",
    faTarget: null,
    tier: "",
    isAgent: null,
    headquarterLocation: "",
    manufacturingLocation: "",
    avlVendorName: "",
    isBlacklist: null,
    isBcc: null,
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    // 빈 값이나 기본값은 제외하고 실제 변경할 값만 전달
    const filteredData: Record<string, any> = {}

    Object.entries(formData).forEach(([key, value]) => {
      if (value !== "" && value !== null && value !== undefined) {
        filteredData[key] = value
      }
    })

    if (Object.keys(filteredData).length === 0) {
      return
    }

    onSubmit(filteredData)
    // 폼 초기화
    setFormData({
      equipBulkDivision: "",
      similarMaterialNamePurchase: "",
      faTarget: null,
      tier: "",
      isAgent: null,
      headquarterLocation: "",
      manufacturingLocation: "",
      avlVendorName: "",
      isBlacklist: null,
      isBcc: null,
    })
  }

  const handleCancel = () => {
    setFormData({
      equipBulkDivision: "",
      similarMaterialNamePurchase: "",
      faTarget: null,
      tier: "",
      isAgent: null,
      headquarterLocation: "",
      manufacturingLocation: "",
      avlVendorName: "",
      isBlacklist: null,
      isBcc: null,
    })
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>일괄 입력</DialogTitle>
          <DialogDescription>
            선택된 행들에 동일한 값을 입력합니다. 빈 칸은 변경하지 않습니다.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            {/* Equip/Bulk 구분 */}
            <div className="space-y-2">
              <Label htmlFor="equipBulkDivision">Equip/Bulk 구분</Label>
              <Select
                value={formData.equipBulkDivision}
                onValueChange={(value) => setFormData(prev => ({ ...prev, equipBulkDivision: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="E">E (Equip)</SelectItem>
                  <SelectItem value="B">B (Bulk)</SelectItem>
                  <SelectItem value="S">S (강재)</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 유사자재명(구매) */}
            <div className="space-y-2">
              <Label htmlFor="similarMaterialNamePurchase">유사자재명(구매)</Label>
              <Input
                id="similarMaterialNamePurchase"
                value={formData.similarMaterialNamePurchase}
                onChange={(e) => setFormData(prev => ({ ...prev, similarMaterialNamePurchase: e.target.value }))}
                placeholder="유사자재명 입력"
              />
            </div>

            {/* FA대상 */}
            <div className="space-y-2">
              <Label>FA대상</Label>
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="faTarget"
                  checked={formData.faTarget === true}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, faTarget: checked ? true : null }))}
                />
                <Label htmlFor="faTarget" className="text-sm">대상</Label>
              </div>
            </div>

            {/* 등급 */}
            <div className="space-y-2">
              <Label htmlFor="tier">등급</Label>
              <Input
                id="tier"
                value={formData.tier}
                onChange={(e) => setFormData(prev => ({ ...prev, tier: e.target.value }))}
                placeholder="등급 입력"
              />
            </div>

            {/* Agent 여부 */}
            <div className="space-y-2">
              <Label>Agent 여부</Label>
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="isAgent"
                  checked={formData.isAgent === true}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isAgent: checked ? true : null }))}
                />
                <Label htmlFor="isAgent" className="text-sm">Agent</Label>
              </div>
            </div>

            {/* 본사위치(국가) */}
            <div className="space-y-2">
              <Label htmlFor="headquarterLocation">본사위치(국가)</Label>
              <Input
                id="headquarterLocation"
                value={formData.headquarterLocation}
                onChange={(e) => setFormData(prev => ({ ...prev, headquarterLocation: e.target.value }))}
                placeholder="국가명 입력"
              />
            </div>

            {/* 제작/선적지(국가) */}
            <div className="space-y-2">
              <Label htmlFor="manufacturingLocation">제작/선적지(국가)</Label>
              <Input
                id="manufacturingLocation"
                value={formData.manufacturingLocation}
                onChange={(e) => setFormData(prev => ({ ...prev, manufacturingLocation: e.target.value }))}
                placeholder="국가명 입력"
              />
            </div>

            {/* AVL등재업체명 */}
            <div className="space-y-2">
              <Label htmlFor="avlVendorName">AVL등재업체명</Label>
              <Input
                id="avlVendorName"
                value={formData.avlVendorName}
                onChange={(e) => setFormData(prev => ({ ...prev, avlVendorName: e.target.value }))}
                placeholder="업체명 입력"
              />
            </div>

            {/* Blacklist */}
            <div className="space-y-2">
              <Label>Blacklist</Label>
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="isBlacklist"
                  checked={formData.isBlacklist === true}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isBlacklist: checked ? true : null }))}
                />
                <Label htmlFor="isBlacklist" className="text-sm">등록</Label>
              </div>
            </div>

            {/* BCC */}
            <div className="space-y-2">
              <Label>BCC</Label>
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="isBcc"
                  checked={formData.isBcc === true}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isBcc: checked ? true : null }))}
                />
                <Label htmlFor="isBcc" className="text-sm">등록</Label>
              </div>
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={handleCancel}>
              취소
            </Button>
            <Button type="submit">
              적용
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}