erp-platform/ui/src/views/list/Card.tsx

import { useCallback, useEffect, useState, useRef, KeyboardEvent, useMemo } from 'react'
import { GridDto } from '@/proxy/form/models'
import { Button, Pagination, Select, Checkbox } from '@/components/ui'
import classNames from 'classnames'
import { FaCog, FaSearch, FaSortAmountDown, FaSortAmountUp } from 'react-icons/fa'
import { ROUTES_ENUM } from '@/routes/route.constant'
import CustomStore from 'devextreme/data/custom_store'
import { usePermission } from '@/utils/hooks/usePermission'
import { useLookupDataSource } from '../form/useLookupDataSource'
import { Container, Loading } from '@/components/shared'
import WidgetGroup from '@/components/common/WidgetGroup'
import { GridExtraFilterState } from './Utils'
import { useStoreActions, useStoreState } from '@/store/store'
import { usePWA } from '@/utils/hooks/usePWA'
import CardItem from './CardItem'
import { layoutTypes } from '../admin/listForm/edit/types'
import { useListFormCustomDataSource } from './useListFormCustomDataSource'

interface CardProps {
  listFormCode: string
  searchParams?: URLSearchParams
  isSubForm?: boolean
  level?: number
  refreshData?: () => Promise<void>
  gridDto?: GridDto
}

type Option = {
  value: number
  label: string
}

