import { prisma } from '@/lib/db'
import { MOCK_UNITS } from '@/lib/mock'
import { BedDouble, Maximize2, CheckCircle2, XCircle } from 'lucide-react'
import Image from 'next/image'

const USE_MOCK = process.env.USE_MOCK === 'true'

async function getUnits() {
  if (USE_MOCK) return MOCK_UNITS
  return prisma.unit.findMany({ where: { deletedAt: null }, orderBy: { order: 'asc' } })
}

export default async function UnitsAdminPage() {
  const units = await getUnits()

  return (
    <div>
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-semibold text-gray-900">Daireler</h1>
          <p className="text-gray-400 text-sm mt-1">{units.length} daire tipi</p>
        </div>
        <button className="bg-vesta-dark text-white px-5 py-2.5 rounded-xl text-sm hover:bg-vesta-forest transition-colors">
          + Yeni Daire
        </button>
      </div>

      <div className="grid gap-4">
        {units.map((unit) => (
          <div key={unit.id} className="bg-white rounded-2xl p-5 shadow-sm flex items-center gap-6">
            {unit.imageUrl && (
              <div className="w-20 h-20 rounded-xl overflow-hidden shrink-0">
                <Image
                  src={unit.imageUrl}
                  alt={unit.typeTr}
                  width={80}
                  height={80}
                  className="w-full h-full object-cover"
                />
              </div>
            )}
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-1">
                <h3 className="font-medium text-gray-900">{unit.typeTr}</h3>
                {unit.available ? (
                  <span className="flex items-center gap-1 text-green-600 text-xs">
                    <CheckCircle2 className="w-3.5 h-3.5" /> Müsait
                  </span>
                ) : (
                  <span className="flex items-center gap-1 text-gray-400 text-xs">
                    <XCircle className="w-3.5 h-3.5" /> Satıldı
                  </span>
                )}
              </div>
              <div className="flex items-center gap-4 text-gray-400 text-sm">
                <span className="flex items-center gap-1">
                  <Maximize2 className="w-3.5 h-3.5" /> {unit.size} m²
                </span>
                <span className="flex items-center gap-1">
                  <BedDouble className="w-3.5 h-3.5" /> {unit.rooms} oda
                </span>
              </div>
            </div>
            <button className="text-gray-400 hover:text-gray-600 text-sm px-3 py-1.5 border border-gray-200 rounded-lg transition-colors">
              Düzenle
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}