'use client'

import { useEffect, useState } from 'react'
import {
  Building2, Users, DollarSign, CreditCard, LifeBuoy, TrendingUp
} from 'lucide-react'
import { TICKET_PRIORITIES, TICKET_STATUSES, SUBSCRIPTION_STATUSES } from '@/lib/constants'

function formatCurrency(amount: number | string): string {
  const num = typeof amount === 'string' ? parseFloat(amount) : amount
  return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(num)
}

interface DashboardData {
  stats: {
    totalTenants: number
    activeTenants: number
    totalRevenue: number
    activeSubscriptions: number
    openTickets: number
    newTenantsThisMonth: number
  }
  recentTenants: any[]
  recentTickets: any[]
}

export default function SuperAdminDashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/superadmin/dashboard')
      .then(res => res.json())
      .then(setData)
      .catch(console.error)
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  if (!data) return <div className="text-center text-gray-500">Gagal memuat data</div>

  const stats = [
    { name: 'Total Tenant', value: data.stats.totalTenants, icon: Building2, color: 'bg-blue-100 text-blue-600' },
    { name: 'Tenant Aktif', value: data.stats.activeTenants, icon: Users, color: 'bg-green-100 text-green-600' },
    { name: 'Pendapatan Bulan Ini', value: formatCurrency(data.stats.totalRevenue), icon: DollarSign, color: 'bg-emerald-100 text-emerald-600' },
    { name: 'Langganan Aktif', value: data.stats.activeSubscriptions, icon: CreditCard, color: 'bg-purple-100 text-purple-600' },
    { name: 'Tiket Terbuka', value: data.stats.openTickets, icon: LifeBuoy, color: 'bg-orange-100 text-orange-600' },
    { name: 'Tenant Baru', value: data.stats.newTenantsThisMonth, icon: TrendingUp, color: 'bg-indigo-100 text-indigo-600' },
  ]

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-600 mt-1">Ringkasan platform RestoMenu.</p>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        {stats.map((stat, idx) => (
          <div key={idx} className="card">
            <div className="flex items-center gap-3">
              <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${stat.color}`}>
                <stat.icon className="w-5 h-5" />
              </div>
              <div>
                <p className="text-sm text-gray-600">{stat.name}</p>
                <p className="text-xl font-bold text-gray-900">{stat.value}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Tenant Terbaru */}
      <div className="card mb-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Tenant Terbaru</h2>
        {data.recentTenants.length === 0 ? (
          <p className="text-gray-500 text-center py-8">Belum ada tenant</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Nama</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Paket</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Status</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Dibuat</th>
                </tr>
              </thead>
              <tbody>
                {data.recentTenants.map((tenant: any) => {
                  const sub = tenant.subscriptions?.[0]
                  return (
                    <tr key={tenant.id} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="py-3 px-3 font-medium text-gray-900">{tenant.name}</td>
                      <td className="py-3 px-3">
                        {sub?.plan?.name ? (
                          <span className="badge bg-indigo-100 text-indigo-800">{sub.plan.name}</span>
                        ) : (
                          <span className="text-gray-400">-</span>
                        )}
                      </td>
                      <td className="py-3 px-3">
                        <span className={`badge ${tenant.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                          {tenant.isActive ? 'Aktif' : 'Nonaktif'}
                        </span>
                      </td>
                      <td className="py-3 px-3 text-gray-500">
                        {new Date(tenant.createdAt).toLocaleDateString('id-ID', {
                          day: 'numeric',
                          month: 'short',
                          year: 'numeric',
                        })}
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Tiket Terbaru */}
      <div className="card">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Tiket Terbaru</h2>
        {data.recentTickets.length === 0 ? (
          <p className="text-gray-500 text-center py-8">Belum ada tiket</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Subject</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Tenant</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Prioritas</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Status</th>
                  <th className="text-left py-3 px-3 font-medium text-gray-600">Dibuat</th>
                </tr>
              </thead>
              <tbody>
                {data.recentTickets.map((ticket: any) => (
                  <tr key={ticket.id} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="py-3 px-3 font-medium text-gray-900">{ticket.subject}</td>
                    <td className="py-3 px-3 text-gray-600">{ticket.tenant?.name || '-'}</td>
                    <td className="py-3 px-3">
                      <span className={`badge ${TICKET_PRIORITIES[ticket.priority]?.color || 'bg-gray-100 text-gray-800'}`}>
                        {TICKET_PRIORITIES[ticket.priority]?.label || ticket.priority}
                      </span>
                    </td>
                    <td className="py-3 px-3">
                      <span className={`badge ${TICKET_STATUSES[ticket.status]?.color || 'bg-gray-100 text-gray-800'}`}>
                        {TICKET_STATUSES[ticket.status]?.label || ticket.status}
                      </span>
                    </td>
                    <td className="py-3 px-3 text-gray-500">
                      {new Date(ticket.createdAt).toLocaleDateString('id-ID', {
                        day: 'numeric',
                        month: 'short',
                        year: 'numeric',
                      })}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}