'use client'

// React Imports
import { useEffect, useState, useMemo, useCallback } from 'react'

// Next Imports
import Link from 'next/link'
import { useParams } from 'next/navigation'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Checkbox from '@mui/material/Checkbox'
import IconButton from '@mui/material/IconButton'
import { styled } from '@mui/material/styles'
import TablePagination from '@mui/material/TablePagination'
import type { TextFieldProps } from '@mui/material/TextField'
import MenuItem from '@mui/material/MenuItem'

// Third-party Imports
import classnames from 'classnames'
import { rankItem } from '@tanstack/match-sorter-utils'
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
  getFilteredRowModel,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFacetedMinMaxValues,
  getPaginationRowModel,
  getSortedRowModel
} from '@tanstack/react-table'
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
import type { RankingInfo } from '@tanstack/match-sorter-utils'

// Type Imports
import type { ThemeColor } from '@core/types'
import type { Locale } from '@configs/i18n'

// Component Imports
import OptionMenu from '@core/components/option-menu'
import TablePaginationComponent from '@components/TablePaginationComponent'
import CustomTextField from '@core/components/mui/TextField'
import CustomAvatar from '@core/components/mui/Avatar'

// Util Imports
import { getInitials } from '@/utils/getInitials'
import { getLocalizedUrl } from '@/utils/i18n'
import { formatCurrency } from '@/utils/transform'

// Style Imports
import tableStyles from '@core/styles/table.module.css'
import Loading from '@/components/layout/shared/Loading'

// Customer Analytics Interface
export interface CustomerAnalytics {
  id: string
  name: string
  email?: string
  phone?: string
  totalPoints: number
  totalSpent?: number
  loyaltyTier?: string // Bronze, Silver, Gold, dst
  lastTransactionDate?: Date
}

declare module '@tanstack/table-core' {
  interface FilterFns {
    fuzzy: FilterFn<unknown>
  }
  interface FilterMeta {
    itemRank: RankingInfo
  }
}

type CustomerAnalyticsWithAction = CustomerAnalytics & {
  action?: string
}

// Styled Components
const Icon = styled('i')({})

const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), value)

  // Store the itemRank info
  addMeta({
    itemRank
  })

  // Return if the item should be filtered in/out
  return itemRank.passed
}

const DebouncedInput = ({
  value: initialValue,
  onChange,
  debounce = 500,
  ...props
}: {
  value: string | number
  onChange: (value: string | number) => void
  debounce?: number
} & Omit<TextFieldProps, 'onChange'>) => {
  // States
  const [value, setValue] = useState(initialValue)

  useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  useEffect(() => {
    const timeout = setTimeout(() => {
      onChange(value)
    }, debounce)

    return () => clearTimeout(timeout)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value])

  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
}

