import { auth } from '@/lib/auth'
import { mockDb } from '@/lib/mockDb'
import { Link } from '@/i18n/routing'
import { FileText, Inbox, ClipboardList, Map, Clock } from 'lucide-react'

export default async function AdminDashboardPage() {
  const session = await auth()

  // Load stats
  const listings = await mockDb.getListings()
  const submissions = await mockDb.getSubmissions()
  const messages = await mockDb.getMessages()
  const categories = await mockDb.getCategories()
  const neighborhoods = await mockDb.getNeighborhoods()

  const pendingSubmissions = submissions.filter(s => s.status === 'PENDING')
  const unreadMessages = messages.filter(m => !m.isRead)

  const stats = [
    { name: 'Toplam Mekan', stat: listings.length.toString(), icon: ClipboardList, color: 'text-pine bg-stone-deep border-pine/8' },
    { name: 'Bekleyen Başvuru', stat: pendingSubmissions.length.toString(), icon: FileText, color: 'text-gold bg-paper border-gold/15' },
    { name: 'Okunmamış Mesaj', stat: unreadMessages.length.toString(), icon: Inbox, color: 'text-turquoise bg-stone-deep border-turquoise/15' },
    { name: 'Kategori / Bölge', stat: `${categories.length} / ${neighborhoods.length}`, icon: Map, color: 'text-shutter bg-paper border-shutter/15' },
  ]

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-3xl font-heading font-extrabold text-pine lowercase">dashboard</h2>
        <p className="text-ink/65 text-xs font-medium mt-1">
          Hoş geldiniz, {session?.user?.name || session?.user?.email}. Marmaris Local için genel rehber durumu.
        </p>
      </div>

      {/* Stats grid */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((item) => (
          <div
            key={item.name}
            className="bg-paper rounded-2xl border border-pine/8 p-5 shadow-sm flex items-center gap-4 hover:border-turquoise/30 transition-all duration-300"
          >
            <div className={`p-3.5 rounded-xl border ${item.color}`}>
              <item.icon className="h-5 w-5" />
            </div>
            <div>
              <dt className="truncate text-[10px] font-mono uppercase tracking-wider text-shutter">{item.name}</dt>
              <dd className="mt-1 text-2xl font-heading font-extrabold text-pine">
                {item.stat}
              </dd>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        {/* Recent Submissions */}
        <div className="bg-paper border border-pine/8 rounded-2xl shadow-sm p-6 sm:p-8 space-y-6">
          <div className="flex items-center justify-between border-b border-dashed border-pine/8 pb-4">
            <h3 className="text-lg font-heading font-bold text-pine lowercase flex items-center gap-2">
              <Clock className="w-5 h-5 text-gold" />
              onay bekleyen başvurular
            </h3>
            <Link href="/admin/submissions" className="text-xs font-mono font-bold text-turquoise hover:underline uppercase tracking-wide">
              tümünü gör
            </Link>
          </div>

          <div className="divide-y divide-dashed divide-pine/8">
            {pendingSubmissions.length === 0 ? (
              <div className="py-8 text-center text-xs text-shutter font-medium">
                Onay bekleyen yeni işletme başvurusu bulunmuyor.
              </div>
            ) : (
              pendingSubmissions.slice(0, 5).map((sub) => (
                <div key={sub.id} className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
                  <div className="space-y-1">
                    <h4 className="font-heading font-bold text-sm text-pine lowercase">{sub.businessName}</h4>
                    <p className="text-xs text-ink/65 font-medium">{sub.contactName} ({sub.contactEmail})</p>
                  </div>
                  <span className="inline-flex items-center rounded-full bg-paper px-3 py-1 text-[10px] font-mono font-bold text-gold border border-gold/20 uppercase">
                    Bekliyor
                  </span>
                </div>
              ))
            )}
          </div>
        </div>

        {/* Recent Messages */}
        <div className="bg-paper border border-pine/8 rounded-2xl shadow-sm p-6 sm:p-8 space-y-6">
          <div className="flex items-center justify-between border-b border-dashed border-pine/8 pb-4">
            <h3 className="text-lg font-heading font-bold text-pine lowercase flex items-center gap-2">
              <Inbox className="w-5 h-5 text-turquoise" />
              okunmamış mesajlar
            </h3>
            <Link href="/admin/messages" className="text-xs font-mono font-bold text-turquoise hover:underline uppercase tracking-wide">
              tümünü gör
            </Link>
          </div>

          <div className="divide-y divide-dashed divide-pine/8">
            {unreadMessages.length === 0 ? (
              <div className="py-8 text-center text-xs text-shutter font-medium">
                Okunmamış yeni mesaj bulunmuyor.
              </div>
            ) : (
              unreadMessages.slice(0, 5).map((msg) => (
                <div key={msg.id} className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
                  <div className="space-y-1 pr-4 flex-1">
                    <h4 className="font-heading font-bold text-sm text-pine lowercase">{msg.name}</h4>
                    <p className="text-xs text-ink/70 font-medium line-clamp-1">{msg.message}</p>
                  </div>
                  <span className="text-[10px] text-shutter font-mono shrink-0">
                    {new Date(msg.createdAt).toLocaleDateString('tr-TR')}
                  </span>
                </div>
              ))
            )}
          </div>
        </div>

      </div>
    </div>
  )
}