import { prisma } from '@/lib/db'
import { MOCK_MESSAGES } from '@/lib/mock'
import { Mail, Phone, Clock } from 'lucide-react'

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

async function getMessages() {
  if (USE_MOCK) return MOCK_MESSAGES
  return prisma.contactMessage.findMany({
    where: { deletedAt: null },
    orderBy: { createdAt: 'desc' },
  })
}

export default async function MessagesPage() {
  const messages = await getMessages()

  return (
    <div>
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-semibold text-gray-900">Mesajlar</h1>
          <p className="text-gray-400 text-sm mt-1">
            {messages.filter((m) => !m.read).length} okunmamış mesaj
          </p>
        </div>
      </div>

      <div className="space-y-4">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`bg-white rounded-2xl p-6 shadow-sm border-l-4 ${
              !msg.read ? 'border-vesta-earth' : 'border-transparent'
            }`}
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <h3 className="font-medium text-gray-900">{msg.fullName}</h3>
                <div className="flex items-center gap-4 mt-1">
                  <a
                    href={`mailto:${msg.email}`}
                    className="flex items-center gap-1 text-gray-400 hover:text-gray-600 text-sm"
                  >
                    <Mail className="w-3.5 h-3.5" />
                    {msg.email}
                  </a>
                  {msg.phone && (
                    <a
                      href={`tel:${msg.phone}`}
                      className="flex items-center gap-1 text-gray-400 hover:text-gray-600 text-sm"
                    >
                      <Phone className="w-3.5 h-3.5" />
                      {msg.phone}
                    </a>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-1 text-gray-300 text-xs">
                <Clock className="w-3.5 h-3.5" />
                {new Date(msg.createdAt).toLocaleDateString('tr-TR')}
              </div>
            </div>
            <p className="text-gray-600 text-sm leading-relaxed">{msg.message}</p>
            {!msg.read && (
              <span className="inline-block mt-3 text-xs bg-vesta-earth/10 text-vesta-earth px-2 py-0.5 rounded-full">
                Yeni
              </span>
            )}
          </div>
        ))}

        {messages.length === 0 && (
          <div className="text-center py-16 text-gray-300">
            <Mail className="w-10 h-10 mx-auto mb-3 opacity-30" />
            <p>Henüz mesaj yok</p>
          </div>
        )}
      </div>
    </div>
  )
}