"use client"

import * as React from "react"
import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel } from "@tanstack/react-table"
import { DataTableDetail } from "@/components/data-table/data-table-detail"
import { DataTableAdvancedToolbarDetail } from "@/components/data-table/data-table-advanced-toolbar-detail"
import type { DataTableAdvancedFilterField, DataTableRowAction } from "@/types/table"
import {
  Sheet,
  SheetContent,
} from "@/components/ui/sheet"
import { getComboBoxOptions } from "@/lib/docu-list-rule/combo-box-settings/service"
import { getColumns } from "@/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-columns"
import { ComboBoxOptionsEditSheet } from "@/lib/docu-list-rule/combo-box-settings/table/combo-box-options-edit-sheet"
import { DeleteComboBoxOptionsDialog } from "@/lib/docu-list-rule/combo-box-settings/table/delete-combo-box-options-dialog"
import { ComboBoxOptionsTableToolbarActions } from "@/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-toolbar"
import { codeGroups } from "@/db/schema"
type ComboBoxOption = {
  id: number
  codeGroupId: number
  code: string
  description: string
  remark: string | null
  isActive: boolean
  createdAt: Date
  updatedAt: Date
}

interface ComboBoxOptionsDetailSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  codeGroup: typeof codeGroups.$inferSelect | null
  onSuccess?: () => void
  promises?: Promise<[{ data: ComboBoxOption[]; pageCount: number }]>
}

export function ComboBoxOptionsDetailSheet({
  open,
  onOpenChange,
  codeGroup,
  onSuccess,
  promises,
}: ComboBoxOptionsDetailSheetProps) {
  const [rowAction, setRowAction] = React.useState<DataTableRowAction<any> | null>(null)
  const [rawData, setRawData] = React.useState<{ data: ComboBoxOption[]; pageCount: number }>({ data: [], pageCount: 0 })

  React.useEffect(() => {
    if (promises) {
      promises.then(([result]) => {
        setRawData(result)
      })
    } else if (open && codeGroup) {
      // fallback: 클라이언트에서 직접 fetch (CSR)
      (async () => {
        try {
          const result = await getComboBoxOptions(codeGroup.id, {
            page: 1,
            perPage: 10,
            search: "",
            sort: [{ id: "createdAt", desc: true }],
            filters: [],
            joinOperator: "and",
          })
          if (result.success && result.data) {
            // isActive 필드가 없는 경우 기본값 true로 설정
            const optionsWithIsActive = result.data.map(option => ({
              ...option,
              isActive: (option as any).isActive ?? true
            }))
            setRawData({
              data: optionsWithIsActive,
              pageCount: result.pageCount || 1
            })
          }
        } catch (error) {
          console.error("Error refreshing data:", error)
        }
      })()
    }
  }, [promises, open, codeGroup])

  const refreshData = React.useCallback(async () => {
    if (!codeGroup) return

    try {
      const result = await getComboBoxOptions(codeGroup.id, {
        page: 1,
        perPage: 10,
      })
      if (result.success && result.data) {
        const optionsWithIsActive = result.data.map(option => ({
          ...option,
          isActive: (option as any).isActive ?? true
        }))
        setRawData({
          data: optionsWithIsActive,
          pageCount: result.pageCount || 1
        })
      }
    } catch (error) {
      console.error("Error refreshing data:", error)
    }
  }, [codeGroup])

  const columns = React.useMemo(() => getColumns({ setRowAction: setRowAction as any }), [setRowAction])

  // 고급 필터 필드 설정
  const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [
    { id: "code", label: "code", type: "text" },
    { id: "remark", label: "remark", type: "text" },
    { id: "updatedAt", label: "updated_at", type: "date" },
  ]

  const table = useReactTable({
    data: rawData.data as any,
    columns: columns as any,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
      sorting: [{ id: "code", desc: false }],
      pagination: {
        pageSize: 10,
      },
    },
    getRowId: (originalRow) => String((originalRow as any).id),
  })

  if (!codeGroup) return null

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-4xl">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-medium">{codeGroup.description} 옵션 관리</h3>
            <p className="text-sm text-muted-foreground">
              {codeGroup.description}의 Combo Box 옵션들을 관리합니다.
            </p>
          </div>
        </div>

        <ComboBoxOptionsTableToolbarActions
          table={table as any}
          codeGroupId={codeGroup.id}
          onSuccess={refreshData}
        />

        <DataTableDetail table={table as any}>
          <DataTableAdvancedToolbarDetail
            table={table as any}
            filterFields={advancedFilterFields}
          />
        </DataTableDetail>

        <DeleteComboBoxOptionsDialog
          open={rowAction?.type === "delete"}
          onOpenChange={() => setRowAction(null)}
          options={rowAction?.row.original ? [rowAction?.row.original] : []}
          showTrigger={false}
          onSuccess={() => {
            rowAction?.row.toggleSelected(false)
            refreshData()
          }}
        />

        <ComboBoxOptionsEditSheet
          open={rowAction?.type === "update"}
          onOpenChange={() => setRowAction(null)}
          data={rowAction?.row.original ?? null}
          onSuccess={refreshData}
        />
      </SheetContent>
    </Sheet>
  )
}