// Dummy data for customer analytics
const DUMMY_CUSTOMER_ANALYTICS_DATA: CustomerAnalytics[] = [
  {
    id: '1',
    name: 'Ahmad Wijaya',
    email: 'ahmad.wijaya@email.com',
    phone: '+628123456789',
    totalPoints: 1250,
    totalSpent: 5500000,
    loyaltyTier: 'Gold',
    lastTransactionDate: new Date('2024-09-10')
  },
  {
    id: '2',
    name: 'Siti Nurhaliza',
    email: 'siti.nurhaliza@email.com',
    phone: '+628234567890',
    totalPoints: 850,
    totalSpent: 3200000,
    loyaltyTier: 'Silver',
    lastTransactionDate: new Date('2024-09-15')
  },
  {
    id: '3',
    name: 'Budi Santoso',
    email: 'budi.santoso@email.com',
    phone: '+628345678901',
    totalPoints: 2100,
    totalSpent: 8750000,
    loyaltyTier: 'Gold',
    lastTransactionDate: new Date('2024-09-12')
  },
  {
    id: '4',
    name: 'Maya Puspita',
    email: 'maya.puspita@email.com',
    phone: '+628456789012',
    totalPoints: 450,
    totalSpent: 1800000,
    loyaltyTier: 'Bronze',
    lastTransactionDate: new Date('2024-09-08')
  },
  {
    id: '5',
    name: 'Rizki Pratama',
    email: 'rizki.pratama@email.com',
    phone: '+628567890123',
    totalPoints: 1680,
    totalSpent: 6300000,
    loyaltyTier: 'Gold',
    lastTransactionDate: new Date('2024-09-16')
  },
  {
    id: '6',
    name: 'Dewi Lestari',
    email: 'dewi.lestari@email.com',
    phone: '+628678901234',
    totalPoints: 320,
    totalSpent: 1200000,
    loyaltyTier: 'Bronze',
    lastTransactionDate: new Date('2024-09-05')
  },
  {
    id: '7',
    name: 'Eko Prasetyo',
    email: 'eko.prasetyo@email.com',
    phone: '+628789012345',
    totalPoints: 975,
    totalSpent: 4100000,
    loyaltyTier: 'Silver',
    lastTransactionDate: new Date('2024-09-14')
  },
  {
    id: '8',
    name: 'Lina Marlina',
    email: 'lina.marlina@email.com',
    phone: '+628890123456',
    totalPoints: 1580,
    totalSpent: 6800000,
    loyaltyTier: 'Gold',
    lastTransactionDate: new Date('2024-09-11')
  }
]

// Mock data hook with dummy data
const useCustomerAnalytics = ({ page, limit, search }: { page: number; limit: number; search: string }) => {
  const [isLoading, setIsLoading] = useState(false)

  // Simulate loading
  useEffect(() => {
    setIsLoading(true)
    const timer = setTimeout(() => setIsLoading(false), 500)
    return () => clearTimeout(timer)
  }, [page, limit, search])

  // Filter data based on search
  const filteredData = useMemo(() => {
    if (!search) return DUMMY_CUSTOMER_ANALYTICS_DATA

    return DUMMY_CUSTOMER_ANALYTICS_DATA.filter(
      customer =>
        customer.name.toLowerCase().includes(search.toLowerCase()) ||
        customer.email?.toLowerCase().includes(search.toLowerCase()) ||
        customer.phone?.toLowerCase().includes(search.toLowerCase()) ||
        customer.loyaltyTier?.toLowerCase().includes(search.toLowerCase())
    )
  }, [search])

  // Paginate data
  const paginatedData = useMemo(() => {
    const startIndex = (page - 1) * limit
    const endIndex = startIndex + limit
    return filteredData.slice(startIndex, endIndex)
  }, [filteredData, page, limit])

  return {
    data: {
      customers: paginatedData,
      total_count: filteredData.length
    },
    isLoading,
    error: null,
    isFetching: isLoading
  }
}

// Utility functions
const getLoyaltyTierColor = (loyaltyTier?: string): ThemeColor => {
  switch (loyaltyTier?.toLowerCase()) {
    case 'bronze':
      return 'warning'
    case 'silver':
      return 'info'
    case 'gold':
      return 'success'
    default:
      return 'secondary'
  }
}

const getLoyaltyTierIcon = (loyaltyTier?: string): string => {
  switch (loyaltyTier?.toLowerCase()) {
    case 'bronze':
      return 'tabler-medal'
    case 'silver':
      return 'tabler-medal-2'
    case 'gold':
      return 'tabler-crown'
    default:
      return 'tabler-user'
  }
}

// Column Definitions
const columnHelper = createColumnHelper<CustomerAnalyticsWithAction>()