const Card = (props: CardProps) => {
  const { listFormCode, searchParams, gridDto } = props
  const { createSelectDataSource } = useListFormCustomDataSource({} as any)
  const [data, setData] = useState<any[]>([])
  const [totalCount, setTotalCount] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [pageSizeOptions, setPageSizeOptions] = useState<Option[]>([])
  const [gridDataSource, setGridDataSource] = useState<CustomStore<any, any>>()
  const { getLookupDataSource } = useLookupDataSource({ listFormCode })
  const [layoutCount, setLayoutCount] = useState(4)
  const [searchText, setSearchText] = useState('')
  const [prevValue, setPrevValue] = useState('')
  const [loading, setLoading] = useState(false)
  const { checkPermission } = usePermission()
  const isPwaMode = usePWA()
  const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
  
  // Selection features - gridDto değiştiğinde güncellenmeli
  const [selectedKeys, setSelectedKeys] = useState<Set<any>>(new Set())
  const selectionMode: 'none' | 'single' | 'multiple' = useMemo(() => {
    if (!gridDto?.gridOptions?.selectionDto?.mode) return 'none'
    const mode = gridDto.gridOptions.selectionDto.mode.toLowerCase()
    if (mode === 'single') return 'single'
    if (mode === 'multiple') return 'multiple'
    return 'none'
  }, [gridDto])
  
  // Sorting features
  const [sortColumn, setSortColumn] = useState<string | null>(null)
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
  
  // Focus and keyboard navigation
  const [focusedCardIndex, setFocusedCardIndex] = useState<number>(-1)
  const cardRefs = useRef<(HTMLDivElement | null)[]>([])
  const containerRef = useRef<HTMLDivElement>(null)
  
  // Hover state
  const [hoveredCardKey, setHoveredCardKey] = useState<any>(null)

  const { states } = useStoreState((state) => state.admin.lists)
  const { setStates } = useStoreActions((a) => a.admin.lists)

  // props.searchParams varsa onunla başlat
  const [urlSearchParams, setUrlSearchParams] = useState<URLSearchParams>(() => {
    const params = searchParams ? new URLSearchParams(searchParams) : new URLSearchParams()
    
    // Initialize sort state from URL params
    const sortParam = params.get('sort')
    if (sortParam) {
      try {
        const sortArray = JSON.parse(sortParam)
        if (sortArray && sortArray.length > 0) {
          setSortColumn(sortArray[0].selector)
          setSortOrder(sortArray[0].desc ? 'desc' : 'asc')
        }
      } catch (e) {
        console.error('Sort param parse error:', e)
      }
    }
    
    return params
  })

  const onPageSizeSelect = ({ value }: Option) => {
    setPageSize(value)
    setCurrentPage(1)
  }

  const onPageChange = (page: number) => {
    setCurrentPage(page)
  }

  const toggleSort = (columnName: string) => {
    const newParams = new URLSearchParams(urlSearchParams.toString())
    
    if (sortColumn === columnName) {
      const newOrder = sortOrder === 'asc' ? 'desc' : 'asc'
      setSortOrder(newOrder)
      newParams.set('sort', JSON.stringify([{ selector: columnName, desc: newOrder === 'desc' }]))
    } else {
      setSortColumn(columnName)
      setSortOrder('asc')
      newParams.set('sort', JSON.stringify([{ selector: columnName, desc: false }]))
    }
    
    setUrlSearchParams(newParams)
    setCurrentPage(1) // Reset to first page when sorting
  }

  const handleSelectAll = async (checked: boolean) => {
    if (checked) {
      const keyField = gridDto?.gridOptions.keyFieldName
      const selectAllMode = gridDto?.gridOptions?.selectionDto?.selectAllMode?.toLowerCase()
      
      if (!keyField) return

      if (selectAllMode === 'allpages') {
        // Tüm sayfalardan tüm kayıtları al
        if (!gridDataSource) return
        
        setLoading(true)
        try {
          const loadOptions = {
            skip: 0,
            take: totalCount, // Tüm kayıtları al
            requireTotalCount: false,
          }
          
          const res: any = await gridDataSource.load(loadOptions)
          const allKeys = new Set(res.data.map((row: any) => row[keyField]))
          setSelectedKeys(allKeys)
        } catch (err) {
          console.error('Select all pages error:', err)
        } finally {
          setLoading(false)
        }
      } else {
        // Sadece mevcut sayfadaki kayıtları seç (page veya default)
        const allKeys = new Set(data.map(row => row[keyField]))
        setSelectedKeys(allKeys)
      }
    } else {
      setSelectedKeys(new Set())
    }
  }

  const handleCardSelection = (key: any, checked: boolean) => {
    const newSelection = new Set(selectedKeys)
    if (checked) {
      if (selectionMode === 'single') {
        newSelection.clear()
      }
      newSelection.add(key)
    } else {
      newSelection.delete(key)
    }
    setSelectedKeys(newSelection)
  }

  const handleCardClick = (key: any, index: number, event: React.MouseEvent) => {
    setFocusedCardIndex(index)
    if (selectionMode !== 'none' && event.ctrlKey) {
      handleCardSelection(key, !selectedKeys.has(key))
    }
  }

  const handleCardDoubleClick = (key: any, row: any) => {
    // Navigate to edit page on double click
    const navigate = window.location
    window.open(
      ROUTES_ENUM.protected.admin.formEdit
        .replace(':listFormCode', listFormCode)
        .replace(':id', key),
      isPwaMode ? '_self' : '_blank'
    )
  }

  const handleExport = async (format: 'xlsx' | 'csv' | 'pdf', selectedOnly: boolean = false) => {
    try {
      const exportData = selectedOnly 
        ? data.filter(row => {
            const keyField = gridDto?.gridOptions.keyFieldName
            return keyField && selectedKeys.has(row[keyField])
          })
        : data

      if (exportData.length === 0) {
        return
      }

      if (format === 'xlsx' || format === 'csv') {
        const [{ Workbook }, { saveAs }] = await Promise.all([
          import('exceljs'),
          import('file-saver'),
        ])

        const workbook = new Workbook()
        const worksheet = workbook.addWorksheet(`${listFormCode}_sheet`)

        // Header row - visible columns only
        const visibleColumns = gridDto?.columnFormats?.filter(
          col => col.visible && col.dataType !== 'buttons'
        ) || []
        
        const headerRow = visibleColumns.map(col => col.fieldName)
        worksheet.addRow(headerRow)
        worksheet.getRow(1).font = { bold: true }

        // Data rows
        exportData.forEach(row => {
          const dataRow = visibleColumns.map(col => row[col.fieldName!])
          worksheet.addRow(dataRow)
        })

        // Auto-fit columns
        worksheet.columns.forEach((column: any) => {
          column.width = 15
        })

        if (format === 'xlsx') {
          const buffer = await workbook.xlsx.writeBuffer()
          saveAs(
            new Blob([buffer], { type: 'application/octet-stream' }),
            `${listFormCode}_export${selectedOnly ? '_selected' : ''}.xlsx`,
          )
        } else {
          const buffer = await workbook.csv.writeBuffer()
          saveAs(
            new Blob([buffer], { type: 'application/octet-stream' }),
            `${listFormCode}_export${selectedOnly ? '_selected' : ''}.csv`,
          )
        }
      } else if (format === 'pdf') {
        const [jspdfMod] = await Promise.all([
          import('jspdf'),
        ])

        const JsPDFCtor = (jspdfMod as any).default ?? (jspdfMod as any).jsPDF
        const doc = new JsPDFCtor({ orientation: 'landscape' })

        // Header
        const visibleColumns = gridDto?.columnFormats?.filter(
          col => col.visible && col.dataType !== 'buttons'
        ) || []

        let yPos = 10
        doc.setFontSize(16)
        doc.text(gridDto?.gridOptions.title || listFormCode, 10, yPos)
        yPos += 10

        // Table
        doc.setFontSize(10)
        const headers = visibleColumns.map(col => col.fieldName)
        const rows = exportData.map(row => 
          visibleColumns.map(col => String(row[col.fieldName!] || ''))
        )

        // Simple table rendering
        doc.text(headers.join(' | '), 10, yPos)
        yPos += 7
        
        rows.forEach(row => {
          if (yPos > 190) {
            doc.addPage()
            yPos = 10
          }
          doc.text(row.join(' | '), 10, yPos)
          yPos += 7
        })

        doc.save(`${listFormCode}_export${selectedOnly ? '_selected' : ''}.pdf`)
      }
    } catch (err) {
      console.error('Export error:', err)
    }
  }

  const handleKeyDown = (e: KeyboardEvent) => {
    if (data.length === 0) return

    const keyField = gridDto?.gridOptions.keyFieldName
    if (!keyField) return

    switch (e.key) {
      case 'ArrowRight':
        e.preventDefault()
        if (focusedCardIndex < data.length - 1) {
          const newIndex = focusedCardIndex + 1
          setFocusedCardIndex(newIndex)
          cardRefs.current[newIndex]?.focus()
        }
        break
      case 'ArrowLeft':
        e.preventDefault()
        if (focusedCardIndex > 0) {
          const newIndex = focusedCardIndex - 1
          setFocusedCardIndex(newIndex)
          cardRefs.current[newIndex]?.focus()
        }
        break
      case 'ArrowDown':
        e.preventDefault()
        if (focusedCardIndex + layoutCount < data.length) {
          const newIndex = focusedCardIndex + layoutCount
          setFocusedCardIndex(newIndex)
          cardRefs.current[newIndex]?.focus()
        }
        break
      case 'ArrowUp':
        e.preventDefault()
        if (focusedCardIndex - layoutCount >= 0) {
          const newIndex = focusedCardIndex - layoutCount
          setFocusedCardIndex(newIndex)
          cardRefs.current[newIndex]?.focus()
        }
        break
      case 'Enter':
        e.preventDefault()
        if (focusedCardIndex >= 0 && focusedCardIndex < data.length) {
          const row = data[focusedCardIndex]
          handleCardDoubleClick(row[keyField], row)
        }
        break
      case ' ': // Space key for selection
        e.preventDefault()
        if (selectionMode !== 'none' && focusedCardIndex >= 0) {
          const key = data[focusedCardIndex][keyField]
          handleCardSelection(key, !selectedKeys.has(key))
        }
        break
    }
  }

  const onFilter = useCallback(
    (value?: string) => {
      const text = value !== undefined ? value.trim() : searchText.trim()

      if (!gridDto?.columnFormats) return

      const newParams = new URLSearchParams(urlSearchParams.toString())

      if (!text) {
        newParams.delete('filter')
        setUrlSearchParams(newParams)
        return
      }

      const merged = gridDto.columnFormats
        .filter(
          (col) =>
            col.dataType === 'string' &&
            col.visible &&
            col.width &&
            col.allowSearch &&
            col.width > 0,
        )
        .map((col) => [col.fieldName, 'contains', text])

      let filter: any = null
      if (merged.length === 1) {
        filter = merged[0]
      } else if (merged.length > 1) {
        filter = merged.reduce((acc, f, idx) => {
          if (idx === 0) return f
          return [acc, 'or', f]
        }, null as any)
      }

      if (filter) {
        newParams.set('filter', JSON.stringify(filter))
      } else {
        newParams.delete('filter')
      }

      setUrlSearchParams(newParams)
    },
    [gridDto, urlSearchParams, searchText],
  )

  useEffect(() => {
    if (gridDto) {
      const dataSource = createSelectDataSource(
        gridDto.gridOptions,
        listFormCode,
        urlSearchParams,
        layoutTypes.card
      )
      setGridDataSource(dataSource)

      //listFormStates
      const listFormStates = states.find((a) => a.listFormCode === listFormCode)
      if (listFormStates) {
        setLayoutCount(listFormStates.cardLayoutColumn || 4)
      } else {
        setLayoutCount(gridDto.gridOptions.layoutDto.cardLayoutColumn || 4)
      }
    }
  }, [gridDto, listFormCode, urlSearchParams, createSelectDataSource, states])

  const loadData = useCallback(() => {
    if (!gridDataSource) return
    setLoading(true)

    const loadOptions = {
      skip: (currentPage - 1) * pageSize,
      take: pageSize,
      requireTotalCount: true,
    }

    gridDataSource
      .load(loadOptions)
      .then((res: any) => {
        setData(res.data)
        setTotalCount(res.totalCount || 0)
        setLoading(false)
      })
      .catch(() => {
        setLoading(false)
      })
  }, [gridDataSource, currentPage, pageSize])

  useEffect(() => {
    if (gridDataSource) {
      loadData()
      
      // selectionMode = page ise sayfa değiştiğinde seçimi temizle
      const selectAllMode = gridDto?.gridOptions?.selectionDto?.selectAllMode?.toLowerCase()
      if (selectAllMode === 'page') {
        setSelectedKeys(new Set())
      }
    }
  }, [gridDataSource, loadData, currentPage, gridDto])

  useEffect(() => {
    if (!gridDto) return

    const pagerOptions = gridDto.gridOptions.pagerOptionDto
    const allowedSizes = pagerOptions?.allowedPageSizes
      ?.split(',')
      .map((s) => Number(s.trim()))
      .filter((n) => !isNaN(n) && n > 0) || [10, 20, 50, 100]

    setPageSizeOptions(allowedSizes.map((size) => ({ value: size, label: `${size} page` })))
  }, [gridDto, listFormCode, searchParams])

  useEffect(() => {
    if (data.length > 0) {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }, [data])

  if (!gridDto) return null

  return (
    <>
      <WidgetGroup widgetGroups={gridDto.widgets || []} />

      <Container>
        <div
          ref={containerRef}
          onKeyDown={handleKeyDown}
          tabIndex={0}
          className="outline-none"
        >
          <div className="flex justify-between items-center mb-2">
            <div className="flex items-center gap-4">
              {selectionMode === 'multiple' && gridDto?.gridOptions?.selectionDto?.allowSelectAll && (
                <div className="flex items-center">
                  <Checkbox
                    checked={
                      selectedKeys.size > 0 && 
                      (gridDto?.gridOptions?.selectionDto?.selectAllMode?.toLowerCase() === 'allpages' 
                        ? selectedKeys.size === totalCount 
                        : selectedKeys.size === data.length)
                    }
                    onChange={(checked: boolean) => handleSelectAll(checked)}
                    className="cursor-pointer"
                  />
                  <span className="text-sm text-gray-600 dark:text-gray-300">
                    {selectedKeys.size > 0 ? `${selectedKeys.size} seçili` : 'Tümünü Seç'}
                  </span>
                </div>
              )}
              
              {selectionMode !== 'none' && selectedKeys.size > 0 && !gridDto?.gridOptions?.selectionDto?.allowSelectAll && (
                <div className="flex items-center gap-2">
                  <span className="text-sm text-gray-600 dark:text-gray-300">
                    {selectedKeys.size} seçili
                  </span>
                </div>
              )}
            </div>
            
            <div className="flex justify-end items-center gap-2">
              {/* Export Buttons */}
              {gridDto?.gridOptions?.exportDto?.enabled && (
                <div className="flex items-center gap-1">
                  <Button
                    size="xs"
                    variant="default"
                    onClick={() => handleExport('xlsx', selectionMode !== 'none' && selectedKeys.size > 0)}
                    title={selectionMode !== 'none' && selectedKeys.size > 0 ? `Seçilenleri Excel'e Aktar (${selectedKeys.size})` : "Tümünü Excel'e Aktar"}
                  >
                    📊 {selectionMode !== 'none' && selectedKeys.size > 0 ? `Seçilenleri Excel'e Aktar (${selectedKeys.size})` : `Tümünü Excel'e Aktar`}
                  </Button>
                </div>
              )}
              
              {/* Sort Dropdown */}
              {gridDto && gridDto.columnFormats && gridDto.columnFormats.length > 0 && (
                <div className="flex items-center gap-1">
                  <select
                    className="text-xs border rounded px-2 py-1 dark:bg-neutral-700 dark:text-white dark:border-neutral-600"
                    onChange={(e) => {
                      if (e.target.value) {
                        toggleSort(e.target.value)
                      } else {
                        // "Sıralama Yok" seçildiğinde temizle
                        const newParams = new URLSearchParams(urlSearchParams.toString())
                        newParams.delete('sort')
                        setUrlSearchParams(newParams)
                        setSortColumn(null)
                        setSortOrder('asc')
                      }
                    }}
                    value={sortColumn || ''}
                  >
                    <option value="">Sıralama Yok</option>
                    {gridDto.columnFormats
                      .filter((col) => col.visible && col.dataType !== 'buttons')
                      .map((col) => (
                        <option key={col.fieldName} value={col.fieldName}>
                          {col.fieldName}
                        </option>
                      ))}
                  </select>
                  {sortColumn && (
                    <button
                      onClick={() => toggleSort(sortColumn)}
                      className="text-gray-600 dark:text-gray-300 hover:text-blue-500 p-1"
                      title="Sıralama yönünü değiştir"
                    >
                      {sortOrder === 'asc' ? <FaSortAmountUp className="w-3 h-3" /> : <FaSortAmountDown className="w-3 h-3" />}
                    </button>
                  )}
                </div>
              )}
              
              <div className="relative py-1 flex gap-1 border-b-1">
              <FaSearch className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 text-sm" />
              <input
                type="text"
                placeholder="Search..."
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    onFilter(e.currentTarget.value)
                    setPrevValue(e.currentTarget.value.trim()) // Enter ile tetiklenirse güncelle
                  }
                }}
                onBlur={(e) => {
                  const newValue = e.currentTarget.value.trim()

                  // 1. Değer değişmemişse => hiçbir şey yapma
                  if (newValue === prevValue) return

                  // 2. Yeni değer boş, ama eskiden değer vardı => filtre temizle
                  // 3. Yeni değer dolu ve eskisinden farklı => filtre uygula
                  onFilter(newValue)
                  setPrevValue(newValue)
                }}
                className="p-1 pl-6 pr-2 border border-1 outline-none text-xs text-gray-700 dark:text-gray-200 placeholder-gray-400 rounded"
              />

              <Button
                size="xs"
                variant={layoutCount === 1 ? 'solid' : 'default'}
                className="text-sm"
                onClick={() => {
                  setLayoutCount(1)
                  setStates({ listFormCode, layout: 'card', cardLayoutColumn: 1 })
                }}
                title="1 Sütunda Göster"
              >
                1
              </Button>
              <Button
                size="xs"
                variant={layoutCount === 2 ? 'solid' : 'default'}
                className="text-sm"
                onClick={() => {
                  setLayoutCount(2)
                  setStates({ listFormCode, layout: 'card', cardLayoutColumn: 2 })
                }}
                title="2 Sütunda Göster"
              >
                2
              </Button>
              <Button
                size="xs"
                variant={layoutCount === 3 ? 'solid' : 'default'}
                className="text-sm"
                onClick={() => {
                  setLayoutCount(3)
                  setStates({ listFormCode, layout: 'card', cardLayoutColumn: 3 })
                }}
                title="3 Sütunda Göster"
              >
                3
              </Button>
              <Button
                size="xs"
                variant={layoutCount === 4 ? 'solid' : 'default'}
                className="text-sm"
                onClick={() => {
                  setLayoutCount(4)
                  setStates({ listFormCode, layout: 'card', cardLayoutColumn: 4 })
                }}
                title="4 Sütunda Göster"
              >
                4
              </Button>
              <Button
                size="xs"
                variant={layoutCount === 5 ? 'solid' : 'default'}
                className="text-sm"
                onClick={() => {
                  setLayoutCount(5)
                  setStates({ listFormCode, layout: 'card', cardLayoutColumn: 5 })
                }}
                title="5 Sütunda Göster"
              >
                5
              </Button>

              {checkPermission(gridDto?.gridOptions.permissionDto.u) && (
                <Button
                  size="xs"
                  variant={'default'}
                  className="text-sm"
                  onClick={() => {
                    window.open(
                      ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(
                        ':listFormCode',
                        listFormCode,
                      ),
                      isPwaMode ? '_self' : '_blank',
                    )
                  }}
                  title="Form Manager"
                >
                  <FaCog className="w-3 h-3" />
                </Button>
              )}
              </div>
            </div>
          </div>

          {loading ? (
            <Loading loading={true} />
          ) : data.length === 0 ? (
            <div className="text-center py-12">
              <FaSearch className="mx-auto h-10 w-10 text-gray-400" />
              <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-gray-200">
                Uygun kayıt bulunamadı
              </h3>
              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Farklı filtreler deneyin veya yeni bir kayıt ekleyin.
              </p>
            </div>
          ) : (
            <div 
              className="bg-transparent grid gap-4"
              style={{
                gridTemplateColumns: `repeat(${layoutCount}, minmax(0, 1fr))`
              }}
            >
              {gridDataSource &&
                data.map((row, idx) => {
                  const keyField = gridDto.gridOptions.keyFieldName
                  const rowId = row[keyField!]
                  const isSelected = selectedKeys.has(rowId)
                  const isFocused = focusedCardIndex === idx
                  const isHovered = hoveredCardKey === rowId

                  return (
                    <CardItem
                      ref={(el) => (cardRefs.current[idx] = el)}
                      isSubForm={true}
                      key={rowId || idx}
                      row={row}
                      gridDto={gridDto}
                      listFormCode={listFormCode}
                      dataSource={gridDataSource}
                      refreshData={loadData}
                      getCachedLookupDataSource={getLookupDataSource}
                      isSelected={isSelected}
                      isFocused={isFocused}
                      isHovered={isHovered}
                      onSelectionChange={(checked) => handleCardSelection(rowId, checked)}
                      onClick={(e) => handleCardClick(rowId, idx, e)}
                      onDoubleClick={() => handleCardDoubleClick(rowId, row)}
                      onMouseEnter={() => setHoveredCardKey(rowId)}
                      onMouseLeave={() => setHoveredCardKey(null)}
                      tabIndex={isFocused ? 0 : -1}
                    />
                  )
                })}
            </div>
          )}

          {gridDto.gridOptions.pagerOptionDto?.visible && totalCount > pageSize && (
            <div className={classNames('flex items-center justify-between border-t-1 gap-4 mt-2')}>
              <div className="flex items-center gap-2">
                <span className="text-xs text-gray-600 dark:text-gray-300">
                  Toplam {totalCount} kayıt
                </span>
                <Select
                  size="xs"
                  menuPlacement="top"
                  value={pageSizeOptions.find((o) => o.value === pageSize)}
                  options={pageSizeOptions}
                  onChange={(selected) => onPageSizeSelect(selected as Option)}
                />
              </div>
              <Pagination
                currentPage={currentPage}
                total={totalCount}
                pageSize={pageSize}
                onChange={onPageChange}
              />
            </div>
          )}
        </div>
      </Container>
    </>
  )
}

export default Card