import Link from "next/link"
import { SectionCard } from "@/components/ui/section-card"
import { StatusBadge } from "@/components/ui/status-badge"
import { formatDateTime, formatMoney, formatNumber, timeAgo } from "@/lib/format"
import i18n from "@/lib/i18n";

const TABS = [
  { id: "overview", label: i18n.t('components.customer.customer-tabs.text_1') },
  { id: "kyc", label: "KYC" },
  { id: "cash", label: i18n.t('components.customer.customer-tabs.text_2') },
  { id: "gold", label: i18n.t('components.customer.customer-tabs.text_3') },
  { id: "statement", label: i18n.t('components.customer.customer-tabs.statement', { defaultValue: 'Statement' }) },
  { id: "orders", label: i18n.t('components.customer.customer-tabs.text_4') },
  { id: "transfers", label: i18n.t('components.customer.customer-tabs.text_5') },
  { id: "redemptions", label: i18n.t('components.customer.customer-tabs.text_6') },
  { id: "risk", label: i18n.t('components.customer.customer-tabs.text_7') },
  { id: "notes", label: i18n.t('components.customer.customer-tabs.text_notes', { defaultValue: 'ملاحظات' }) },
  { id: "audit", label: i18n.t('components.customer.customer-tabs.text_8') },
]

