'use client'

import { useState, useMemo } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table'
import { TrendingUp, TrendingDown, DollarSign, ShoppingCart } from 'lucide-react'
import { formatMNT } from '@/lib/format'

type SaleItem = { product_name: string; quantity: number; unit_price: number; cost_price: number }
type Sale = {
  id: string
  total_amount: number
  total_cost: number
  net_profit: number
  payment_method: string
  created_at: string
  sale_items: SaleItem[]
}

function groupByDay(sales: Sale[]) {
  const map: Record<string, { revenue: number; cost: number; profit: number; count: number }> = {}
  sales.forEach(s => {
    const day = s.created_at.slice(0, 10)
    if (!map[day]) map[day] = { revenue: 0, cost: 0, profit: 0, count: 0 }
    map[day].revenue += s.total_amount
    map[day].cost += s.total_cost
    map[day].profit += s.net_profit
    map[day].count += 1
  })
  return Object.entries(map).map(([date, v]) => ({ date, ...v })).sort((a, b) => a.date.localeCompare(b.date))
}

function topProducts(sales: Sale[]) {
  const map: Record<string, { qty: number; revenue: number; profit: number }> = {}
  sales.forEach(s => {
    s.sale_items.forEach(i => {
      if (!map[i.product_name]) map[i.product_name] = { qty: 0, revenue: 0, profit: 0 }
      map[i.product_name].qty += i.quantity
      map[i.product_name].revenue += i.unit_price * i.quantity
      map[i.product_name].profit += (i.unit_price - i.cost_price) * i.quantity
    })
  })
  return Object.entries(map)
    .map(([name, v]) => ({ name, ...v }))
    .sort((a, b) => b.revenue - a.revenue)
}

