import { auth } from '../../../auth'
import { prisma } from '@peyzajart/db'
import Link from 'next/link'
import { formatTL } from '../../../lib/format'

export const dynamic = 'force-dynamic'

const STATUS_LABELS: Record<string, string> = {
  PENDING: 'Beklemede',
  CONFIRMED: 'Onaylandı',
  PREPARING: 'Hazırlanıyor',
  SHIPPED: 'Kargoya Verildi',
  DELIVERED: 'Teslim Edildi',
  CANCELLED: 'İptal Edildi',
}

const STATUS_COLORS: Record<string, string> = {
  PENDING: 'bg-yellow-100 text-yellow-800',
  CONFIRMED: 'bg-blue-100 text-blue-800',
  PREPARING: 'bg-purple-100 text-purple-800',
  SHIPPED: 'bg-orange-100 text-orange-800',
  DELIVERED: 'bg-green-100 text-green-800',
  CANCELLED: 'bg-red-100 text-red-800',
}

const PAYMENT_LABELS: Record<string, string> = {
  ONLINE: 'İyzico',
  BANK_TRANSFER: 'Havale/EFT',
}

const PAYMENT_STATUS_LABELS: Record<string, string> = {
  WAITING: 'Ödeme Bekleniyor',
  PAID: 'Ödendi',
  FAILED: 'Başarısız',
}

export default async function OrdersPage() {
  const session = await auth()
  const dealerId = session!.user.dealerId

  const orders = await prisma.order.findMany({
    where: { dealerId },
    orderBy: { createdAt: 'desc' },
    include: {
      items: { select: { quantity: true } },
    },
  })

  return (
    <div className="p-6 md:p-8">
      <div className="mb-8">
        <h1 className="font-display text-4xl font-light text-brown">Siparişlerim</h1>
        <p className="font-body text-sm text-brown/50 mt-1">{orders.length} sipariş</p>
      </div>

      {orders.length === 0 ? (
        <div className="bg-white p-12 text-center shadow-sm rounded-xl">
          <p className="font-display text-2xl text-brown/40 mb-4">Henüz sipariş yok</p>
            <Link
              href="/bayi/products"
              className="inline-block px-6 py-2 rounded-lg bg-brown text-cream font-body text-sm tracking-widest uppercase hover:bg-earth transition-colors"
            >
              Ürünleri İncele
            </Link>
          </div>
        ) : (
          <div className="bg-white shadow-sm rounded-xl overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-sand border-b border-sand">
                    <th className="text-left px-6 py-3 font-body text-xs text-brown/50 tracking-widest uppercase">
                      Sipariş No
                    </th>
                    <th className="text-left px-6 py-3 font-body text-xs text-brown/50 tracking-widest uppercase">
                      Tarih
                    </th>
                    <th className="text-left px-6 py-3 font-body text-xs text-brown/50 tracking-widest uppercase">
                      Kalem
                    </th>
                    <th className="text-left px-6 py-3 font-body text-xs text-brown/50 tracking-widest uppercase">
                      Toplam
                    </th>
                    <th className="text-left px-6 py-3 font-body text-xs text-brown/50 tracking-widest uppercase">
                      Ödeme
                    </th>
                    <th className="text-left px-6 py-3 font-body text-xs text-brown/50 tracking-widest uppercase">
                      Durum
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-sand">
                  {orders.map((order) => {
                    const totalQty = order.items.reduce((s, i) => s + i.quantity, 0)
                    return (
                      <tr key={order.id} className="hover:bg-sand/30 transition-colors">
                        <td className="px-6 py-4">
                          <Link
                            href={`/bayi/orders/${order.orderNo}`}
                            className="font-body text-sm font-medium text-brown hover:text-earth transition-colors"
                          >
                            {order.orderNo}
                          </Link>
                        </td>
                        <td className="px-6 py-4 font-body text-sm text-brown/60">
                          {new Date(order.createdAt).toLocaleDateString('tr-TR')}
                        </td>
                        <td className="px-6 py-4 font-body text-sm text-brown/60">
                          {totalQty} adet
                        </td>
                        <td className="px-6 py-4 font-body text-sm text-brown">
                          {formatTL(order.totalUSD)}
                        </td>
                        <td className="px-6 py-4 font-body text-xs text-brown/60">
                          {PAYMENT_LABELS[order.paymentMethod]} —{' '}
                          {PAYMENT_STATUS_LABELS[order.paymentStatus]}
                        </td>
                        <td className="px-6 py-4">
                          <span
                            className={`px-2 py-1 rounded-full font-body text-xs ${STATUS_COLORS[order.status] ?? ''}`}
                          >
                            {STATUS_LABELS[order.status] ?? order.status}
                          </span>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}
    </div>
  )
}