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',
}

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

  const [totalOrders, pendingOrders, recentOrders] = await Promise.all([
    prisma.order.count({ where: { dealerId } }),
    prisma.order.count({ where: { dealerId, status: 'PENDING' } }),
    prisma.order.findMany({
      where: { dealerId },
      orderBy: { createdAt: 'desc' },
      take: 5,
      select: {
        orderNo: true,
        totalUSD: true,
        status: true,
        createdAt: true,
      },
    }),
  ])

  return (
    <div className="p-6 md:p-8 max-w-5xl">
      <div className="mb-8">
        <h1 className="font-display text-4xl font-light text-brown">Dashboard</h1>
        <p className="font-body text-sm text-brown/50 mt-1">
          Hoş geldiniz, {session!.user.companyName}
        </p>
      </div>

      {/* Özet kartlar */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-10">
        <div className="bg-white p-6 shadow-sm rounded-xl">
          <p className="font-body text-xs text-brown/50 tracking-widest uppercase mb-2">
            Toplam Sipariş
          </p>
          <p className="font-display text-4xl text-brown">{totalOrders}</p>
        </div>
        <div className="bg-white p-6 shadow-sm rounded-xl">
          <p className="font-body text-xs text-brown/50 tracking-widest uppercase mb-2">
            Bekleyen
          </p>
          <p className="font-display text-4xl text-earth">{pendingOrders}</p>
        </div>
        <div className="bg-white p-6 shadow-sm rounded-xl flex flex-col justify-between">
          <p className="font-body text-xs text-brown/50 tracking-widest uppercase mb-2">
            Hızlı İşlem
          </p>
          <Link
            href="/bayi/products"
            className="mt-2 inline-block px-4 py-2 rounded-lg bg-brown text-cream font-body text-xs tracking-widest uppercase hover:bg-earth transition-colors text-center"
          >
            Yeni Sipariş →
          </Link>
        </div>
      </div>

      {/* Son siparişler */}
      <div className="bg-white shadow-sm rounded-xl overflow-hidden">
        <div className="px-6 py-4 border-b border-sand flex items-center justify-between">
          <h2 className="font-display text-xl text-brown">Son Siparişler</h2>
          <Link href="/bayi/orders" className="font-body text-xs text-earth hover:text-brown transition-colors">
            Tümünü Gör →
          </Link>
        </div>

        {recentOrders.length === 0 ? (
          <p className="font-body text-sm text-brown/40 p-6">Henüz sipariş yok.</p>
        ) : (
          <ul className="divide-y divide-sand">
            {recentOrders.map((order) => (
              <li key={order.orderNo}>
                <Link
                  href={`/bayi/orders/${order.orderNo}`}
                  className="flex items-center justify-between px-6 py-4 hover:bg-sand/50 transition-colors"
                >
                  <div>
                    <p className="font-body text-sm font-medium text-brown">
                      {order.orderNo}
                    </p>
                    <p className="font-body text-xs text-brown/40 mt-0.5">
                      {new Date(order.createdAt).toLocaleDateString('tr-TR')}
                    </p>
                  </div>
                  <div className="flex items-center gap-4">
                    <span
                      className={`px-2 py-0.5 rounded-full font-body text-xs ${STATUS_COLORS[order.status] ?? ''}`}
                    >
                      {STATUS_LABELS[order.status] ?? order.status}
                    </span>
                    <span className="font-body text-sm text-brown">
                      {formatTL(order.totalUSD)}
                    </span>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}