"use client"

import type { ReactNode } from "react"
import { useCallback, useEffect, useState } from "react"
import {
  closestCenter,
  DndContext,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core"
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import {
  GripVerticalIcon,
  MoreHorizontalIcon,
  PlusIcon,
  RefreshCwIcon,
  SearchIcon,
  Trash2Icon,
} from "lucide-react"
import { toast } from "sonner"

import { useConfirm, type ConfirmOptions } from "@/components/confirm-provider"
import {
  DashboardPage,
  DashboardTableShell,
  DashboardTableStateRow,
  DashboardToolbar,
} from "@/components/dashboard-page"
import { ListPagination } from "@/components/list-pagination"
import { OptionCombobox } from "@/components/option-combobox"
import { useDashboardPagedList } from "@/components/dashboard/list"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  isDashboardCrudActionDisabled,
  isDashboardCrudActionVisible,
  type DashboardCrudActionRule,
  type DashboardCrudFormField,
  type DashboardCrudPageResult,
  type DashboardCrudQueryFilter,
  type DashboardCrudQueryValue,
} from "./dashboard-crud-utils"
import { DashboardCrudFormDialog } from "./dashboard-crud-form-dialog"

export type DashboardCrudFilter<TValue extends string | number = string> =
  DashboardCrudQueryFilter & {
    label: string
    placeholder?: string
    defaultValue: TValue
    type?: "text" | "select"
    className?: string
    options?: ReadonlyArray<{ value: string; label: string }>
  }

export type DashboardCrudColumn<TItem> = {
  key: string
  label: ReactNode
  className?: string
  render: (item: TItem, context: DashboardCrudRowActionContext<TItem>) => ReactNode
}

export type DashboardCrudDialogProps<TItem, TPayload> = {
  open: boolean
  saving: boolean
  item: TItem | null
  itemId: number | null
  onOpenChange: (open: boolean) => void
  onSubmit: (payload: TPayload) => Promise<void>
}

export type DashboardCrudRowActionContext<TItem> = {
  item: TItem
  itemId: number
  actionLoading: boolean
  actionLoadingId: number | null
  reload: () => Promise<void>
  setActionLoadingId: (id: number | null) => void
}

export type DashboardCrudRowAction<TItem> = DashboardCrudActionRule<TItem> & {
  key: string
  label: ReactNode | ((item: TItem) => ReactNode)
  icon?: ReactNode | ((item: TItem) => ReactNode)
  variant?: "default" | "destructive"
  confirm?: ConfirmOptions | ((item: TItem) => ConfirmOptions)
  run: (context: DashboardCrudRowActionContext<TItem>) => Promise<void> | void
}

export type DashboardCrudActionState = {
  onRefresh: () => void
  onCreate: () => void
  loading: boolean
}

export type DashboardCrudPageProps<TItem, TPayload> = {
  filters: DashboardCrudFilter[]
  columns: DashboardCrudColumn<TItem>[]
  fetchList: (
    query: Record<string, DashboardCrudQueryValue>
  ) => Promise<DashboardCrudPageResult<TItem>>
  renderEditDialog?: (props: DashboardCrudDialogProps<TItem, TPayload>) => ReactNode
  form?: {
    fields: DashboardCrudFormField<TItem>[]
    fetchDetail?: (id: number) => Promise<TItem>
    transformSubmitValues?: (
      values: Record<string, string | number | boolean | string[] | number[]>,
      context: { mode: "create" | "edit"; item: TItem | null }
    ) => TPayload
    labels: {
      createTitle: string
      editTitle: string
      create: string
      save: string
      saving: string
      cancel: string
      loadingDetail: string
      required: string
      invalidNumber: string
      minValue: (min: number) => string
      maxValue: (max: number) => string
    }
  }
  getItemId: (item: TItem) => number
  createItem: (payload: TPayload) => Promise<unknown>
  updateItem: (item: TItem, payload: TPayload) => Promise<unknown>
  canEdit?: (item: TItem) => boolean
  onEditItem?: (item: TItem) => void
  deleteItem?: (item: TItem) => Promise<unknown>
  canDelete?: (item: TItem) => boolean
  deleteConfirm?: false | ConfirmOptions | ((item: TItem) => ConfirmOptions)
  rowActions?: DashboardCrudRowAction<TItem>[]
  renderRowActions?: (context: DashboardCrudRowActionContext<TItem>) => ReactNode
  sort?: {
    enabled?: boolean
    disabled?: boolean
    onReorder: (items: TItem[]) => Promise<unknown>
    successMessage?: string
    errorMessage: string
    handleLabel: string
  }
  pageSize?: number
  reloadKey?: string | number | null
  layout?: "page" | "fragment"
  showToolbar?: boolean
  showToolbarActions?: boolean
  tableShellClassName?: string
  onActionStateChange?: (state: DashboardCrudActionState) => void
  labels: {
    refresh: string
    create: string
    query: string
    loading: string
    empty: string
    actions: string
    edit: string
    delete: string
    processing: string
    moreActions: (item: TItem) => string
    loadFailed: string
    saveFailed: string
    deleteFailed: string
    created: (item: TPayload) => string
    updated: (item: TItem, payload: TPayload) => string
    deleted?: (item: TItem) => string
  }
}

