import { Link, useNavigate } from 'react-router-dom'
import { Plus } from 'lucide-react'
import { ListPageShell } from '@/components/ListPageShell'
import { DataTable } from '@/components/DataTable'
import { Pagination } from '@/components/Pagination'
import { SearchBar } from '@/components/SearchBar'
import { Button } from '@/components/Button'
import { useCatalogList } from '@/lib/useCatalog'
import { useOrgSettings } from '@/lib/useOrgSettings'
import { type RetailSaleListRow, RetailSaleStatus, PaymentMethod } from '@/lib/types'

const URL = '/api/sales/retail'

const paymentLabel: Record<number, string> = {
  [PaymentMethod.Cash]: 'Наличные',
  [PaymentMethod.Card]: 'Карта',
  [PaymentMethod.BankTransfer]: 'Перевод',
  [PaymentMethod.Bonus]: 'Бонусы',
  [PaymentMethod.Mixed]: 'Смешанная',
}

export function RetailSalesPage() {
  const navigate = useNavigate()
  const { data, isLoading, page, setPage, search, setSearch, sortKey, sortOrder, setSort } = useCatalogList<RetailSaleListRow>(URL)
  const org = useOrgSettings()
  const fractional = org.data?.allowFractionalPrices ?? false
  const moneyFmt = fractional
    ? { minimumFractionDigits: 2, maximumFractionDigits: 2 }
    : { maximumFractionDigits: 0 }

  return (
    <ListPageShell
      title="Розничные продажи"
      description={data ? `${data.total.toLocaleString('ru')} чеков` : 'Чеки розничных продаж'}
      actions={
        <>
          <SearchBar value={search} onChange={setSearch} placeholder="По номеру чека…" />
          <Link to="/sales/retail/new">
            <Button><Plus className="w-4 h-4" /> Новый чек</Button>
          </Link>
        </>
      }
      footer={data && data.total > 0 && (
        <Pagination page={page} pageSize={data.pageSize} total={data.total} onPageChange={setPage} />
      )}
    >
      <DataTable
        rows={data?.items ?? []}
        isLoading={isLoading}
        rowKey={(r) => r.id}
        sortKey={sortKey}
        sortOrder={sortOrder}
        onSortChange={setSort}
        onRowClick={(r) => navigate(`/sales/retail/${r.id}`)}
        columns={[
          { header: '№', width: '160px', sortKey: 'number', cell: (r) => <span className="font-mono text-slate-600">{r.number}</span> },
          { header: 'Дата/время', width: '160px', sortKey: 'date', cell: (r) => new Date(r.date).toLocaleString('ru') },
          { header: 'Статус', width: '120px', sortKey: 'status', cell: (r) => (
            r.status === RetailSaleStatus.Posted
              ? <span className="text-xs px-2 py-0.5 rounded bg-green-50 text-green-700">Проведён</span>
              : <span className="text-xs px-2 py-0.5 rounded bg-slate-100 text-slate-600">Черновик</span>
          )},
          { header: 'Магазин', sortKey: 'store', cell: (r) => r.storeName },
          { header: 'Касса', width: '160px', cell: (r) => r.retailPointName ?? '—' },
          { header: 'Покупатель', width: '180px', cell: (r) => r.customerName ?? <span className="text-slate-400">аноним</span> },
          { header: 'Оплата', width: '120px', cell: (r) => paymentLabel[r.payment] ?? '?' },
          { header: 'Позиций', width: '90px', className: 'text-right', cell: (r) => r.lineCount },
          { header: 'Сумма', width: '160px', className: 'text-right font-mono font-semibold', sortKey: 'total', cell: (r) => `${r.total.toLocaleString('ru', moneyFmt)} ${r.currencyCode}` },
        ]}
        empty="Чеков пока нет. На Phase 5 здесь начнут падать продажи с касс. Сейчас можно создать вручную для теста."
      />
    </ListPageShell>
  )
}
