import { createClient } from '@/lib/supabase/server'
import { getSelectedBranchId } from '@/lib/branch'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { TrendingUp, Package, AlertTriangle, ShoppingCart } from 'lucide-react'
import { formatMNT } from '@/lib/format'
import Link from 'next/link'
import { Button } from '@/components/ui/button'

export default async function DashboardPage() {
  const supabase = await createClient()

  const { data: org } = await supabase
    .from('organizations')
    .select('id, name')
    .single()

  if (!org) return <div>Байгууллага олдсонгүй</div>

  const { data: branches } = await supabase
    .from('branches')
    .select('id, name')
    .eq('org_id', org.id)
    .order('created_at')

  const branchList = branches ?? []
  const branchId = await getSelectedBranchId(branchList)
  const branchName = branchList.find(b => b.id === branchId)?.name ?? ''

  const today = new Date()
  today.setHours(0, 0, 0, 0)

  const [
    { data: todaySales },
    { data: lowStock },
    { data: totalProducts },
    { data: totalMaterials },
    { data: recentSales },
  ] = await Promise.all([
    supabase
      .from('sales')
      .select('total_amount, net_profit')
      .eq('branch_id', branchId ?? '')
      .gte('created_at', today.toISOString()),
    branchId
      ? supabase
          .from('branch_stock')
          .select('current_stock, min_stock, material_id')
          .eq('branch_id', branchId)
      : Promise.resolve({ data: [] }),
    supabase.from('products').select('id').eq('org_id', org.id),
    supabase.from('raw_materials').select('id, name, unit').eq('org_id', org.id),
    supabase
      .from('sales')
      .select('id, total_amount, net_profit, created_at, payment_method')
      .eq('branch_id', branchId ?? '')
      .order('created_at', { ascending: false })
      .limit(5),
  ])

  const stockRows = lowStock ?? []
  const materialsMap = Object.fromEntries((totalMaterials ?? []).map(m => [m.id, m]))
  const lowStockItems = stockRows
    .filter(s => s.current_stock <= s.min_stock)
    .map(s => ({
      ...s,
      name: materialsMap[s.material_id]?.name ?? '',
      unit: materialsMap[s.material_id]?.unit ?? '',
    }))

  const todayRevenue = todaySales?.reduce((s, r) => s + r.total_amount, 0) ?? 0
  const todayProfit = todaySales?.reduce((s, r) => s + r.net_profit, 0) ?? 0

  const stats = [
    {
      title: 'Өнөөдрийн борлуулалт',
      value: formatMNT(todayRevenue),
      icon: ShoppingCart,
      color: 'text-blue-600',
      bg: 'bg-blue-50',
      sub: `${todaySales?.length ?? 0} гүйлгээ`,
    },
    {
      title: 'Өнөөдрийн цэвэр ашиг',
      value: formatMNT(todayProfit),
      icon: TrendingUp,
      color: 'text-green-600',
      bg: 'bg-green-50',
      sub: todayRevenue > 0 ? `${Math.round((todayProfit / todayRevenue) * 100)}% маржин` : '—',
    },
    {
      title: 'Бүтээгдэхүүн',
      value: String(totalProducts?.length ?? 0),
      icon: Package,
      color: 'text-amber-600',
      bg: 'bg-amber-50',
      sub: 'Нийт бүтээгдэхүүн',
    },
    {
      title: 'Дутуу нөөц',
      value: String(lowStockItems.length),
      icon: AlertTriangle,
      color: 'text-red-600',
      bg: 'bg-red-50',
      sub: `${stockRows.length} түүхий эдийн нийт`,
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Хяналтын самбар</h1>
          <p className="text-gray-500 text-sm mt-1">
            {org.name}{branchName ? ` — ${branchName}` : ''} — өнөөдрийн тойм мэдээлэл
          </p>
        </div>
        <Button asChild className="bg-amber-600 hover:bg-amber-700">
          <Link href="/sales">Борлуулалт нэмэх</Link>
        </Button>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        {stats.map(s => (
          <Card key={s.title}>
            <CardContent className="p-5">
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-sm text-gray-500">{s.title}</p>
                  <p className="text-2xl font-bold text-gray-900 mt-1">{s.value}</p>
                  <p className="text-xs text-gray-400 mt-1">{s.sub}</p>
                </div>
                <div className={`${s.bg} rounded-lg p-2`}>
                  <s.icon className={`h-5 w-5 ${s.color}`} />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <AlertTriangle className="h-4 w-4 text-red-500" />
              Дутуу нөөцтэй түүхий эд
            </CardTitle>
          </CardHeader>
          <CardContent>
            {lowStockItems.length > 0 ? (
              <div className="space-y-2">
                {lowStockItems.map(m => (
                  <div key={m.material_id} className="flex items-center justify-between text-sm py-1.5 border-b border-gray-50 last:border-0">
                    <span className="text-gray-700 font-medium">{m.name}</span>
                    <span className="text-red-600 text-xs">
                      {m.current_stock}{m.unit} / доод {m.min_stock}{m.unit}
                    </span>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-sm text-gray-400 text-center py-4">Бүх нөөц хангалттай байна</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <ShoppingCart className="h-4 w-4 text-blue-500" />
              Сүүлийн борлуулалтууд
            </CardTitle>
          </CardHeader>
          <CardContent>
            {recentSales && recentSales.length > 0 ? (
              <div className="space-y-2">
                {recentSales.map(sale => (
                  <div key={sale.id} className="flex items-center justify-between text-sm py-1.5 border-b border-gray-50 last:border-0">
                    <div>
                      <span className="text-gray-700 font-medium">{formatMNT(sale.total_amount)}</span>
                      <span className="text-gray-400 ml-2 text-xs">
                        {sale.payment_method === 'cash' ? 'Бэлэн' : 'Картаар'}
                      </span>
                    </div>
                    <div className="text-right">
                      <span className="text-green-600 font-medium">{formatMNT(sale.net_profit)}</span>
                      <p className="text-xs text-gray-400">
                        {new Date(sale.created_at).toLocaleTimeString('mn-MN', { hour: '2-digit', minute: '2-digit' })}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-sm text-gray-400 text-center py-4">Өнөөдөр борлуулалт байхгүй байна</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}