export function DashboardCrudPage<TItem, TPayload>({
  filters,
  columns,
  fetchList,
  renderEditDialog,
  form,
  getItemId,
  createItem,
  updateItem,
  canEdit,
  onEditItem,
  deleteItem,
  canDelete,
  deleteConfirm,
  rowActions = [],
  renderRowActions,
  sort,
  pageSize = 20,
  reloadKey,
  layout = "page",
  showToolbar = true,
  showToolbarActions = true,
  tableShellClassName,
  onActionStateChange,
  labels,
}: DashboardCrudPageProps<TItem, TPayload>) {
  const confirm = useConfirm()
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 6,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  )
  const list = useDashboardPagedList<TItem>({
    filters,
    fetchList,
    pageSize,
    reloadKey,
    loadFailed: labels.loadFailed,
  })
  const draftFilters = list.draftFilters
  const setDraftFilter = list.setDraftFilter
  const loading = list.loading
  const result = list.result
  const loadData = list.loadData
  const [saving, setSaving] = useState(false)
  const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editingItem, setEditingItem] = useState<TItem | null>(null)

  function handleApplyFilters() {
    list.applyFilters()
  }

  function handleFilterKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
    if (event.key !== "Enter") return
    event.preventDefault()
    handleApplyFilters()
  }

  const openCreateDialog = useCallback(() => {
    setEditingItem(null)
    setDialogOpen(true)
  }, [])

  function openEditDialog(item: TItem) {
    setEditingItem(item)
    setDialogOpen(true)
  }

  useEffect(() => {
    onActionStateChange?.({
      onRefresh: () => void loadData(),
      onCreate: openCreateDialog,
      loading,
    })
  }, [loadData, loading, onActionStateChange, openCreateDialog])

  function handleDialogOpenChange(open: boolean) {
    if (saving) return
    if (!open) setEditingItem(null)
    setDialogOpen(open)
  }

  async function handleSubmit(payload: TPayload) {
    if (saving) return
    setSaving(true)
    try {
      if (editingItem) {
        await updateItem(editingItem, payload)
        toast.success(labels.updated(editingItem, payload))
      } else {
        await createItem(payload)
        toast.success(labels.created(payload))
      }
      setDialogOpen(false)
      setEditingItem(null)
      await loadData()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : labels.saveFailed)
    } finally {
      setSaving(false)
    }
  }

  async function handleDelete(item: TItem) {
    if (!deleteItem) return
    if (deleteConfirm !== false) {
      const confirmed = await confirm(
        typeof deleteConfirm === "function"
          ? deleteConfirm(item)
          : {
              confirmText: labels.delete,
              variant: "destructive",
              ...deleteConfirm,
            }
      )
      if (!confirmed) return
    }
    const id = getItemId(item)
    setActionLoadingId(id)
    try {
      await deleteItem(item)
      toast.success(labels.deleted?.(item) ?? labels.delete)
      await loadData()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : labels.deleteFailed)
    } finally {
      setActionLoadingId(null)
    }
  }

  async function runRowAction(
    action: DashboardCrudRowAction<TItem>,
    item: TItem,
    actionLoading: boolean
  ) {
    if (actionLoading || isDashboardCrudActionDisabled(action, item)) return

    if (action.confirm) {
      const confirmed = await confirm(
        typeof action.confirm === "function" ? action.confirm(item) : action.confirm
      )
      if (!confirmed) return
    }

    const id = getItemId(item)
    setActionLoadingId(id)
    try {
      await action.run({
        item,
        itemId: id,
        actionLoading: true,
        actionLoadingId: id,
        reload: loadData,
        setActionLoadingId,
      })
    } finally {
      setActionLoadingId(null)
    }
  }

  async function handleSortEnd(event: DragEndEvent) {
    if (!sort?.enabled || sort.disabled) return

    const { active, over } = event
    if (!over || active.id === over.id) return

    const oldIndex = result.results.findIndex(
      (item) => String(getItemId(item)) === String(active.id)
    )
    const newIndex = result.results.findIndex(
      (item) => String(getItemId(item)) === String(over.id)
    )
    if (oldIndex < 0 || newIndex < 0) return

    const previousResults = result.results
    const nextResults = arrayMove(result.results, oldIndex, newIndex)
    list.setResult((current) => ({ ...current, results: nextResults }))

    try {
      await sort.onReorder(nextResults)
      if (sort.successMessage) {
        toast.success(sort.successMessage)
      }
    } catch (error) {
      list.setResult((current) => ({ ...current, results: previousResults }))
      toast.error(error instanceof Error ? error.message : sort.errorMessage)
    }
  }

  const sortable = Boolean(sort?.enabled)
  const colSpan = columns.length + 1 + (sortable ? 1 : 0)

  function renderTableRow(
    item: TItem,
    options: { sortable?: boolean; sortDisabled?: boolean } = {}
  ) {
    const id = getItemId(item)
    const actionLoading = actionLoadingId === id
    const rowCells = (
      <>
        {columns.map((column) => (
          <TableCell key={column.key} className={column.className}>
            {column.render(item, {
              item,
              itemId: id,
              actionLoading,
              actionLoadingId,
              reload: loadData,
              setActionLoadingId,
            })}
          </TableCell>
        ))}
        <TableCell className="text-right">
          <ButtonGroup className="ml-auto">
            <Button
              variant="outline"
              size="sm"
              disabled={canEdit ? !canEdit(item) : false}
              onClick={() => {
                if (onEditItem) {
                  onEditItem(item)
                  return
                }
                openEditDialog(item)
              }}
            >
              {labels.edit}
            </Button>
            {renderRowActions || rowActions.length > 0 || deleteItem ? (
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={<Button variant="outline" size="icon-sm" />}
                  aria-label={labels.moreActions(item)}
                >
                  <MoreHorizontalIcon />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-40 min-w-40">
                  {rowActions
                    .filter((action) => isDashboardCrudActionVisible(action, item))
                    .map((action) => {
                      const icon =
                        typeof action.icon === "function"
                          ? action.icon(item)
                          : action.icon
                      const label =
                        typeof action.label === "function"
                          ? action.label(item)
                          : action.label
                      return (
                        <DropdownMenuItem
                          key={action.key}
                          disabled={
                            actionLoading ||
                            isDashboardCrudActionDisabled(action, item)
                          }
                          className={
                            action.variant === "destructive"
                              ? "text-destructive focus:text-destructive"
                              : undefined
                          }
                          onClick={() => void runRowAction(action, item, actionLoading)}
                        >
                          {icon}
                          {actionLoading ? labels.processing : label}
                        </DropdownMenuItem>
                      )
                    })}
                  {renderRowActions?.({
                    item,
                    itemId: id,
                    actionLoading,
                    actionLoadingId,
                    reload: loadData,
                    setActionLoadingId,
                  })}
                  {deleteItem ? (
                    <DropdownMenuItem
                      onClick={() => void handleDelete(item)}
                      disabled={canDelete ? !canDelete(item) : false}
                      className="text-destructive focus:text-destructive"
                    >
                      <Trash2Icon />
                      {actionLoading ? labels.processing : labels.delete}
                    </DropdownMenuItem>
                  ) : null}
                </DropdownMenuContent>
              </DropdownMenu>
            ) : null}
          </ButtonGroup>
        </TableCell>
      </>
    )

    if (options.sortable) {
      return (
        <DashboardCrudSortableRow
          key={id}
          id={String(id)}
          disabled={loading || options.sortDisabled}
          handleLabel={sort?.handleLabel ?? labels.actions}
        >
          {rowCells}
        </DashboardCrudSortableRow>
      )
    }

    return <TableRow key={id}>{rowCells}</TableRow>
  }

  function renderStateRow() {
    if (!loading && result.results.length > 0) return null
    return (
      <DashboardTableStateRow
        colSpan={colSpan}
        loading={loading}
        loadingText={labels.loading}
        emptyText={labels.empty}
      />
    )
  }

  const tableElement = (
    <Table>
      <TableHeader className="bg-muted/40">
        <TableRow>
          {sortable ? <TableHead className="w-10" /> : null}
          {columns.map((column) => (
            <TableHead key={column.key} className={column.className}>
              {column.label}
            </TableHead>
          ))}
          <TableHead className="w-[92px] text-right">
            {labels.actions}
          </TableHead>
        </TableRow>
      </TableHeader>
      {sortable ? (
        <SortableContext
          items={result.results.map((item) => String(getItemId(item)))}
          strategy={verticalListSortingStrategy}
        >
          <TableBody>
            {result.results.map((item) =>
              renderTableRow(item, {
                sortable: true,
                sortDisabled: sort?.disabled,
              })
            )}
            {renderStateRow()}
          </TableBody>
        </SortableContext>
      ) : (
        <TableBody>
          {result.results.map((item) => renderTableRow(item))}
          {renderStateRow()}
        </TableBody>
      )}
    </Table>
  )

  const table = sortable ? (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={(event) => void handleSortEnd(event)}
    >
      {tableElement}
    </DndContext>
  ) : (
    tableElement
  )

  const content = (
    <>
      {showToolbar ? (
        <DashboardToolbar
          actions={
            showToolbarActions ? (
              <>
                <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
                  <RefreshCwIcon className={loading ? "animate-spin" : undefined} />
                  {labels.refresh}
                </Button>
                <Button onClick={openCreateDialog}>
                  <PlusIcon />
                  {labels.create}
                </Button>
              </>
            ) : null
          }
        >
          {filters.map((filter) => {
            const value = draftFilters[filter.name]
            if (filter.type === "select") {
              return (
                <div key={filter.name} className={filter.className ?? "w-full sm:w-40"}>
                  <OptionCombobox
                    value={String(value ?? "")}
                    onChange={(nextValue) => setDraftFilter(filter.name, nextValue)}
                    placeholder={filter.placeholder ?? filter.label}
                    options={[...(filter.options ?? [])]}
                  />
                </div>
              )
            }

            return (
              <div key={filter.name} className={filter.className ?? "w-full sm:w-64"}>
                <Input
                  value={String(value ?? "")}
                  onChange={(event) =>
                    setDraftFilter(filter.name, event.target.value)
                  }
                  onKeyDown={handleFilterKeyDown}
                  placeholder={filter.placeholder ?? filter.label}
                />
              </div>
            )
          })}
          <Button variant="outline" onClick={handleApplyFilters} disabled={loading}>
            <SearchIcon />
            {labels.query}
          </Button>
        </DashboardToolbar>
      ) : null}

      <DashboardTableShell
        className={tableShellClassName}
        pagination={
          <ListPagination
            page={result.page.page}
            total={result.page.total}
            limit={list.limit}
            loading={loading}
            onPageChange={list.handlePageChange}
            onLimitChange={list.handleLimitChange}
          />
        }
      >
        {table}
      </DashboardTableShell>
    </>
  )

  const dialog = form ? (
    <DashboardCrudFormDialog
      open={dialogOpen}
      saving={saving}
      item={editingItem}
      itemId={editingItem ? getItemId(editingItem) : null}
      fields={form.fields}
      fetchDetail={form.fetchDetail}
      transformSubmitValues={form.transformSubmitValues}
      labels={form.labels}
      onOpenChange={handleDialogOpenChange}
      onSubmit={handleSubmit}
    />
  ) : (
    renderEditDialog?.({
      open: dialogOpen,
      saving,
      item: editingItem,
      itemId: editingItem ? getItemId(editingItem) : null,
      onOpenChange: handleDialogOpenChange,
      onSubmit: handleSubmit,
    })
  )

  if (layout === "fragment") {
    return (
      <>
        {content}
        {dialog}
      </>
    )
  }

  return (
    <>
      <DashboardPage>{content}</DashboardPage>
      {dialog}
    </>
  )
}

function DashboardCrudSortableRow({
  id,
  disabled,
  handleLabel,
  children,
}: {
  id: string
  disabled?: boolean
  handleLabel: string
  children: ReactNode
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id, disabled })

  return (
    <TableRow
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
      }}
      className={isDragging ? "relative z-10 bg-muted/60" : undefined}
    >
      <TableCell className="w-10">
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          disabled={disabled}
          aria-label={handleLabel}
          {...attributes}
          {...listeners}
        >
          <GripVerticalIcon className="text-muted-foreground" />
        </Button>
      </TableCell>
      {children}
    </TableRow>
  )
}