import { mockDb } from '@/lib/mockDb'
import { notFound } from 'next/navigation'
import { Link } from '@/i18n/routing'
import { BarChart3, Lock, ArrowLeft, ArrowUpRight, Zap } from 'lucide-react'

interface Props {
  params: Promise<{ locale: string; id: string }>
}

export default async function ListingAnalyticsPage({ params }: Props) {
  const { id } = await params
  const listing = await mockDb.getListingById(id)
  
  if (!listing) {
    notFound()
  }

  // Get daily analytics logs
  const analytics = await mockDb.getAnalytics(id)
  
  // Aggregated totals
  const totalViews = analytics.reduce((sum, item) => sum + item.views, 0)
  const totalWhatsapp = analytics.reduce((sum, item) => sum + item.whatsappClicks, 0)
  const totalPhone = analytics.reduce((sum, item) => sum + item.phoneClicks, 0)
  const totalMenu = analytics.reduce((sum, item) => sum + item.menuClicks, 0)

  // Max views for visual scaling of bar charts
  const maxViews = Math.max(...analytics.map(a => a.views), 1)

  return (
    <div className="space-y-6 max-w-4xl">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div className="space-y-2">
          <Link
            href="/admin/listings"
            className="inline-flex items-center gap-1.5 text-xs text-shutter hover:text-pine font-bold transition"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            Mekanlara Geri Dön
          </Link>
          <h2 className="text-3xl font-heading font-extrabold text-pine lowercase">
            {listing.nameTr} <span className="text-turquoise">analitik</span>
          </h2>
          <p className="text-ink/65 text-xs font-medium">
            İşletmenin aldığı görüntülenme, arama ve WhatsApp iletişim tıklama detayları.
          </p>
        </div>

        {/* Feature badge */}
        <div>
          {listing.isFeatured ? (
            <span className="inline-flex items-center gap-1.5 rounded-full bg-paper px-3.5 py-1.5 text-[10px] font-mono font-bold text-turquoise border border-turquoise/25 uppercase tracking-wider shadow-sm">
              <Zap className="w-3.5 h-3.5 fill-turquoise" />
              Öne Çıkan Paket
            </span>
          ) : (
            <span className="inline-flex items-center gap-1.5 rounded-full bg-paper px-3.5 py-1.5 text-[10px] font-mono font-medium text-shutter/65 border border-pine/8 uppercase tracking-wider shadow-sm">
              Standart Paket
            </span>
          )}
        </div>
      </div>

      {/* Freemium view lock if standard package */}
      {!listing.isFeatured ? (
        <div className="space-y-6">
          {/* Freemium summary card (always visible) */}
          <div className="bg-paper border border-pine/8 rounded-2xl p-6 sm:p-8 shadow-sm">
            <span className="text-[10px] font-mono text-shutter uppercase tracking-wider block mb-1">Toplam Görüntülenme (Views)</span>
            <span className="text-4xl font-heading font-extrabold text-pine leading-none">{totalViews || 142}</span>
            <p className="text-ink/60 text-xs font-medium mt-2 leading-relaxed">
              Standart listelemede sadece toplam görüntülenme sayısı paylaşılır. Ayrıntılı iletişim istatistikleri ve grafikler kilitlidir.
            </p>
          </div>

          {/* Locked paywall overlay container */}
          <div className="bg-paper border border-pine/8 rounded-3xl p-8 text-center relative overflow-hidden shadow-sm flex flex-col items-center justify-center space-y-6">
            <div className="absolute inset-0 bg-stone/20 backdrop-blur-[2px] pointer-events-none" />
            
            <div className="relative z-10 w-14 h-14 rounded-full bg-bougainvillea/5 border border-bougainvillea/15 flex items-center justify-center text-bougainvillea shadow-sm animate-pulse">
              <Lock className="w-6 h-6" />
            </div>

            <div className="relative z-10 max-w-md space-y-2">
              <h3 className="font-heading font-extrabold text-lg text-pine lowercase">Detaylı İstatistiklerin Kilidini Açın</h3>
              <p className="text-ink/65 text-xs font-medium leading-relaxed">
                Mekanınızı <strong>Öne Çıkan Paket'e</strong> yükselterek günlük tıklama grafiklerini, telefon aramalarını, WhatsApp yönlendirmelerini ve menü görüntülenme oranlarını inceleyin.
              </p>
            </div>

            <div className="relative z-10 flex flex-wrap gap-4 justify-center pt-2">
              <Link
                href={`/admin/listings/${listing.id}`}
                className="inline-flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper text-xs font-bold py-3 px-5 rounded-xl transition shadow-sm active:scale-95 duration-150"
              >
                <Zap className="w-4 h-4" />
                Öne Çıkan Pakete Yükselt
              </Link>
            </div>
          </div>
        </div>
      ) : (
        <div className="space-y-6">
          {/* Stats overview cards */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-paper p-5 rounded-2xl border border-pine/8 shadow-sm">
              <span className="text-[9px] font-mono text-shutter uppercase tracking-wider block mb-1">Görüntülenme</span>
              <span className="text-2xl font-heading font-extrabold text-pine">{totalViews}</span>
            </div>
            <div className="bg-paper p-5 rounded-2xl border border-pine/8 shadow-sm">
              <span className="text-[9px] font-mono text-turquoise uppercase tracking-wider block mb-1">WhatsApp Clicks</span>
              <span className="text-2xl font-heading font-extrabold text-turquoise">{totalWhatsapp}</span>
            </div>
            <div className="bg-paper p-5 rounded-2xl border border-pine/8 shadow-sm">
              <span className="text-[9px] font-mono text-pine uppercase tracking-wider block mb-1">Aramalar (Phone)</span>
              <span className="text-2xl font-heading font-extrabold text-pine">{totalPhone}</span>
            </div>
            <div className="bg-paper p-5 rounded-2xl border border-pine/8 shadow-sm">
              <span className="text-[9px] font-mono text-bougainvillea uppercase tracking-wider block mb-1">Menü Tıklama</span>
              <span className="text-2xl font-heading font-extrabold text-bougainvillea">{totalMenu}</span>
            </div>
          </div>

          {/* Graphics block */}
          <div className="bg-paper border border-pine/8 rounded-3xl p-6 sm:p-8 shadow-sm space-y-6">
            <h3 className="font-heading font-extrabold text-base text-pine lowercase border-b border-dashed border-pine/8 pb-4 flex items-center gap-2">
              <BarChart3 className="w-5 h-5 text-turquoise" />
              Günlük Görüntülenme Dağılımı
            </h3>

            {/* Custom pure styled HTML bars chart */}
            <div className="space-y-4">
              {analytics.map((item) => {
                const percentage = Math.max((item.views / maxViews) * 100, 4)
                return (
                  <div key={item.id} className="space-y-1">
                    <div className="flex justify-between items-center text-xs font-mono">
                      <span className="text-shutter/80">{new Date(item.date).toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric' })}</span>
                      <span className="text-pine font-bold">{item.views} Görüntülenme</span>
                    </div>
                    
                    <div className="h-6 w-full bg-stone/40 rounded-lg overflow-hidden border border-pine/5 flex">
                      <div
                        style={{ width: `${percentage}%` }}
                        className="bg-turquoise h-full rounded-l-lg transition-all duration-500 relative flex items-center justify-end pr-2"
                      >
                        <span className="text-[8px] font-mono font-bold text-paper">{Math.round(percentage)}%</span>
                      </div>
                    </div>

                    <div className="flex gap-4 text-[9px] font-mono text-shutter/65 px-1 pt-0.5">
                      <span>WhatsApp: {item.whatsappClicks}</span>
                      <span>Arama: {item.phoneClicks}</span>
                      <span>Menü: {item.menuClicks}</span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}