"use client"

import * as React from "react"
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, type ColumnDef } from "@tanstack/react-table"
import { DataTable } from "@/components/data-table/data-table"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { getStandardAvlVendorInfo } from "../service"
import { GetStandardAvlSchema } from "../validations"
import { AvlDetailItem } from "../types"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search } from "lucide-react"
import { toast } from "sonner"

// 검색 옵션들
const constructionSectorOptions = [
  { value: "all", label: "전체" },
  { value: "조선", label: "조선" },
  { value: "해양", label: "해양" },
]

const shipTypeOptions = [
  { value: "all", label: "전체" },
  { value: "컨테이너선", label: "컨테이너선" },
  { value: "유조선", label: "유조선" },
  { value: "LNG선", label: "LNG선" },
  { value: "LPG선", label: "LPG선" },
  { value: "벌크선", label: "벌크선" },
  { value: "여객선", label: "여객선" },
]

const avlKindOptions = [
  { value: "all", label: "전체" },
  { value: "표준", label: "표준" },
  { value: "특별", label: "특별" },
  { value: "임시", label: "임시" },
]

const htDivisionOptions = [
  { value: "all", label: "전체" },
  { value: "H", label: "Hull (H)" },
  { value: "T", label: "Topside (T)" },
]

// 선종별 표준 AVL 테이블에서는 AvlDetailItem을 사용
export type StandardAvlItem = AvlDetailItem

interface StandardAvlTableProps {
  onSelectionChange?: (count: number) => void
  resetCounter?: number
  constructionSector?: string // 공사부문 필터
  shipType?: string // 선종 필터
  avlKind?: string // AVL 종류 필터
  htDivision?: string // H/T 구분 필터
}

// 선종별 표준 AVL 테이블 컬럼
const standardAvlColumns: ColumnDef<StandardAvlItem>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row, table }) => {
      // 선종별 표준 AVL 테이블의 단일 선택 핸들러
      const handleRowSelection = (checked: boolean) => {
        if (checked) {
          // 다른 모든 행의 선택 해제
          table.getRowModel().rows.forEach(r => {
            if (r !== row && r.getIsSelected()) {
              r.toggleSelected(false)
            }
          })
        }
        // 현재 행 선택/해제
        row.toggleSelected(checked)
      }

      return (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={handleRowSelection}
          aria-label="Select row"
        />
      )
    },
    enableSorting: false,
    enableHiding: false,
    size: 50,
  },
  {
    accessorKey: "no",
    header: "No.",
    size: 60,
  },
  {
    accessorKey: "disciplineName",
    header: "설계공종",
    size: 120,
  },
  {
    accessorKey: "avlVendorName",
    header: "AVL 등재업체명",
    size: 140,
  },
  {
    accessorKey: "materialGroupCode",
    header: "자재그룹 코드",
    size: 120,
  },
  {
    accessorKey: "materialGroupName",
    header: "자재그룹 명",
    size: 130,
  },
  {
    accessorKey: "vendorCode",
    header: "협력업체 코드",
    size: 120,
  },
  {
    accessorKey: "vendorName",
    header: "협력업체 명",
    size: 130,
  },
  {
    accessorKey: "headquarterLocation",
    header: "본사 위치 (국가)",
    size: 140,
  },
  {
    accessorKey: "tier",
    header: "등급 (Tier)",
    size: 120,
  },
]