export function ReportsClient({ sales, branchName }: { sales: Sale[]; branchName?: string }) {
  const [tab, setTab] = useState('overview')

  const totalRevenue = useMemo(() => sales.reduce((s, r) => s + r.total_amount, 0), [sales])
  const totalCost = useMemo(() => sales.reduce((s, r) => s + r.total_cost, 0), [sales])
  const totalProfit = useMemo(() => sales.reduce((s, r) => s + r.net_profit, 0), [sales])
  const margin = totalRevenue > 0 ? Math.round((totalProfit / totalRevenue) * 100) : 0

  const dailyData = useMemo(() => groupByDay(sales), [sales])
  const products = useMemo(() => topProducts(sales), [sales])

  const cashSales = sales.filter(s => s.payment_method === 'cash')
  const cardSales = sales.filter(s => s.payment_method === 'card')

  const stats = [
    {
      title: 'Нийт орлого (30 хоног)',
      value: formatMNT(totalRevenue),
      icon: DollarSign,
      color: 'text-blue-600',
      bg: 'bg-blue-50',
    },
    {
      title: 'Нийт зардал',
      value: formatMNT(totalCost),
      icon: TrendingDown,
      color: 'text-red-500',
      bg: 'bg-red-50',
    },
    {
      title: 'Цэвэр ашиг',
      value: formatMNT(totalProfit),
      icon: TrendingUp,
      color: 'text-green-600',
      bg: 'bg-green-50',
    },
    {
      title: 'Нийт гүйлгээ',
      value: String(sales.length),
      icon: ShoppingCart,
      color: 'text-amber-600',
      bg: 'bg-amber-50',
      sub: `Маржин: ${margin}%`,
    },
  ]

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Тайлан</h1>
        <p className="text-gray-500 text-sm mt-1">
          {branchName ? `${branchName} — с` : 'С'}үүлийн 30 хоногийн мэдээлэл
        </p>
      </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-xs text-gray-500">{s.title}</p>
                  <p className="text-xl font-bold text-gray-900 mt-1">{s.value}</p>
                  {s.sub && <p className="text-xs text-gray-400 mt-0.5">{s.sub}</p>}
                </div>
                <div className={`${s.bg} rounded-lg p-2`}>
                  <s.icon className={`h-4 w-4 ${s.color}`} />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Payment breakdown */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-5">
            <p className="text-sm text-gray-500 mb-3">Төлбөрийн хэлбэрээр</p>
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-sm">Бэлэн мөнгө</span>
                <div className="text-right">
                  <p className="font-medium">{formatMNT(cashSales.reduce((s, r) => s + r.total_amount, 0))}</p>
                  <p className="text-xs text-gray-400">{cashSales.length} гүйлгээ</p>
                </div>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Карт</span>
                <div className="text-right">
                  <p className="font-medium">{formatMNT(cardSales.reduce((s, r) => s + r.total_amount, 0))}</p>
                  <p className="text-xs text-gray-400">{cardSales.length} гүйлгээ</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-5">
            <p className="text-sm text-gray-500 mb-3">Ашгийн хуваарилалт</p>
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-600">Орлого</span>
                <span className="font-medium">{formatMNT(totalRevenue)}</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm text-red-500">— Зардал</span>
                <span className="text-red-500 font-medium">{formatMNT(totalCost)}</span>
              </div>
              <div className="h-px bg-gray-100" />
              <div className="flex justify-between items-center">
                <span className="text-sm font-semibold text-green-600">= Цэвэр ашиг</span>
                <span className="font-bold text-green-600">{formatMNT(totalProfit)}</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
          <TabsTrigger value="overview">Өдрөөр</TabsTrigger>
          <TabsTrigger value="products">Бүтээгдэхүүнээр</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Өдрийн тайлан</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow className="bg-gray-50">
                    <TableHead>Огноо</TableHead>
                    <TableHead className="text-right">Гүйлгээ</TableHead>
                    <TableHead className="text-right">Орлого</TableHead>
                    <TableHead className="text-right">Зардал</TableHead>
                    <TableHead className="text-right">Цэвэр ашиг</TableHead>
                    <TableHead className="text-right">Маржин</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {dailyData.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center py-8 text-gray-400">
                        Мэдээлэл байхгүй
                      </TableCell>
                    </TableRow>
                  ) : (
                    dailyData.map(d => {
                      const m = d.revenue > 0 ? Math.round((d.profit / d.revenue) * 100) : 0
                      return (
                        <TableRow key={d.date}>
                          <TableCell className="font-medium">
                            {new Date(d.date).toLocaleDateString('mn-MN', { month: 'short', day: 'numeric', weekday: 'short' })}
                          </TableCell>
                          <TableCell className="text-right">{d.count}</TableCell>
                          <TableCell className="text-right">{formatMNT(d.revenue)}</TableCell>
                          <TableCell className="text-right text-red-500">{formatMNT(d.cost)}</TableCell>
                          <TableCell className="text-right font-medium text-green-600">{formatMNT(d.profit)}</TableCell>
                          <TableCell className="text-right">
                            <span className={`font-medium ${m >= 50 ? 'text-green-600' : m >= 20 ? 'text-amber-600' : 'text-red-500'}`}>
                              {m}%
                            </span>
                          </TableCell>
                        </TableRow>
                      )
                    })
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="products" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Бүтээгдэхүүний борлуулалт</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow className="bg-gray-50">
                    <TableHead>Бүтээгдэхүүн</TableHead>
                    <TableHead className="text-right">Тоо ширхэг</TableHead>
                    <TableHead className="text-right">Орлого</TableHead>
                    <TableHead className="text-right">Ашиг</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {products.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center py-8 text-gray-400">
                        Мэдээлэл байхгүй
                      </TableCell>
                    </TableRow>
                  ) : (
                    products.map((p, i) => (
                      <TableRow key={p.name}>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <span className="text-xs text-gray-400 w-4">{i + 1}</span>
                            <span className="font-medium">{p.name}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">{p.qty}</TableCell>
                        <TableCell className="text-right">{formatMNT(p.revenue)}</TableCell>
                        <TableCell className="text-right font-medium text-green-600">{formatMNT(p.profit)}</TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}