export function CustomerTabs({
  current,
  customer,
  cashWallet,
  goldWallet,
  orders,
  transfers,
  redemptions,
  kyc,
  audits,
  notes,
  alerts,
  movements,
  statement,
}: {
  current: string
  customer: any
  cashWallet?: any
  goldWallet?: any
  orders: any[]
  transfers: any[]
  redemptions: any[]
  kyc: any[]
  audits: any[]
  notes: any[]
  alerts: any[]
  movements: any[]
  statement?: any | null
}) {
  const base = `/customers/${customer.id}`
  return (
    <SectionCard padded={false}>
      <div className="flex flex-wrap gap-1 p-2 border-b border-border bg-muted/30 overflow-x-auto">
        {TABS.map((t) => {
          const isActive = current === t.id
          return (
            <Link
              key={t.id}
              href={`${base}?tab=${t.id}`}
              className={`px-3 py-1.5 rounded-md text-[12.5px] font-semibold transition whitespace-nowrap ${
                isActive
                  ? "bg-gold-500 text-white shadow-sm"
                  : "text-muted-foreground hover:text-foreground hover:bg-card"
              }`}
            >
              {t.label}
            </Link>
          )
        })}
      </div>

      <div className="p-5">
        {current === "overview" && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="border border-border rounded-xl p-4 bg-card flex flex-col">
                <h3 className="text-[13.5px] font-bold text-muted-foreground mb-3">{i18n.t('app.admin.customers.overview.cash_wallet', { defaultValue: 'Cash Wallet' })}</h3>
                <div className="text-2xl font-bold text-foreground mb-1 tabular-nums">
                  {formatMoney(cashWallet?.available_balance ?? 0)}
                </div>
                <div className="text-[11.5px] text-muted-foreground mb-4">
                  {i18n.t('app.admin.customers.overview.reserved', { defaultValue: 'Reserved:' })} {formatMoney(cashWallet?.reserved_balance ?? 0)}
                </div>
                <button className="mt-auto w-full h-8 bg-primary/10 hover:bg-primary/20 text-primary text-[12px] font-semibold rounded-lg transition">
                  {i18n.t('app.admin.customers.overview.add_funds', { defaultValue: 'Add Funds' })}
                </button>
              </div>

              <div className="border border-border rounded-xl p-4 bg-card flex flex-col">
                <h3 className="text-[13.5px] font-bold text-muted-foreground mb-3">{i18n.t('app.admin.customers.overview.gold_wallet', { defaultValue: 'Gold Wallet' })}</h3>
                <div className="text-2xl font-bold text-foreground mb-1 tabular-nums">
                  {formatNumber(goldWallet?.available_grams ?? 0, 2)} <span className="text-sm font-normal text-muted-foreground">g</span>
                </div>
                <div className="text-[11.5px] text-muted-foreground">
                  {i18n.t('app.admin.customers.overview.reserved', { defaultValue: 'Reserved:' })} {formatNumber(goldWallet?.reserved_grams ?? 0, 2)} g
                </div>
              </div>

              <div className="border border-border rounded-xl p-4 bg-card flex flex-col">
                <h3 className="text-[13.5px] font-bold text-muted-foreground mb-3">{i18n.t('app.admin.customers.overview.security_access', { defaultValue: 'Security & Access' })}</h3>
                <div className="space-y-2 text-[12.5px] mb-4">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{i18n.t('app.admin.customers.overview.two_fa', { defaultValue: '2FA Status' })}</span>
                    <span className="font-semibold text-success">{customer.two_factor_enabled ? i18n.t('app.admin.customers.[id].page.text_36') : i18n.t('app.admin.customers.[id].page.text_37')}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{i18n.t('app.admin.customers.overview.last_login', { defaultValue: 'Last Login' })}</span>
                    <span className="font-semibold">{customer.last_login_at ? timeAgo(customer.last_login_at) : '—'}</span>
                  </div>
                </div>
                <button className="w-full h-8 border border-border hover:bg-muted text-foreground text-[12px] font-semibold rounded-lg transition mt-auto">
                  {i18n.t('app.admin.customers.overview.reset_security', { defaultValue: 'Reset 2FA / Password' })}
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-[13.5px] font-bold mb-3">{i18n.t('components.customer.customer-tabs.text_35')}</h3>
                <ul className="space-y-2.5 text-[12.5px]">
                  {[...orders.slice(0, 3).map((o: any) => ({ k: o.order_code, type: o.side === "buy" ? i18n.t('components.customer.customer-tabs.text_9') : i18n.t('components.customer.customer-tabs.text_10'), amt: formatMoney(o.total_amount), t: o.created_at })),
                    ...transfers.slice(0, 2).map((x: any) => ({ k: x.transfer_code, type: i18n.t('components.customer.customer-tabs.text_11'), amt: formatNumber(x.quantity, 2), t: x.initiated_at }))]
                    .sort((a, b) => new Date(b.t).getTime() - new Date(a.t).getTime())
                    .slice(0, 6)
                    .map((r) => (
                      <li key={r.k} className="flex items-center justify-between py-1.5 border-b border-border/60">
                        <div>
                          <div className="font-semibold">{r.k}</div>
                          <div className="text-muted-foreground text-[11.5px]">{r.type}</div>
                        </div>
                        <div className="text-left">
                          <div className="font-semibold tabular-nums">{r.amt}</div>
                          <div className="text-muted-foreground text-[11px]">{timeAgo(r.t)}</div>
                        </div>
                      </li>
                    ))}
                </ul>
              </div>
              <div>
                <h3 className="text-[13.5px] font-bold mb-3">{i18n.t('components.customer.customer-tabs.text_36')}</h3>
                <dl className="space-y-2 text-[12.5px]">
                  <Row k={i18n.t('components.customer.customer-tabs.text_12')} v={customer.customer_code} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_13')} v={customer.email} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_14')} v={customer.phone} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_15')} v={customer.tier} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_16')} v={String(customer.risk_score)} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_17')} v={formatDateTime(customer.created_at)} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_18')} v={formatDateTime(customer.last_login_at)} />
                </dl>
              </div>
            </div>
          </div>
        )}

        {current === "kyc" && (
          <div className="space-y-4">
            {kyc.length === 0 && <p className="text-[13px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_37')}</p>}
            {kyc.map((k) => (
              <div key={k.id} className="rounded-xl border border-border p-4">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <div className="text-[13px] font-bold">{k.id?.slice(0, 8)}</div>
                    <div className="text-[11.5px] text-muted-foreground">{formatDateTime(k.submitted_at ?? k.created_at)}</div>
                  </div>
                  <StatusBadge tone={k.status === "approved" ? "success" : k.status === "rejected" ? "danger" : "warning"} size="sm">
                    {k.status}
                  </StatusBadge>
                </div>
                <dl className="grid grid-cols-2 gap-3 text-[12.5px]">
                  <Row k={i18n.t('components.customer.customer-tabs.text_19')} v={k.level} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_16')} v={String(k.risk_score ?? 0)} />
                  <Row k={i18n.t('components.customer.customer-tabs.text_20')} v={k.reviewed_at ? formatDateTime(k.reviewed_at) : "—"} />
                  {k.rejection_reason && <Row k={i18n.t('app.admin.kyc.page.text_43')} v={k.rejection_reason} />}
                </dl>
              </div>
            ))}
          </div>
        )}

        {current === "cash" && (
          <Movements title={i18n.t('components.customer.customer-tabs.text_25')} rows={movements.filter((m) => m.asset === "cash")} asset="cash" />
        )}

        {current === "gold" && (
          <Movements title={i18n.t('components.customer.customer-tabs.text_26')} rows={movements.filter((m) => m.asset === "gold")} asset="gold" />
        )}

        {current === "statement" && (
          <TableStatement statement={statement} />
        )}

        {current === "orders" && (
          <TableOrders rows={orders} />
        )}

        {current === "transfers" && (
          <TableTransfers rows={transfers} customerId={customer.id} />
        )}

        {current === "redemptions" && (
          <TableRedemptions rows={redemptions} />
        )}

        {current === "risk" && (
          <div className="space-y-3">
            {alerts.length === 0 && <p className="text-[13px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_38')}</p>}
            {alerts.map((a) => (
              <div key={a.id} className="rounded-xl border border-border p-4">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <div className="text-[13px] font-bold">{a.rule_name}</div>
                    <div className="text-[11.5px] text-muted-foreground">{a.alert_code} — {timeAgo(a.created_at)}</div>
                  </div>
                  <StatusBadge tone={a.severity === "critical" || a.severity === "high" ? "danger" : "warning"} size="sm">
                    {a.severity}
                  </StatusBadge>
                </div>
                {a.reference && <div className="mt-2 text-[11.5px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_39')}{a.reference}</div>}
              </div>
            ))}
          </div>
        )}

        {current === "notes" && (
          <ul className="divide-y divide-border">
            {notes.length === 0 && <li className="py-6 text-[13px] text-muted-foreground text-center">{i18n.t('components.customer.customer-tabs.text_no_notes', { defaultValue: 'لا توجد ملاحظات مسجلة' })}</li>}
            {notes.map((n: any) => (
              <li key={n.id} className="py-4">
                <div className="text-[13px] text-foreground leading-relaxed">{n.content}</div>
                <div className="text-[11.5px] text-muted-foreground mt-1.5 flex items-center gap-2">
                  <span className="font-medium text-foreground">{n.author_name ?? '—'}</span>
                  <span>•</span>
                  <span>{formatDateTime(n.created_at)}</span>
                </div>
              </li>
            ))}
          </ul>
        )}

        {current === "audit" && (
          <ul className="divide-y divide-border">
            {audits.length === 0 && <li className="py-6 text-[13px] text-muted-foreground text-center">{i18n.t('components.customer.customer-tabs.text_40')}</li>}
            {audits.map((a) => (
              <li key={a.id} className="py-3 flex items-start justify-between gap-3">
                <div>
                  <div className="text-[12.5px] font-semibold">{a.action}</div>
                  <div className="text-[11.5px] text-muted-foreground mt-1 line-clamp-1 max-w-lg">
                    {a.new_values ? JSON.stringify(a.new_values) : "—"}
                  </div>
                </div>
                <div className="text-left shrink-0">
                  <StatusBadge tone="neutral" size="sm">
                    {a.entity_type}
                  </StatusBadge>
                  <div className="text-[11px] text-muted-foreground mt-1 text-left">{timeAgo(a.created_at)}</div>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </SectionCard>
  )
}

function TableStatement({ statement }: { statement?: any | null }) {
  const wallets = Array.isArray(statement?.wallets) ? statement.wallets : []
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-3">
        <h3 className="text-[13.5px] font-bold">{i18n.t('components.customer.customer-tabs.statement', { defaultValue: 'Statement' })}</h3>
        {statement?.from_date && (
          <span className="text-[11.5px] text-muted-foreground">
            {statement.from_date} - {statement.to_date}
          </span>
        )}
      </div>
      {wallets.length === 0 ? (
        <p className="text-[12.5px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_41')}</p>
      ) : (
        wallets.map((wallet: any) => (
          <div key={wallet.wallet_id} className="rounded-lg border border-border overflow-hidden">
            <div className="flex flex-wrap items-center justify-between gap-3 bg-muted/40 px-3 py-2">
              <div>
                <div className="text-[12.5px] font-semibold">{wallet.label || wallet.wallet_type}</div>
                <div className="text-[11px] text-muted-foreground">{wallet.wallet_type}</div>
              </div>
              <div className="flex gap-4 text-[11.5px] tabular-nums">
                <span>{i18n.t('components.customer.customer-tabs.opening', { defaultValue: 'Opening' })}: {formatNumber(wallet.opening_balance ?? 0, 2)}</span>
                <span>{i18n.t('components.customer.customer-tabs.closing', { defaultValue: 'Closing' })}: {formatNumber(wallet.closing_balance ?? 0, 2)}</span>
              </div>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-right text-[12.5px]">
                <thead className="border-b border-border">
                  <tr className="text-[11px] uppercase text-muted-foreground">
                    <th className="px-3 py-2">{i18n.t('components.customer.customer-tabs.text_47')}</th>
                    <th className="px-3 py-2">{i18n.t('components.customer.customer-tabs.text_43')}</th>
                    <th className="px-3 py-2">{i18n.t('components.customer.customer-tabs.debit', { defaultValue: 'Debit' })}</th>
                    <th className="px-3 py-2">{i18n.t('components.customer.customer-tabs.credit', { defaultValue: 'Credit' })}</th>
                    <th className="px-3 py-2">{i18n.t('components.customer.customer-tabs.balance', { defaultValue: 'Balance' })}</th>
                    <th className="px-3 py-2">{i18n.t('components.customer.customer-tabs.text_42')}</th>
                  </tr>
                </thead>
                <tbody>
                  {(wallet.entries ?? []).map((entry: any) => (
                    <tr key={entry.entry_id} className="border-b border-border/60">
                      <td className="px-3 py-2 text-muted-foreground">{entry.entry_date}</td>
                      <td className="px-3 py-2">{entry.entry_type}</td>
                      <td className="px-3 py-2 tabular-nums">{entry.debit ? formatNumber(entry.debit, 2) : "—"}</td>
                      <td className="px-3 py-2 tabular-nums">{entry.credit ? formatNumber(entry.credit, 2) : "—"}</td>
                      <td className="px-3 py-2 tabular-nums font-semibold">{formatNumber(entry.balance_after ?? 0, 2)}</td>
                      <td className="px-3 py-2 text-muted-foreground">{entry.reference_type || "—"}</td>
                    </tr>
                  ))}
                  {(wallet.entries ?? []).length === 0 && (
                    <tr>
                      <td className="px-3 py-5 text-center text-muted-foreground" colSpan={6}>
                        {i18n.t('components.customer.customer-tabs.text_41')}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        ))
      )}
    </div>
  )
}

function Row({ k, v }: { k: string; v: string | null | undefined }) {
  return (
    <div className="flex items-center justify-between gap-4 py-1 border-b border-border/40 last:border-b-0">
      <dt className="text-muted-foreground">{k}</dt>
      <dd className="font-medium text-foreground">{v ?? "—"}</dd>
    </div>
  )
}

function Movements({ title, rows, asset }: { title: string; rows: any[]; asset: "cash" | "gold" }) {
  return (
    <div>
      <h3 className="text-[13.5px] font-bold mb-3">{title}</h3>
      {rows.length === 0 ? (
        <p className="text-[12.5px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_41')}</p>
      ) : (
        <table className="w-full text-right text-[12.5px]">
          <thead className="border-b border-border">
            <tr className="text-[11px] uppercase text-muted-foreground">
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_42')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_43')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_44')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_45')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_46')}</th>
              <th className="py-2 text-left">{i18n.t('components.customer.customer-tabs.text_47')}</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((m) => (
              <tr key={m.id} className="border-b border-border/60">
                <td className="py-2 font-semibold">{m.reference ?? "—"}</td>
                <td className="py-2">
                  <StatusBadge tone={m.direction === "in" ? "success" : "neutral"} size="sm">
                    {m.direction === "in" ? i18n.t('components.customer.customer-tabs.text_27') : i18n.t('components.customer.customer-tabs.text_28')}
                  </StatusBadge>
                </td>
                <td className="py-2 tabular-nums">{asset === "cash" ? formatMoney(m.amount) : formatNumber(m.amount, 2) + " g"}</td>
                <td className="py-2 tabular-nums text-muted-foreground">{asset === "cash" ? formatMoney(m.balance_after) : formatNumber(m.balance_after, 2)}</td>
                <td className="py-2 text-muted-foreground">{m.status}</td>
                <td className="py-2 text-muted-foreground text-left">{timeAgo(m.created_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}

function TableOrders({ rows }: { rows: any[] }) {
  return (
    <div>
      <h3 className="text-[13.5px] font-bold mb-3">{i18n.t('components.customer.customer-tabs.text_48')}</h3>
      {rows.length === 0 ? (
        <p className="text-[12.5px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_49')}</p>
      ) : (
        <table className="w-full text-right text-[12.5px]">
          <thead className="border-b border-border">
            <tr className="text-[11px] uppercase text-muted-foreground">
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_50')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_51')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_52')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_53')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_54')}</th>
              <th className="py-2 text-left">{i18n.t('components.customer.customer-tabs.text_55')}</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((o) => (
              <tr key={o.id} className="border-b border-border/60">
                <td className="py-2 font-semibold text-gold-700">{o.order_code}</td>
                <td className="py-2">{o.side === "buy" ? i18n.t('components.customer.customer-tabs.text_29') : i18n.t('components.customer.customer-tabs.text_30')}</td>
                <td className="py-2 tabular-nums">{formatNumber(o.quantity, 2)} g</td>
                <td className="py-2 tabular-nums">{formatMoney(o.total_amount)}</td>
                <td className="py-2">
                  <StatusBadge
                    tone={o.status === "completed" ? "success" : o.status === "failed" ? "danger" : o.status === "pending" ? "pending" : "warning"}
                    size="sm"
                  >
                    {o.status}
                  </StatusBadge>
                </td>
                <td className="py-2 text-muted-foreground text-left">{timeAgo(o.created_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}

function TableTransfers({ rows, customerId }: { rows: any[]; customerId: string }) {
  return (
    <div>
      <h3 className="text-[13.5px] font-bold mb-3">{i18n.t('components.customer.customer-tabs.text_56')}</h3>
      {rows.length === 0 ? (
        <p className="text-[12.5px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_57')}</p>
      ) : (
        <table className="w-full text-right text-[12.5px]">
          <thead className="border-b border-border">
            <tr className="text-[11px] uppercase text-muted-foreground">
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_58')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_59')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_60')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_61')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_62')}</th>
              <th className="py-2 text-left">{i18n.t('components.customer.customer-tabs.text_63')}</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((t) => (
              <tr key={t.id} className="border-b border-border/60">
                <td className="py-2 font-semibold">{t.transfer_code}</td>
                <td className="py-2">{t.sender_id === customerId ? i18n.t('components.customer.customer-tabs.text_31') : i18n.t('components.customer.customer-tabs.text_32')}</td>
                <td className="py-2">{t.asset === "gold" ? i18n.t('components.customer.customer-tabs.text_33') : i18n.t('components.customer.customer-tabs.text_34')}</td>
                <td className="py-2 tabular-nums">{formatNumber(t.quantity, 2)}</td>
                <td className="py-2">
                  <StatusBadge
                    tone={t.status === "successful" ? "success" : t.status === "failed" ? "danger" : t.status === "flagged" ? "danger" : "pending"}
                    size="sm"
                  >
                    {t.status}
                  </StatusBadge>
                </td>
                <td className="py-2 text-muted-foreground text-left">{timeAgo(t.initiated_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}

function TableRedemptions({ rows }: { rows: any[] }) {
  return (
    <div>
      <h3 className="text-[13.5px] font-bold mb-3">{i18n.t('components.customer.customer-tabs.text_64')}</h3>
      {rows.length === 0 ? (
        <p className="text-[12.5px] text-muted-foreground">{i18n.t('components.customer.customer-tabs.text_65')}</p>
      ) : (
        <table className="w-full text-right text-[12.5px]">
          <thead className="border-b border-border">
            <tr className="text-[11px] uppercase text-muted-foreground">
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_66')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_67')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_68')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_69')}</th>
              <th className="py-2">{i18n.t('components.customer.customer-tabs.text_70')}</th>
              <th className="py-2 text-left">{i18n.t('components.customer.customer-tabs.text_71')}</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.id} className="border-b border-border/60">
                <td className="py-2 font-semibold">{r.code}</td>
                <td className="py-2">{r.product_name}</td>
                <td className="py-2 tabular-nums">{r.units}</td>
                <td className="py-2 tabular-nums">{formatNumber(r.weight_grams, 2)} g</td>
                <td className="py-2">
                  <StatusBadge
                    tone={r.status === "delivered" ? "success" : r.status === "blocked" ? "danger" : r.status === "shipped" ? "processing" : "pending"}
                    size="sm"
                  >
                    {r.status}
                  </StatusBadge>
                </td>
                <td className="py-2 text-muted-foreground text-left">{timeAgo(r.requested_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}
