import { Eye } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { Order, OrderSource } from '../services/orderService'
import type { OrderProcessStep } from '../utils/orderSteps'
import { stepLabel, stepColor } from '../utils/orderSteps'
import { formatIrtPrice } from '../utils/irtPrice'
import { stepBadgeStyle } from '../utils/stepColors'
import styles from './OrderRow.module.css'

interface OrderRowProps {
  order: Order
  processSteps: OrderProcessStep[]
  onViewItems: (order: Order) => void
}

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

function totalItemQuantity(order: Order) {
  return order.items.reduce((sum, item) => sum + item.quantity, 0)
}

export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
  const { locale } = useLocale()
  const t = useT()
  const { date, time } = formatDateTime(order.createdAt, locale)
  const itemQty = totalItemQuantity(order)
  const processStepId = order.processStepId ?? processSteps[0]?.id ?? 'processing'

  function sourceLabel(source: OrderSource) {
    switch (source) {
      case 'admin':
        return t('orders.source.operator')
      case 'app':
        return t('orders.source.app')
      case 'website':
      default:
        return t('orders.source.website')
    }
  }

  function sourceClass(source: OrderSource) {
    switch (source) {
      case 'admin':
        return styles.sourceOperator
      case 'app':
        return styles.sourceApplication
      case 'website':
      default:
        return styles.sourceWebsite
    }
  }

  return (
    <tr>
      <td className={styles.td}>
        <div className={styles.orderNumber}>{order.orderNumber}</div>
      </td>
      <td className={styles.td}>
        {itemQty > 0 ? itemQty : <span className={styles.subText}>0</span>}
      </td>
      <td className={styles.td}>{formatIrtPrice(order.total)}</td>
      <td className={`${styles.td} ${styles.dateCell}`}>
        <div className={styles.dateTime}>{date}</div>
        {time && <div className={styles.dateTimeSub}>{time}</div>}
      </td>
      <td className={styles.td}>
        <span
          className={styles.stepBadge}
          style={stepBadgeStyle(
            stepColor(processSteps, processStepId, order.processStepColor),
          )}
        >
          {stepLabel(
            processSteps,
            processStepId,
            order.processStepLabel,
            order.processStepLabelFa,
            locale,
          )}
        </span>
      </td>
      <td className={styles.td}>
        <span className={`${styles.sourceBadge} ${sourceClass(order.source)}`}>
          {sourceLabel(order.source)}
        </span>
      </td>
      <td className={`${styles.td} ${styles.tdActions}`}>
        <div className={styles.rowActions}>
          <button
            type="button"
            className={styles.actionBtn}
            onClick={() => onViewItems(order)}
            aria-label={t('orders.viewItems')}
            title={t('orders.viewItems')}
          >
            <Eye size={15} />
          </button>
        </div>
      </td>
    </tr>
  )
}