export function StandardAvlTable({
  onSelectionChange,
  resetCounter,
  constructionSector: initialConstructionSector,
  shipType: initialShipType,
  avlKind: initialAvlKind,
  htDivision: initialHtDivision
}: StandardAvlTableProps) {
  const [data, setData] = React.useState<StandardAvlItem[]>([])
  const [loading, setLoading] = React.useState(false)
  const [pageCount, setPageCount] = React.useState(0)

  // 검색 상태
  const [searchConstructionSector, setSearchConstructionSector] = React.useState(initialConstructionSector || "all")
  const [searchShipType, setSearchShipType] = React.useState(initialShipType || "all")
  const [searchAvlKind, setSearchAvlKind] = React.useState(initialAvlKind || "all")
  const [searchHtDivision, setSearchHtDivision] = React.useState(initialHtDivision || "all")

  // 데이터 로드 함수
  const loadData = React.useCallback(async (searchParams: Partial<GetStandardAvlSchema>) => {
    try {
      setLoading(true)
      const params: GetStandardAvlSchema = {
        page: searchParams.page ?? 1,
        perPage: searchParams.perPage ?? 10,
        sort: searchParams.sort ?? [{ id: "no", desc: false }],
        constructionSector: searchConstructionSector === "all" ? "" : searchConstructionSector || "",
        shipType: searchShipType === "all" ? "" : searchShipType || "",
        avlKind: searchAvlKind === "all" ? "" : searchAvlKind || "",
        htDivision: searchHtDivision === "all" ? "" : searchHtDivision || "",
        search: "",
        ...searchParams,
      }
      const result = await getStandardAvlVendorInfo(params)
      setData(result.data)
      setPageCount(result.pageCount)
    } catch (error) {
      console.error("선종별 표준 AVL 데이터 로드 실패:", error)
      setData([])
      setPageCount(0)
    } finally {
      setLoading(false)
    }
  }, [searchConstructionSector, searchShipType, searchAvlKind, searchHtDivision])

  // 검색 핸들러
  const handleSearch = React.useCallback(() => {
    loadData({})
  }, [loadData])

  // 검색 초기화 핸들러
  const handleResetSearch = React.useCallback(() => {
    setSearchConstructionSector("all")
    setSearchShipType("all")
    setSearchAvlKind("all")
    setSearchHtDivision("all")
    loadData({})
  }, [loadData])

  // 초기 데이터 로드
  React.useEffect(() => {
    loadData({})
  }, [loadData])

  const table = useReactTable({
    data,
    columns: standardAvlColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    manualPagination: true,
    pageCount,
    initialState: {
      pagination: {
        pageSize: 10,
      },
    },
    onPaginationChange: (updater) => {
      const newState = typeof updater === 'function' ? updater(table.getState().pagination) : updater
      loadData({
        page: newState.pageIndex + 1,
        perPage: newState.pageSize,
      })
    },
  })

  // 선택 상태 변경 시 콜백 호출
  React.useEffect(() => {
    onSelectionChange?.(table.getFilteredSelectedRowModel().rows.length)
  }, [table.getFilteredSelectedRowModel().rows.length, onSelectionChange])

  // 선택 해제 요청이 오면 모든 선택 해제
  React.useEffect(() => {
    if (resetCounter && resetCounter > 0) {
      table.toggleAllPageRowsSelected(false)
    }
  }, [resetCounter, table])

  return (
    <div className="h-full flex flex-col">
      <div className="mb-2">
        <div className="flex items-center justify-between mb-2">
          <h4 className="font-medium">선종별 표준 AVL</h4>
          <div className="flex gap-1">
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              신규업체 추가
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              파일 업로드
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              일괄입력
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              항목삭제
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              저장
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              최종 확정
            </Button>
          </div>
        </div>
      </div>

      {/* 검색 UI */}
      <div className="mb-4 p-4 border rounded-lg bg-muted/50">
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
          {/* 공사부문 */}
          <div className="space-y-2">
            <label className="text-sm font-medium">공사부문</label>
            <Select value={searchConstructionSector} onValueChange={setSearchConstructionSector}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {constructionSectorOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 선종 */}
          <div className="space-y-2">
            <label className="text-sm font-medium">선종</label>
            <Select value={searchShipType} onValueChange={setSearchShipType}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {shipTypeOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* AVL종류 */}
          <div className="space-y-2">
            <label className="text-sm font-medium">AVL종류</label>
            <Select value={searchAvlKind} onValueChange={setSearchAvlKind}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {avlKindOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* H/T */}
          <div className="space-y-2">
            <label className="text-sm font-medium">H/T 구분</label>
            <Select value={searchHtDivision} onValueChange={setSearchHtDivision}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {htDivisionOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 검색 버튼들 */}
          <div className="space-y-2">
            <label className="text-sm font-medium opacity-0">버튼</label>
            <div className="flex gap-1">
              <Button
                onClick={handleSearch}
                disabled={loading}
                size="sm"
                className="px-3"
              >
                <Search className="w-4 h-4 mr-1" />
                조회
              </Button>
              <Button
                onClick={handleResetSearch}
                variant="outline"
                size="sm"
                className="px-3"
              >
                초기화
              </Button>
            </div>
          </div>
        </div>
      </div>

      <div className="flex-1">
        <DataTable table={table} />
      </div>
    </div>
  )
}