dashboards/apps/business/src/pages/CustomersPage.tsx

import { useEffect, useMemo, useState } from 'react'
import { MessageSquare, Pencil, Plus, RotateCcw, Search, Ticket, Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { AddCustomerModal } from '../components/AddCustomerModal'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
import { EditCustomerModal } from '../components/EditCustomerModal'
import { Pagination } from '../components/Pagination'
import { ToggleSwitch } from '../components/ToggleSwitch'
import { Tooltip } from '../components/Tooltip'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import { formatCellForDisplay } from '../lib/cellNumber'
import {
  listCustomers,
  removeCustomer,
  updateCustomerEnabled,
  type BusinessCustomerListItem,
  type CustomersListResponse,
} from '../services/customerService'
import { formatIrtPrice } from '../utils/irtPrice'
import { textLocaleAttrs } from '../utils/textLocale'
import filterStyles from '../components/ListFiltersPanel.module.css'
import pageStyles from '../components/PageContent.module.css'
import styles from './CustomersPage.module.css'

const PAGE_SIZE = 24
const COLUMN_COUNT = 6

function formatDate(value: string, locale: 'en' | 'fa') {
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return value
  const intlLocale = locale === 'fa' ? 'fa-IR' : 'en-US'
  return d.toLocaleDateString(intlLocale, { year: 'numeric', month: 'short', day: '2-digit' })
}

function displayName(customer: BusinessCustomerListItem) {
  const name = [customer.firstName, customer.lastName].filter(Boolean).join(' ').trim()
  return name || '—'
}

function formatTransactionTotal(total: number | null | undefined) {
  if (total == null || total === 0) {
    return <span className={styles.subText}>—</span>
  }
  return formatIrtPrice(total)
}

export function CustomersPage() {
  const t = useT()
  const { locale } = useLocale()
  const { showToast } = useToast()
  const [data, setData] = useState<CustomersListResponse | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const [appliedFilters, setAppliedFilters] = useState<{ name?: string; cellNumber?: string }>({})
  const [page, setPage] = useState(1)

  const [draftName, setDraftName] = useState('')
  const [draftCell, setDraftCell] = useState('')

  const [togglingId, setTogglingId] = useState<string | null>(null)
  const [editTarget, setEditTarget] = useState<BusinessCustomerListItem | null>(null)
  const [createOpen, setCreateOpen] = useState(false)
  const [removeTarget, setRemoveTarget] = useState<BusinessCustomerListItem | null>(null)
  const [removing, setRemoving] = useState(false)

  useEffect(() => {
    const controller = new AbortController()

    async function load() {
      setLoading(true)
      setError('')
      try {
        const result = await listCustomers(
          {
            page,
            pageSize: PAGE_SIZE,
            ...appliedFilters,
          },
          controller.signal,
        )
        if (controller.signal.aborted) return
        setData(result)
      } catch (err) {
        if (isAbortError(err) || controller.signal.aborted) return
        setError(err instanceof ApiError ? err.message : t('customers.error.load'))
      } finally {
        if (!controller.signal.aborted) setLoading(false)
      }
    }

    void load()

    return () => {
      controller.abort()
    }
  }, [page, appliedFilters.name, appliedFilters.cellNumber, t])

  const totalPages = useMemo(() => {
    const total = data?.total ?? 0
    return Math.max(1, Math.ceil(total / PAGE_SIZE))
  }, [data?.total])

  const showingFrom = useMemo(() => {
    if (!data || data.total === 0) return 0
    return (page - 1) * PAGE_SIZE + 1
  }, [data, page])

  const showingTo = useMemo(() => {
    if (!data) return 0
    return Math.min(data.total, page * PAGE_SIZE)
  }, [data, page])

  function applyFilters() {
    setPage(1)
    setAppliedFilters({
      ...(draftName.trim() ? { name: draftName.trim() } : {}),
      ...(draftCell.trim() ? { cellNumber: draftCell.trim() } : {}),
    })
  }

  function clearFilters() {
    setDraftName('')
    setDraftCell('')
    setPage(1)
    setAppliedFilters({})
  }

  async function handleToggleEnabled(customer: BusinessCustomerListItem, isEnabled: boolean) {
    setTogglingId(customer.id)
    setError('')
    try {
      await updateCustomerEnabled(customer.id, isEnabled)
      setData((prev) => {
        if (!prev) return prev
        return {
          ...prev,
          items: prev.items.map((item) =>
            item.id === customer.id ? { ...item, isEnabled } : item,
          ),
        }
      })
      showToast(
        isEnabled
          ? t('customers.toast.enabled', { name: displayName(customer) })
          : t('customers.toast.disabled', { name: displayName(customer) }),
        'success',
      )
    } catch (err) {
      setError(err instanceof ApiError ? err.message : t('customers.error.update'))
    } finally {
      setTogglingId(null)
    }
  }

  async function confirmRemove() {
    if (!removeTarget) return
    setRemoving(true)
    setError('')
    try {
      await removeCustomer(removeTarget.id)
      setData((prev) => {
        if (!prev) return prev
        return {
          ...prev,
          total: Math.max(0, prev.total - 1),
          items: prev.items.filter((item) => item.id !== removeTarget.id),
        }
      })
      showToast(t('customers.toast.removed', { name: displayName(removeTarget) }), 'success')
      setRemoveTarget(null)
    } catch (err) {
      setError(err instanceof ApiError ? err.message : t('customers.error.remove'))
    } finally {
      setRemoving(false)
    }
  }

  function handleSendSms(customer: BusinessCustomerListItem) {
    showToast(
      t('customers.toast.smsSoon', { phone: formatCellForDisplay(customer.cellNumber) }),
      'info',
    )
  }

  function handleTickets(customer: BusinessCustomerListItem) {
    showToast(t('customers.toast.ticketsSoon', { name: displayName(customer) }), 'info')
  }

  function handleCustomerSaved(updated: BusinessCustomerListItem) {
    setData((prev) => {
      if (!prev) return prev
      return {
        ...prev,
        items: prev.items.map((item) => (item.id === updated.id ? updated : item)),
      }
    })
    showToast(t('customers.toast.updated', { name: displayName(updated) }), 'success')
  }

  function handleCustomerCreated(customer: BusinessCustomerListItem) {
    setPage(1)
    setData((prev) => {
      if (!prev) {
        return {
          items: [customer],
          total: 1,
          page: 1,
          pageSize: PAGE_SIZE,
        }
      }
      return {
        ...prev,
        total: prev.total + 1,
        page: 1,
        items: [customer, ...prev.items.filter((item) => item.id !== customer.id)].slice(
          0,
          PAGE_SIZE,
        ),
      }
    })
    showToast(t('customers.toast.added', { name: displayName(customer) }), 'success')
  }

  return (
    <main className={pageStyles.content}>
      <Breadcrumbs
        items={[
          { label: 'Home', href: '/' },
          { label: 'Customers' },
        ]}
      />

      <div className={pageStyles.pageHeader}>
        <div>
          <h2 className={pageStyles.pageTitle}>{t('customers.title')}</h2>
          <p className={pageStyles.pageSubtitle}>{t('customers.subtitle')}</p>
        </div>
      </div>

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('customers.filters')}</div>
        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={filterStyles.filtersInputs}>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
              <input
                id="filter-customer-name"
                value={draftName}
                onChange={(e) => setDraftName(e.target.value)}
                placeholder={t('customers.filter.name')}
                aria-label={t('customers.filter.name')}
              />
            </div>
            <div className={`${filterStyles.field} ${styles.filterCellNarrow}`}>
              <input
                id="filter-customer-cell"
                value={draftCell}
                onChange={(e) => setDraftCell(e.target.value)}
                placeholder={t('customers.filter.cell')}
                aria-label={t('customers.filter.cell')}
                autoComplete="off"
              />
            </div>
          </div>
          <div className={filterStyles.filterActions}>
            <button
              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
              disabled={loading}
              aria-label={t('customers.search')}
              title={t('customers.search')}
            >
              <Search size={18} />
            </button>
            <button
              type="button"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnGhost}`}
              onClick={clearFilters}
              disabled={loading}
              aria-label={t('customers.clearFilters')}
              title={t('customers.clearFilters')}
            >
              <RotateCcw size={18} />
            </button>
          </div>
        </form>
      </div>

      <div className={styles.tablePanel}>
        <div className={styles.tableWrap}>
          <div className={styles.tableHeader}>
            <div className={styles.tableHeaderTitle}>{t('customers.listTitle')}</div>
            <div className={styles.meta}>
              {data ? (
                data.total > 0 ? (
                  t('customers.showing', {
                    from: showingFrom,
                    to: showingTo,
                    total: data.total,
                  })
                ) : (
                  t('customers.none')
                )
              ) : (
                ' '
              )}
            </div>
          </div>

          {error && <div className={styles.errorBanner}>{error}</div>}

          <table
            className={`${styles.table}${locale === 'fa' ? ` ${styles.tableFa}` : ''}`}
            dir={locale === 'fa' ? 'rtl' : 'ltr'}
          >
            <colgroup>
              <col className={styles.colName} />
              <col className={styles.colCell} />
              <col className={styles.colOrders} />
              <col className={styles.colTransactions} />
              <col className={styles.colDate} />
              <col className={styles.colActions} />
            </colgroup>
            <thead>
              <tr>
                <th className={styles.th}>{t('customers.col.name')}</th>
                <th className={styles.th}>{t('customers.col.cell')}</th>
                <th className={styles.th}>{t('customers.col.orders')}</th>
                <th className={styles.th}>{t('customers.col.transactions')}</th>
                <th className={styles.th}>{t('customers.col.date')}</th>
                <th className={`${styles.th} ${styles.thActions}`}>{t('customers.col.actions')}</th>
              </tr>
            </thead>
            <tbody>
              {loading && (
                <tr>
                  <td className={styles.td} colSpan={COLUMN_COUNT}>
                    {t('customers.loading')}
                  </td>
                </tr>
              )}

              {!loading && data?.items?.length === 0 && (
                <tr>
                  <td className={styles.td} colSpan={COLUMN_COUNT}>
                    {t('customers.empty')}
                  </td>
                </tr>
              )}

              {!loading &&
                data?.items?.map((customer) => {
                  const name = displayName(customer)
                  const nameLocale = textLocaleAttrs(name)
                  return (
                    <tr
                      key={customer.id}
                      className={!customer.isEnabled ? styles.inactiveRow : undefined}
                    >
                      <td className={styles.td}>
                        <div
                          className={[
                            styles.customerName,
                            nameLocale.className,
                            locale === 'fa' ? styles.nameAlignFa : '',
                          ]
                            .filter(Boolean)
                            .join(' ')}
                          lang={nameLocale.lang}
                          dir={nameLocale.dir}
                        >
                          {name}
                        </div>
                        {!customer.isEnabled && (
                          <div className={styles.statusDisabled}>{t('customers.disabled')}</div>
                        )}
                      </td>
                      <td className={styles.td}>{formatCellForDisplay(customer.cellNumber)}</td>
                      <td className={styles.td}>
                        {customer.orderCount == null || customer.orderCount === 0 ? (
                          <span className={styles.subText}>{t('customers.noOrders')}</span>
                        ) : (
                          customer.orderCount
                        )}
                      </td>
                      <td className={styles.td}>
                        {formatTransactionTotal(customer.totalTransactionsIrt)}
                      </td>
                      <td className={`${styles.td} ${styles.dateCell}`}>
                        {formatDate(customer.createdAt, locale)}
                      </td>
                      <td className={`${styles.td} ${styles.tdActions}`}>
                        <div className={styles.rowActions}>
                          <Tooltip
                            label={
                              customer.isEnabled
                                ? t('customers.disable')
                                : t('customers.enable')
                            }
                          >
                            <span className={styles.toggleInActions}>
                              <ToggleSwitch
                                checked={customer.isEnabled}
                                disabled={togglingId === customer.id || removing}
                                size="compact"
                                ariaLabel={
                                  customer.isEnabled
                                    ? t('customers.disableAria', { name })
                                    : t('customers.enableAria', { name })
                                }
                                onChange={(isEnabled) =>
                                  void handleToggleEnabled(customer, isEnabled)
                                }
                              />
                            </span>
                          </Tooltip>
                          <Tooltip label={t('customers.edit')}>
                            <button
                              type="button"
                              className={styles.actionBtn}
                              onClick={() => setEditTarget(customer)}
                              aria-label={t('customers.edit')}
                            >
                              <Pencil size={15} />
                            </button>
                          </Tooltip>
                          <Tooltip label={t('customers.sms')}>
                            <button
                              type="button"
                              className={styles.actionBtn}
                              onClick={() => handleSendSms(customer)}
                              aria-label={t('customers.sms')}
                            >
                              <MessageSquare size={15} />
                            </button>
                          </Tooltip>
                          <Tooltip label={t('customers.tickets')}>
                            <button
                              type="button"
                              className={styles.actionBtn}
                              onClick={() => handleTickets(customer)}
                              aria-label={t('customers.tickets')}
                            >
                              <Ticket size={15} />
                            </button>
                          </Tooltip>
                          <Tooltip label={t('customers.remove')}>
                            <button
                              type="button"
                              className={`${styles.actionBtn} ${styles.actionBtnDanger}`}
                              onClick={() => setRemoveTarget(customer)}
                              aria-label={t('customers.remove')}
                              disabled={removing}
                            >
                              <Trash2 size={15} />
                            </button>
                          </Tooltip>
                        </div>
                      </td>
                    </tr>
                  )
                })}
            </tbody>
          </table>

          <div className={styles.pagination}>
            <div>
              {t('customers.pageMeta', {
                page,
                totalPages,
                pageSize: PAGE_SIZE,
                total: data?.total ?? 0,
              })}
            </div>
            <Pagination
              currentPage={page}
              totalPages={totalPages}
              onPageChange={setPage}
              disabled={loading}
              variant="inline"
            />
          </div>
        </div>
      </div>

      <AddCustomerModal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onCreated={handleCustomerCreated}
      />

      <EditCustomerModal
        open={editTarget !== null}
        customer={editTarget}
        onClose={() => setEditTarget(null)}
        onSaved={handleCustomerSaved}
      />

      <ConfirmDeleteModal
        open={removeTarget !== null}
        title={t('customers.deleteTitle')}
        message={
          removeTarget
            ? t('customers.deleteMessage', { name: displayName(removeTarget) })
            : ''
        }
        onCancel={() => setRemoveTarget(null)}
        onConfirm={() => void confirmRemove()}
      />

      <button
        type="button"
        className={styles.fab}
        onClick={() => setCreateOpen(true)}
        aria-label={t('customers.add')}
      >
        <Plus size={24} />
      </button>
    </main>
  )
}