'use client'

import { useEffect, useState } from 'react'
import { ShoppingCart, DollarSign, BookOpen, Store, Users, Clock, TrendingUp } from 'lucide-react'
import { formatCurrency, ORDER_STATUSES, PAYMENT_STATUSES } from '@/lib/utils'

interface DashboardData {
  stats: {
    todayOrders: number
    todayRevenue: number
    totalMenuItems: number
    totalStores: number
    totalStaff: number
    pendingOrders: number
  }
  recentOrders: any[]
}

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

  useEffect(() => {
    fetch('/api/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-primary-600"></div></div>
  }

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

  const stats = [
    { name: 'Order Hari Ini', value: data.stats.todayOrders, icon: ShoppingCart, color: 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300' },
    { name: 'Pendapatan Hari Ini', value: formatCurrency(data.stats.todayRevenue), icon: DollarSign, color: 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-300' },
    { name: 'Order Pending', value: data.stats.pendingOrders, icon: Clock, color: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-300' },
    { name: 'Total Menu', value: data.stats.totalMenuItems, icon: BookOpen, color: 'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-300' },
    { name: 'Total Cabang', value: data.stats.totalStores, icon: Store, color: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-300' },
    { name: 'Total Staff', value: data.stats.totalStaff, icon: Users, color: 'bg-pink-100 text-pink-600 dark:bg-pink-900/30 dark:text-pink-300' },
  ]

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
        <p className="text-gray-600 dark:text-gray-300 mt-1">Ringkasan aktivitas restoran Anda hari ini.</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 dark:text-gray-300">{stat.name}</p>
                <p className="text-xl font-bold text-gray-900 dark:text-white">{stat.value}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Pesanan Terbaru</h2>
        {data.recentOrders.length === 0 ? (
          <p className="text-gray-500 dark:text-gray-400 text-center py-8">Belum ada pesanan</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200 dark:border-gray-700">
                  <th className="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-300">No. Order</th>
                  <th className="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-300">Cabang</th>
                  <th className="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-300">Meja</th>
                  <th className="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-300">Total</th>
                  <th className="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-300">Status</th>
                  <th className="text-left py-3 px-2 font-medium text-gray-600 dark:text-gray-300">Bayar</th>
                </tr>
              </thead>
              <tbody>
                {data.recentOrders.map((order: any) => (
                  <tr key={order.id} className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800">
                    <td className="py-3 px-2 font-mono text-xs">{order.orderNumber}</td>
                    <td className="py-3 px-2">{order.store?.name}</td>
                    <td className="py-3 px-2">{order.table ? `Meja ${order.table.number}` : '-'}</td>
                    <td className="py-3 px-2 font-medium">{formatCurrency(order.total)}</td>
                    <td className="py-3 px-2">
                      <span className={`badge ${ORDER_STATUSES[order.status as keyof typeof ORDER_STATUSES]?.color}`}>
                        {ORDER_STATUSES[order.status as keyof typeof ORDER_STATUSES]?.label}
                      </span>
                    </td>
                    <td className="py-3 px-2">
                      <span className={`badge ${PAYMENT_STATUSES[order.paymentStatus as keyof typeof PAYMENT_STATUSES]?.color}`}>
                        {PAYMENT_STATUSES[order.paymentStatus as keyof typeof PAYMENT_STATUSES]?.label}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}