const CustomerAnalyticListTable = () => {
  // States
  const [rowSelection, setRowSelection] = useState({})
  const [globalFilter, setGlobalFilter] = useState('')
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [search, setSearch] = useState('')

  const { data, isLoading, error, isFetching } = useCustomerAnalytics({
    page: currentPage,
    limit: pageSize,
    search
  })

  const customers = data?.customers ?? []
  const totalCount = data?.total_count ?? 0

  // Hooks
  const { lang: locale } = useParams()

  const handlePageChange = useCallback((event: unknown, newPage: number) => {
    setCurrentPage(newPage)
  }, [])

  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const newPageSize = parseInt(event.target.value, 10)
    setPageSize(newPageSize)
    setCurrentPage(1) // Reset to first page
  }, [])

  const handleViewCustomer = (customerId: string) => {
    console.log('Viewing customer:', customerId)
    // Add your view logic here
  }

  const handleDeleteCustomer = (customerId: string) => {
    if (confirm('Apakah Anda yakin ingin menghapus data pelanggan ini?')) {
      console.log('Deleting customer:', customerId)
      // Add your delete logic here
    }
  }

  const columns = useMemo<ColumnDef<CustomerAnalyticsWithAction, any>[]>(
    () => [
      {
        id: 'select',
        header: ({ table }) => (
          <Checkbox
            {...{
              checked: table.getIsAllRowsSelected(),
              indeterminate: table.getIsSomeRowsSelected(),
              onChange: table.getToggleAllRowsSelectedHandler()
            }}
          />
        ),
        cell: ({ row }) => (
          <Checkbox
            {...{
              checked: row.getIsSelected(),
              disabled: !row.getCanSelect(),
              indeterminate: row.getIsSomeSelected(),
              onChange: row.getToggleSelectedHandler()
            }}
          />
        )
      },
      columnHelper.accessor('name', {
        header: 'Pelanggan',
        cell: ({ row }) => (
          <div className='flex items-center gap-4'>
            <CustomAvatar size={38}>{getInitials(row.original.name)}</CustomAvatar>
            <div className='flex flex-col'>
              <Link href={getLocalizedUrl(`/apps/customers/${row.original.id}/detail`, locale as Locale)}>
                <Typography className='font-medium cursor-pointer hover:underline text-primary'>
                  {row.original.name}
                </Typography>
              </Link>
              {row.original.email && (
                <Typography variant='body2' color='text.secondary'>
                  {row.original.email}
                </Typography>
              )}
            </div>
          </div>
        )
      }),
      columnHelper.accessor('phone', {
        header: 'No. Telepon',
        cell: ({ row }) => <Typography color='text.primary'>{row.original.phone || '-'}</Typography>
      }),
      columnHelper.accessor('totalPoints', {
        header: 'Total Poin',
        cell: ({ row }) => (
          <div className='flex items-center gap-2'>
            <Icon className='tabler-coins' sx={{ color: 'var(--mui-palette-primary-main)' }} />
            <Typography color='text.primary' className='font-medium'>
              {row.original.totalPoints.toLocaleString('id-ID')} Poin
            </Typography>
          </div>
        )
      }),
      columnHelper.accessor('totalSpent', {
        header: 'Total Belanja',
        cell: ({ row }) => (
          <Typography color='text.primary' className='font-medium'>
            {row.original.totalSpent ? formatCurrency(row.original.totalSpent) : '-'}
          </Typography>
        )
      }),
      columnHelper.accessor('loyaltyTier', {
        header: 'Tier Loyalitas',
        cell: ({ row }) => (
          <div className='flex items-center gap-2'>
            <Icon
              className={getLoyaltyTierIcon(row.original.loyaltyTier)}
              sx={{ color: `var(--mui-palette-${getLoyaltyTierColor(row.original.loyaltyTier)}-main)` }}
            />
            <Chip
              label={row.original.loyaltyTier || 'Belum Ada'}
              color={getLoyaltyTierColor(row.original.loyaltyTier)}
              variant='tonal'
              size='small'
            />
          </div>
        )
      }),
      columnHelper.accessor('lastTransactionDate', {
        header: 'Transaksi Terakhir',
        cell: ({ row }) => (
          <Typography color='text.primary'>
            {row.original.lastTransactionDate
              ? new Date(row.original.lastTransactionDate).toLocaleDateString('id-ID', {
                  year: 'numeric',
                  month: 'short',
                  day: 'numeric'
                })
              : '-'}
          </Typography>
        )
      }),
      {
        id: 'actions',
        header: 'Aksi',
        cell: ({ row }) => (
          <div className='flex items-center'>
            <OptionMenu
              iconButtonProps={{ size: 'medium' }}
              iconClassName='text-textSecondary text-[22px]'
              options={[
                {
                  text: 'Lihat Detail',
                  icon: 'tabler-eye text-[22px]',
                  menuItemProps: {
                    className: 'flex items-center gap-2 text-textSecondary',
                    onClick: () => handleViewCustomer(row.original.id)
                  }
                },
                {
                  text: 'Hapus',
                  icon: 'tabler-trash text-[22px]',
                  menuItemProps: {
                    className: 'flex items-center gap-2 text-textSecondary',
                    onClick: () => handleDeleteCustomer(row.original.id)
                  }
                }
              ]}
            />
          </div>
        ),
        enableSorting: false
      }
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [locale, handleViewCustomer, handleDeleteCustomer]
  )

  const table = useReactTable({
    data: customers as CustomerAnalytics[],
    columns,
    filterFns: {
      fuzzy: fuzzyFilter
    },
    state: {
      rowSelection,
      globalFilter,
      pagination: {
        pageIndex: currentPage,
        pageSize
      }
    },
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    pageCount: Math.ceil(totalCount / pageSize)
  })

  return (
    <Card>
      <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
        <CustomTextField
          select
          value={table.getState().pagination.pageSize}
          onChange={e => table.setPageSize(Number(e.target.value))}
          className='max-sm:is-full sm:is-[70px]'
        >
          <MenuItem value='10'>10</MenuItem>
          <MenuItem value='25'>25</MenuItem>
          <MenuItem value='50'>50</MenuItem>
        </CustomTextField>
        <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
          <DebouncedInput
            value={search ?? ''}
            onChange={value => setSearch(value as string)}
            placeholder='Cari Pelanggan'
            className='max-sm:is-full'
          />
          <Button
            color='secondary'
            variant='tonal'
            startIcon={<i className='tabler-upload' />}
            className='max-sm:is-full'
          >
            Ekspor
          </Button>
        </div>
      </div>
      <div className='overflow-x-auto'>
        {isLoading ? (
          <Loading />
        ) : (
          <table className={tableStyles.table}>
            <thead>
              {table.getHeaderGroups().map(headerGroup => (
                <tr key={headerGroup.id}>
                  {headerGroup.headers.map(header => (
                    <th key={header.id}>
                      {header.isPlaceholder ? null : (
                        <>
                          <div
                            className={classnames({
                              'flex items-center': header.column.getIsSorted(),
                              'cursor-pointer select-none': header.column.getCanSort()
                            })}
                            onClick={header.column.getToggleSortingHandler()}
                          >
                            {flexRender(header.column.columnDef.header, header.getContext())}
                            {{
                              asc: <i className='tabler-chevron-up text-xl' />,
                              desc: <i className='tabler-chevron-down text-xl' />
                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
                          </div>
                        </>
                      )}
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            {table.getFilteredRowModel().rows.length === 0 ? (
              <tbody>
                <tr>
                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
                    Tidak ada data tersedia
                  </td>
                </tr>
              </tbody>
            ) : (
              <tbody>
                {table
                  .getRowModel()
                  .rows.slice(0, table.getState().pagination.pageSize)
                  .map(row => {
                    return (
                      <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
                        {row.getVisibleCells().map(cell => (
                          <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
                        ))}
                      </tr>
                    )
                  })}
              </tbody>
            )}
          </table>
        )}
      </div>
      <TablePagination
        component={() => (
          <TablePaginationComponent
            pageIndex={currentPage}
            pageSize={pageSize}
            totalCount={totalCount}
            onPageChange={handlePageChange}
          />
        )}
        count={totalCount}
        rowsPerPage={pageSize}
        page={currentPage}
        onPageChange={handlePageChange}
        onRowsPerPageChange={handlePageSizeChange}
        rowsPerPageOptions={[10, 25, 50]}
        disabled={isLoading}
      />
    </Card>
  )
}

export default CustomerAnalyticListTable
