"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"
import { DisciplineHardcodedSelector } from "@/components/common/discipline-hardcoded/discipline-hardcoded-selector"
import { MaterialGroupSelectorDialogSingle } from "@/components/common/material/material-group-selector-dialog-single"
import { VendorTierSelector } from "@/components/common/selectors/vendor-tier/vendor-tier-selector"
import type { MaterialSearchItem } from "@/lib/material/material-group-service"

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

export function BulkInsertDialog({ open, onOpenChange, onSubmit }: BulkInsertDialogProps) {
  const [formData, setFormData] = React.useState<Record<string, any>>({
    constructionSector: "",
    discipline: "",
    equipBulkDivision: "",
    materialGroupCode: "",
    materialGroupName: "",
    similarMaterialNamePurchase: "",
    faTarget: null,
    tier: "",
  })

  // 자재그룹 선택 상태 관리 (UI 표시용)
  const [selectedMaterial, setSelectedMaterial] = React.useState<MaterialSearchItem | null>(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)
    handleReset()
  }

  const handleReset = () => {
    setFormData({
      constructionSector: "",
      discipline: "",
      equipBulkDivision: "",
      materialGroupCode: "",
      materialGroupName: "",
      similarMaterialNamePurchase: "",
      faTarget: null,
      tier: "",
    })
    setSelectedMaterial(null)
  }

  const handleCancel = () => {
    handleReset()
    onOpenChange(false)
  }

  // 자재그룹 선택 핸들러
  const handleMaterialSelect = (material: MaterialSearchItem | null) => {
    setSelectedMaterial(material)
    if (material) {
      setFormData(prev => ({
        ...prev,
        materialGroupCode: material.materialGroupCode,
        materialGroupName: material.materialGroupDescription
      }))
    } else {
      setFormData(prev => ({
        ...prev,
        materialGroupCode: "",
        materialGroupName: ""
      }))
    }
  }

  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">
            {/* 공사부문 */}
            <div className="space-y-2">
              <Label htmlFor="constructionSector">공사부문</Label>
              <Select
                value={formData.constructionSector}
                onValueChange={(value) => setFormData(prev => ({ ...prev, constructionSector: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="조선">조선</SelectItem>
                  <SelectItem value="해양">해양</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 설계공종 */}
            <div className="space-y-2">
              <Label htmlFor="discipline">설계공종</Label>
              <DisciplineHardcodedSelector
                selectedDiscipline={formData.discipline}
                onDisciplineSelect={(value) => setFormData(prev => ({ ...prev, discipline: value }))}
                placeholder="설계공종 선택"
              />
            </div>

            {/* 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="tier">등급</Label>
              <VendorTierSelector
                value={formData.tier}
                onValueChange={(value) => setFormData(prev => ({ ...prev, tier: value }))}
                placeholder="등급 선택"
              />
            </div>

            {/* 자재그룹 - 전체 너비 사용 */}
            <div className="space-y-2 col-span-2">
              <Label>자재그룹</Label>
              <MaterialGroupSelectorDialogSingle
                selectedMaterial={selectedMaterial}
                onMaterialSelect={handleMaterialSelect}
                triggerLabel="자재그룹 선택"
                placeholder="자재그룹 검색"
              />
            </div>

            {/* 유사자재명(구매) */}
            <div className="space-y-2 col-span-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 col-span-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>

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