import { prisma } from '@peyzajart/db'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import AdminOrderActions from '../../../../components/AdminOrderActions'
import { formatTL } from '../../../../lib/format'

export const dynamic = 'force-dynamic'

interface Props { params: { orderNo: string } }

export default async function AdminOrderDetailPage({ params }: Props) {
  const order = await prisma.order.findUnique({
    where: { orderNo: params.orderNo },
    include: {
      dealer: { select: { id: true, companyName: true, dealerCode: true, email: true, phone: true, discountRate: true } },
      items: { include: { product: { select: { nameTr: true, size: true, slug: true } } } },
    },
  })
  if (!order) notFound()

  return (
    <div className="p-6 md:p-8 max-w-4xl">
      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <Link href="/admin/orders" className="font-body text-xs text-earth hover:text-brown transition-colors">← Siparişler</Link>
          <h1 className="font-display text-3xl font-light text-brown mt-2">{order.orderNo}</h1>
          <p className="font-body text-sm text-brown/50 mt-1">
            {order.dealer.companyName} ({order.dealer.dealerCode}) &nbsp;·&nbsp;
            {new Date(order.createdAt).toLocaleDateString('tr-TR', { day:'numeric', month:'long', year:'numeric', hour:'2-digit', minute:'2-digit' })}
          </p>
        </div>
      </div>

      {/* Bayi bilgisi */}
      <div className="bg-white p-5 shadow-sm rounded-xl mb-6">
        <h2 className="font-display text-lg text-brown border-b border-sand pb-2 mb-3">Bayi Bilgisi</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 font-body text-sm">
          <p><span className="text-brown/50">Firma: </span><span className="text-brown">{order.dealer.companyName}</span></p>
          <p><span className="text-brown/50">Bayi Kodu: </span><span className="font-mono text-earth">{order.dealer.dealerCode}</span></p>
          <p><span className="text-brown/50">İndirim: </span><span className="text-brown">{order.dealer.discountRate > 0 ? `%${order.dealer.discountRate}` : '—'}</span></p>
          <p><span className="text-brown/50">E-posta: </span><span className="text-brown">{order.dealer.email}</span></p>
          <p><span className="text-brown/50">Telefon: </span><span className="text-brown">{order.dealer.phone ?? '—'}</span></p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Sol: ürünler */}
        <div className="lg:col-span-2 space-y-4">
          <div className="bg-white shadow-sm rounded-xl overflow-hidden">
            <div className="px-6 py-4 border-b border-sand">
              <h2 className="font-display text-xl text-brown">Sipariş Kalemleri</h2>
            </div>
            <table className="w-full">
              <thead>
                <tr className="border-b border-sand">
                  {['Ürün', 'Adet', 'Birim', 'Toplam'].map(h => (
                    <th key={h} className="px-5 py-3 text-left font-body text-xs text-brown/50 uppercase tracking-widest">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-sand">
                {order.items.map(item => (
                  <tr key={item.id}>
                    <td className="px-5 py-3">
                      <p className="font-body text-sm text-brown">{item.product.nameTr}</p>
                      {item.product.size && <p className="font-body text-xs text-brown/40">{item.product.size}</p>}
                    </td>
                    <td className="px-5 py-3 font-body text-sm text-brown">{item.quantity}</td>
                    <td className="px-5 py-3 font-body text-sm text-brown">{formatTL(item.unitPrice)}</td>
                    <td className="px-5 py-3 font-body text-sm font-medium text-brown">{formatTL(item.quantity * item.unitPrice)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr className="border-t border-brown/10 bg-sand/40">
                  <td colSpan={3} className="px-5 py-3 font-body text-sm font-medium text-right text-brown">TOPLAM</td>
                  <td className="px-5 py-3 font-display text-lg text-brown">{formatTL(order.totalUSD)}</td>
                </tr>
              </tfoot>
            </table>
          </div>

          {/* Adres + not */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="bg-white p-5 shadow-sm rounded-xl">
              <h3 className="font-display text-lg text-brown border-b border-sand pb-2 mb-3">Teslimat</h3>
              <p className="font-body text-sm text-brown/70 whitespace-pre-wrap">{order.shippingAddress}</p>
            </div>
            {order.notes && (
              <div className="bg-white p-5 shadow-sm rounded-xl">
                <h3 className="font-display text-lg text-brown border-b border-sand pb-2 mb-3">Not</h3>
                <p className="font-body text-sm text-brown/70">{order.notes}</p>
              </div>
            )}
          </div>
        </div>

        {/* Sağ: aksiyonlar */}
        <AdminOrderActions
          orderNo={order.orderNo}
          currentStatus={order.status}
          paymentMethod={order.paymentMethod}
          paymentStatus={order.paymentStatus}
        />
      </div>
    </div>
  )
}