import { useCallback, useMemo, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";
import {
  DollarSign, TrendingUp, CreditCard, AlertTriangle,
  Package, ShoppingCart, ArrowLeftRight, PieChart, CheckCircle2,
  RefreshCw, ReceiptText, Info,
} from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { Progress } from "@/components/ui/progress";
import { usePullToRefresh } from "@/hooks/usePullToRefresh";
import { useNavigate } from "react-router-dom";
import { usePermissions } from "@/hooks/usePermissions";
import { Button } from "@/components/ui/button";
import { CashInOutDialog } from "@/components/accounts/CashInOutDialog";
import { MobileQuickActions } from "@/components/dashboard/MobileQuickActions";
import { MobileQuickFab } from "@/components/dashboard/MobileQuickFab";
import {
  Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
} from "@/components/ui/tooltip";
import { todayBD } from "@/lib/datetime";
import { useLowStockAlerts } from "@/hooks/useLowStockAlerts";

import { Wallet } from "lucide-react";
import { SalesOverviewSection } from "@/components/dashboard/SalesOverviewSection";
import { AccountsOverviewSection } from "@/components/dashboard/AccountsOverviewSection";
import { CustomerDueOverviewSection } from "@/components/dashboard/CustomerDueOverviewSection";
import { AmanatHawlatOverviewSection } from "@/components/dashboard/AmanatHawlatOverviewSection";
import { RecentPurchasesCard } from "@/components/dashboard/RecentPurchasesCard";
import { DASHBOARD_OVERVIEW_KEYS } from "@/hooks/useDashboardOverview";


function useDashboardData() {
  const today = todayBD();
  const thisMonth = today.slice(0, 7);

  const sales = useQuery({
    queryKey: ["dashboard-sales"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("sales")
        .select("id, date, status, sale_type, total_amount, paid_amount, due_amount, invoice_no, customers(name)")
        .eq("status", "confirmed")
        .order("created_at", { ascending: false });
      if (error) throw error;
      return data;
    },
  });

  const stockStats = useQuery({
    queryKey: ["dashboard-stock-stats"],
    queryFn: async () => {
      const { count: inStock } = await supabase
        .from("stock_items")
        .select("*", { count: "exact", head: true })
        .eq("status", "in_stock");
      return { inStock: inStock ?? 0 };
    },
  });

  const pendingDues = useQuery({
    queryKey: ["dashboard-dues"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("dues")
        .select("id, remaining_amount, customers(name)")
        .eq("status", "pending")
        .order("remaining_amount", { ascending: false })
        .limit(5);
      if (error) throw error;
      const { count } = await supabase
        .from("dues")
        .select("*", { count: "exact", head: true })
        .eq("status", "pending");
      return { top: data || [], totalCount: count ?? 0 };
    },
  });

  const todayExpenses = useQuery({
    queryKey: ["dashboard-expenses-today"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("expenses")
        .select("amount")
        .eq("date", today);
      if (error) throw error;
      return data?.reduce((s, e) => s + Number(e.amount), 0) ?? 0;
    },
  });

  const monthlyExpenses = useQuery({
    queryKey: ["dashboard-expenses-month"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("expenses")
        .select("amount")
        .gte("date", `${thisMonth}-01`)
        .lte("date", `${thisMonth}-31`);
      if (error) throw error;
      return data?.reduce((s, e) => s + Number(e.amount), 0) ?? 0;
    },
  });

  const profitData = useQuery({
    queryKey: ["dashboard-profit", thisMonth],
    queryFn: async () => {
      const { data: monthSales } = await supabase
        .from("sales")
        .select("id, date, total_amount, discount_amount, invoice_no")
        .eq("status", "confirmed")
        .gte("date", `${thisMonth}-01`)
        .lte("date", `${thisMonth}-31`);

      if (!monthSales || monthSales.length === 0) {
        return { todayCogs: 0, monthCogs: 0, todayRevenue: 0, monthRevenue: 0, todayDiscount: 0, monthDiscount: 0, breakdown: [] as any[] };
      }

      const todayRevenue = monthSales.filter((s) => s.date === today).reduce((s, x) => s + Number(x.total_amount), 0);
      const monthRevenue = monthSales.reduce((s, x) => s + Number(x.total_amount), 0);
      const todayDiscount = monthSales.filter((s) => s.date === today).reduce((s, x) => s + Number(x.discount_amount), 0);
      const monthDiscount = monthSales.reduce((s, x) => s + Number(x.discount_amount), 0);

      // Fetch all sale items with cost for breakdown
      const monthSaleIds = monthSales.map((s) => s.id);
      let allItems: any[] = [];
      for (let i = 0; i < monthSaleIds.length; i += 100) {
        const chunk = monthSaleIds.slice(i, i + 100);
        const { data } = await supabase
          .from("sale_items")
          .select("sale_id, stock_item_id, quantity, unit_price, total, products(name, model)")
          .in("sale_id", chunk);
        if (data) allItems = allItems.concat(data);
      }

      // Fetch cost prices
      const stockIds = [...new Set(allItems.filter((i) => i.stock_item_id).map((i) => i.stock_item_id!))];
      const costMap: Record<string, number> = {};
      if (stockIds.length > 0) {
        for (let i = 0; i < stockIds.length; i += 100) {
          const chunk = stockIds.slice(i, i + 100);
          const { data: stockItems } = await supabase.from("stock_items").select("id, cost_price").in("id", chunk);
          stockItems?.forEach((si) => { costMap[si.id] = Number(si.cost_price); });
        }
      }

      // Build per-sale breakdown
      const saleMap: Record<string, { invoice: string; date: string; saleAmount: number; discount: number; totalCost: number; items: string[] }> = {};
      monthSales.forEach((s) => {
        saleMap[s.id] = { invoice: s.invoice_no || s.id.slice(0, 8), date: s.date, saleAmount: Number(s.total_amount), discount: Number(s.discount_amount), totalCost: 0, items: [] };
      });
      allItems.forEach((item) => {
        const entry = saleMap[item.sale_id];
        if (!entry) return;
        const cost = item.stock_item_id ? (costMap[item.stock_item_id] || 0) : 0;
        entry.totalCost += cost * Number(item.quantity);
        const prod = item.products as any;
        if (prod) entry.items.push(prod.name + (prod.model ? ` ${prod.model}` : ""));
      });

      const breakdown = Object.values(saleMap).sort((a, b) => (a.saleAmount - a.totalCost) - (b.saleAmount - b.totalCost));

      const todaySaleIds = monthSales.filter((s) => s.date === today).map((s) => s.id);
      const todayCogs = allItems.filter((i) => todaySaleIds.includes(i.sale_id)).reduce((s, i) => s + (i.stock_item_id ? (costMap[i.stock_item_id] || 0) * Number(i.quantity) : 0), 0);
      const monthCogs = allItems.reduce((s, i) => s + (i.stock_item_id ? (costMap[i.stock_item_id] || 0) * Number(i.quantity) : 0), 0);

      return { todayCogs, monthCogs, todayRevenue, monthRevenue, todayDiscount, monthDiscount, breakdown };
    },
  });

  return { sales, stockStats, pendingDues, todayExpenses, monthlyExpenses, profitData, today, thisMonth };
}

function SectionHelper({ text }: { text: string }) {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Info className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-[220px] text-xs">
          {text}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

const cardTooltips: Record<string, string> = {
  "Today Sales": "Total confirmed sales amount for today",
  "Monthly Sales": "Total confirmed sales amount this month",
  "Today Collection": "Amount actually received from customers today",
  "Today Expenses": "Total expenses recorded for today",
  "Total Due": "Outstanding payment from all confirmed sales",
  "Stock In Hand": "Number of individual stock items currently available",
};

const iconBgMap: Record<string, string> = {
  "Today Sales": "bg-emerald-500/15 text-emerald-500",
  "Monthly Sales": "bg-blue-500/15 text-blue-500",
  "Today Collection": "bg-teal-500/15 text-teal-500",
  "Today Expenses": "bg-red-500/15 text-red-500",
  "Total Due": "bg-amber-500/15 text-amber-500",
  "Stock In Hand": "bg-purple-500/15 text-purple-500",
};

function DashboardCardSkeleton() {
  return (
    <Card>
      <CardContent className="p-3 md:p-4">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0 space-y-2 flex-1">
            <Skeleton className="h-3 w-20" />
            <Skeleton className="h-6 w-28" />
          </div>
          <Skeleton className="h-10 w-10 rounded-xl shrink-0" />
        </div>
      </CardContent>
    </Card>
  );
}

function DashboardTableSkeleton({ rows = 4, cols = 3 }: { rows?: number; cols?: number }) {
  return (
    <div className="space-y-3">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex items-center gap-3">
          {Array.from({ length: cols }).map((_, j) => (
            <Skeleton key={j} className={`h-4 ${j === 0 ? "w-24" : j === cols - 1 ? "w-16 ml-auto" : "w-20"}`} />
          ))}
        </div>
      ))}
    </div>
  );
}

function ProfitSkeleton() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Skeleton className="h-8 w-8 rounded-lg" />
          <Skeleton className="h-5 w-32" />
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid md:grid-cols-2 gap-4">
          {[0, 1].map((i) => (
            <div key={i} className="space-y-3 p-4 rounded-xl bg-muted/30">
              <Skeleton className="h-4 w-20" />
              <div className="grid grid-cols-3 gap-3">
                {[0, 1, 2].map((j) => (
                  <div key={j} className="space-y-1">
                    <Skeleton className="h-3 w-14" />
                    <Skeleton className="h-6 w-20" />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

export default function Dashboard() {
  const { sales, stockStats, pendingDues, todayExpenses, monthlyExpenses, profitData, today, thisMonth } = useDashboardData();
  const navigate = useNavigate();
  const { hasPermission } = usePermissions();
  const queryClient = useQueryClient();
  const [cashDialogOpen, setCashDialogOpen] = useState(false);
  const [cashInitialType, setCashInitialType] = useState<"cash_in" | "cash_out">("cash_in");
  const lowStockAlerts = useLowStockAlerts();

  const openCash = (type: "cash_in" | "cash_out") => {
    setCashInitialType(type);
    setCashDialogOpen(true);
  };

  const handleRefresh = useCallback(async () => {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["dashboard-sales"] }),
      queryClient.invalidateQueries({ queryKey: ["dashboard-stock-stats"] }),
      queryClient.invalidateQueries({ queryKey: ["dashboard-dues"] }),
      queryClient.invalidateQueries({ queryKey: ["dashboard-expenses-today"] }),
      queryClient.invalidateQueries({ queryKey: ["dashboard-expenses-month"] }),
      queryClient.invalidateQueries({ queryKey: ["dashboard-profit"] }),
      queryClient.invalidateQueries({ queryKey: ["low-stock-alerts"] }),
      queryClient.invalidateQueries({ queryKey: ["personal-ledger-summary"] }),
      ...DASHBOARD_OVERVIEW_KEYS.map((k) => queryClient.invalidateQueries({ queryKey: k })),
    ]);
  }, [queryClient]);

  const { containerRef, pullDistance, isRefreshing } = usePullToRefresh({
    onRefresh: handleRefresh,
  });

  const isCardsLoading = sales.isLoading || stockStats.isLoading || todayExpenses.isLoading;

  const allSales = sales.data || [];
  const todaySales = allSales.filter((s) => s.date === today);
  const monthlySales = allSales.filter((s) => s.date?.startsWith(thisMonth));
  const todayTotal = todaySales.reduce((s, sale) => s + Number(sale.total_amount), 0);
  const monthlyTotal = monthlySales.reduce((s, sale) => s + Number(sale.total_amount), 0);
  const todayCollection = todaySales.reduce((s, sale) => s + Number(sale.paid_amount), 0);
  const totalDue = allSales.reduce((s, sale) => s + Number(sale.due_amount), 0);

  const fmtBDT = (n: number) => `৳${new Intl.NumberFormat("en-IN").format(Math.round(n))}`;

  const summaryCards = [
    { title: "Today Sales", value: fmtBDT(todayTotal), icon: DollarSign },
    { title: "Monthly Sales", value: fmtBDT(monthlyTotal), icon: TrendingUp },
    { title: "Today Collection", value: fmtBDT(todayCollection), icon: CreditCard },
    { title: "Today Expenses", value: fmtBDT(todayExpenses.data ?? 0), icon: ReceiptText },
    { title: "Total Due", value: fmtBDT(totalDue), icon: AlertTriangle },
    { title: "Stock In Hand", value: `${stockStats.data?.inStock ?? 0}`, icon: Package },
  ];

  const recentSales = allSales.slice(0, 5);
  const pullProgress = Math.min(pullDistance / 80, 1);

  return (
    <div ref={containerRef} className="space-y-4 md:space-y-6 relative" style={{ touchAction: 'pan-y' }}>
      {/* Pull-to-refresh indicator */}
      <div
        className="flex items-center justify-center overflow-hidden transition-all duration-200 md:hidden"
        style={{ height: pullDistance > 0 ? `${pullDistance}px` : '0px' }}
      >
        <div className="flex flex-col items-center gap-1">
          <RefreshCw
            className={`h-5 w-5 text-primary transition-transform duration-200 ${isRefreshing ? 'animate-spin' : ''}`}
            style={{ transform: isRefreshing ? undefined : `rotate(${pullProgress * 360}deg)`, opacity: pullProgress }}
          />
          <span className="text-xs text-muted-foreground" style={{ opacity: pullProgress }}>
            {isRefreshing ? 'Refreshing...' : pullProgress >= 1 ? 'Release to refresh' : 'Pull to refresh'}
          </span>
        </div>
      </div>

      {/* Header + Quick Actions */}
      <div className="flex flex-col gap-3">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
          <div className="min-w-0">
            <h1 className="text-xl md:text-2xl font-semibold tracking-tight text-foreground">Dashboard</h1>
            <p className="text-muted-foreground text-xs md:text-sm mt-0.5">Daily operations overview</p>
          </div>

          {/* Quick Access Buttons (desktop) */}
          {(hasPermission("pos") || hasPermission("accounts") || hasPermission("personal_ledger")) && (
            <div className="hidden md:flex gap-2 shrink-0 flex-wrap">
              {hasPermission("pos") && (
                <Button onClick={() => navigate("/pos")} className="gap-2 h-10 px-5 rounded-lg shadow-sm">
                  <ShoppingCart className="h-4 w-4" />
                  Open POS
                </Button>
              )}
              {hasPermission("accounts") && (
                <Button onClick={() => setCashDialogOpen(true)} variant="outline" className="gap-2 h-10 px-5 rounded-lg border-border/70">
                  <ArrowLeftRight className="h-4 w-4" />
                  Cash In / Out
                </Button>
              )}
              {hasPermission("personal_ledger") && (
                <Button onClick={() => navigate("/personal-ledger")} variant="outline" className="gap-2 h-10 px-5 rounded-lg border-border/70">
                  <Wallet className="h-4 w-4" />
                  Amanat / Hawlat
                </Button>
              )}
            </div>
          )}
        </div>

        {/* Mobile Quick Actions — top of dashboard, mobile only */}
        <MobileQuickActions onCashClick={openCash} />

        {/* Alerts Bar */}
        <div className="flex items-center gap-2 flex-wrap">
          {(lowStockAlerts.data?.outCount ?? 0) > 0 && (
            <button
              type="button"
              onClick={() => navigate("/stock-management?status=out")}
              className="inline-flex items-center gap-1 rounded-md border border-destructive/20 bg-destructive/15 text-destructive px-2 py-0.5 text-xs font-medium hover:bg-destructive/25 transition-colors"
            >
              <AlertTriangle className="h-3 w-3" />
              {lowStockAlerts.data?.outCount} products out of stock
            </button>
          )}
          {(lowStockAlerts.data?.lowCount ?? 0) > 0 && (
            <button
              type="button"
              onClick={() => navigate("/stock-management?status=low")}
              className="inline-flex items-center gap-1 rounded-md border border-amber-500/20 bg-amber-500/15 text-amber-700 dark:text-amber-400 px-2 py-0.5 text-xs font-medium hover:bg-amber-500/25 transition-colors"
            >
              <AlertTriangle className="h-3 w-3" />
              {lowStockAlerts.data?.lowCount} products low stock
            </button>
          )}
          {!lowStockAlerts.isLoading && (lowStockAlerts.data?.outCount ?? 0) === 0 && (lowStockAlerts.data?.lowCount ?? 0) === 0 && (stockStats.data?.inStock ?? 0) === 0 && (
            <Badge variant="outline" className="text-xs gap-1 text-muted-foreground">
              <CheckCircle2 className="h-3 w-3" />
              No stock entered yet — start with a New Purchase
            </Badge>
          )}
          {(pendingDues.data?.totalCount ?? 0) > 0 && (
            <Badge variant="secondary" className="text-xs gap-1 bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/20">
              <AlertTriangle className="h-3 w-3" />
              {pendingDues.data?.totalCount} pending dues
            </Badge>
          )}
          <Badge variant="outline" className="text-xs">
            {todaySales.length} sales today
          </Badge>
        </div>
      </div>


      {/* Summary Cards — 6 essential cards */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2.5 md:gap-4 stagger-fade">
        {isCardsLoading
          ? Array.from({ length: 6 }).map((_, i) => <DashboardCardSkeleton key={i} />)
          : summaryCards.map((card) => (
            <Card
              key={card.title}
              className="group cursor-default border border-border/70 bg-card hover:border-primary/30 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 md:min-h-[104px] min-h-[88px]"
            >
              <CardContent className="p-3 md:p-4 h-full">
                <div className="flex items-start justify-between gap-2 h-full">
                  <div className="min-w-0 flex flex-col justify-between h-full">
                    <p className="text-[10px] md:text-[11px] uppercase tracking-wider text-muted-foreground font-medium">{card.title}</p>
                    <p className="text-base md:text-2xl font-semibold tabular-nums tracking-tight mt-1 truncate">{card.value}</p>
                  </div>
                  <div className={`hidden md:flex h-9 w-9 rounded-lg items-center justify-center shrink-0 transition-transform duration-300 group-hover:scale-105 ${iconBgMap[card.title] || "bg-muted"}`}>
                    <card.icon className="h-4 w-4" />
                  </div>
                  <card.icon className={`md:hidden h-4 w-4 shrink-0 mt-0.5 ${iconBgMap[card.title]?.split(' ')[1] || "text-muted-foreground"}`} />
                </div>
              </CardContent>
            </Card>
          ))}
      </div>

      {/* Sales Overview */}
      {(hasPermission("sales") || hasPermission("pos")) && <SalesOverviewSection />}

      {/* Profit Overview */}
      {profitData.isLoading ? <ProfitSkeleton /> : (() => {
        const pd = profitData.data;
        const todayGross = (pd?.todayRevenue ?? 0) - (pd?.todayCogs ?? 0);
        const monthGross = (pd?.monthRevenue ?? 0) - (pd?.monthCogs ?? 0);
        const monthNet = monthGross - (monthlyExpenses.data ?? 0);
        const todayNet = todayGross - (todayExpenses.data ?? 0);
        const todayPreDiscount = (pd?.todayRevenue ?? 0) + (pd?.todayDiscount ?? 0);
        const monthPreDiscount = (pd?.monthRevenue ?? 0) + (pd?.monthDiscount ?? 0);
        const todayMargin = (pd?.todayRevenue ?? 0) > 0 ? (todayGross / pd!.todayRevenue) * 100 : 0;
        const monthMargin = (pd?.monthRevenue ?? 0) > 0 ? (monthGross / pd!.monthRevenue) * 100 : 0;

        return (
          <Card className="border border-border/70">
            <CardHeader className="pb-2 px-4 md:px-6">
              <CardTitle className="text-base md:text-lg flex items-center gap-2">
                <div className="h-7 w-7 md:h-8 md:w-8 rounded-lg bg-emerald-500/15 flex items-center justify-center">
                  <PieChart className="h-3.5 w-3.5 md:h-4 md:w-4 text-emerald-500" />
                </div>
                Profit Overview
                <SectionHelper text="Gross = Revenue - COGS. Net = Gross - Expenses. Revenue is after discounts." />
                {pd?.breakdown && pd.breakdown.length > 0 && (
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button variant="ghost" size="sm" className="ml-auto text-xs h-7 gap-1">
                        <ReceiptText className="h-3.5 w-3.5" /> Breakdown
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
                      <DialogHeader>
                        <DialogTitle>Profit Breakdown — {thisMonth}</DialogTitle>
                      </DialogHeader>
                      <div className="overflow-x-auto">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>Invoice</TableHead>
                              <TableHead>Date</TableHead>
                              <TableHead>Products</TableHead>
                              <TableHead className="text-right">Sale</TableHead>
                              <TableHead className="text-right">Discount</TableHead>
                              <TableHead className="text-right">Net Amt</TableHead>
                              <TableHead className="text-right">Cost</TableHead>
                              <TableHead className="text-right">Gross P/L</TableHead>
                              <TableHead>Reason</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {pd.breakdown.map((row, idx) => {
                              const gross = row.saleAmount - row.totalCost;
                              const preDiscount = row.saleAmount + row.discount;
                              let reason = "";
                              if (row.discount > 0 && row.saleAmount === 0) reason = "100% discount";
                              else if (row.discount > 0 && gross < 0) reason = "Heavy discount";
                              else if (gross < 0) reason = "Sold below cost";
                              return (
                                <TableRow key={idx} className={gross < 0 ? "bg-destructive/5" : ""}>
                                  <TableCell className="font-mono text-xs">{row.invoice}</TableCell>
                                  <TableCell className="text-xs">{row.date}</TableCell>
                                  <TableCell className="text-xs max-w-[150px] truncate">{row.items.join(", ")}</TableCell>
                                  <TableCell className="text-right text-xs tabular-nums">{fmtBDT(preDiscount)}</TableCell>
                                  <TableCell className="text-right text-xs tabular-nums text-amber-600">{row.discount > 0 ? `-${fmtBDT(row.discount)}` : "—"}</TableCell>
                                  <TableCell className="text-right text-xs tabular-nums">{fmtBDT(row.saleAmount)}</TableCell>
                                  <TableCell className="text-right text-xs tabular-nums">{fmtBDT(row.totalCost)}</TableCell>
                                  <TableCell className={`text-right text-xs tabular-nums font-medium ${gross >= 0 ? "text-emerald-600" : "text-destructive"}`}>{fmtBDT(gross)}</TableCell>
                                  <TableCell className="text-xs text-destructive">{reason}</TableCell>
                                </TableRow>
                              );
                            })}
                          </TableBody>
                        </Table>
                      </div>
                    </DialogContent>
                  </Dialog>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="px-4 md:px-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* Today */}
                <div className="space-y-3 p-4 rounded-xl border border-border/60 bg-muted/20">
                  <h3 className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">Today</h3>
                  <div className="grid grid-cols-3 gap-2">
                    <div>
                      <p className="text-[10px] md:text-xs text-muted-foreground">Revenue</p>
                      <p className="text-sm md:text-lg font-semibold tabular-nums">{fmtBDT(pd?.todayRevenue ?? 0)}</p>
                      {(pd?.todayDiscount ?? 0) > 0 && (
                        <p className="text-[9px] text-amber-600">Pre-disc: {fmtBDT(todayPreDiscount)} (−{fmtBDT(pd?.todayDiscount ?? 0)})</p>
                      )}
                    </div>
                    <div>
                      <p className="text-[10px] md:text-xs text-muted-foreground">Gross Profit</p>
                      <p className={`text-sm md:text-lg font-semibold tabular-nums ${todayGross >= 0 ? "text-emerald-600" : "text-destructive"}`}>{fmtBDT(todayGross)}</p>
                    </div>
                    <div>
                      <p className="text-[10px] md:text-xs text-muted-foreground">Net Profit</p>
                      <p className={`text-sm md:text-lg font-semibold tabular-nums ${todayNet >= 0 ? "text-emerald-600" : "text-destructive"}`}>{fmtBDT(todayNet)}</p>
                    </div>
                  </div>
                  <div>
                    <div className="flex justify-between text-[10px] md:text-xs mb-1">
                      <span className="text-muted-foreground">Margin</span>
                      <span className={`font-medium tabular-nums ${todayMargin >= 0 ? "text-emerald-600" : "text-destructive"}`}>{todayMargin.toFixed(1)}%</span>
                    </div>
                    <Progress value={Math.min(Math.max(todayMargin, 0), 100)} className="h-1.5" />
                  </div>
                </div>

                {/* This Month */}
                <div className="space-y-3 p-4 rounded-xl border border-border/60 bg-muted/20">
                  <h3 className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">This Month</h3>
                  <div className="grid grid-cols-3 gap-2">
                    <div>
                      <p className="text-[10px] md:text-xs text-muted-foreground">Revenue</p>
                      <p className="text-sm md:text-lg font-semibold tabular-nums">{fmtBDT(pd?.monthRevenue ?? 0)}</p>
                      {(pd?.monthDiscount ?? 0) > 0 && (
                        <p className="text-[9px] text-amber-600">Pre-disc: {fmtBDT(monthPreDiscount)} (−{fmtBDT(pd?.monthDiscount ?? 0)})</p>
                      )}
                    </div>
                    <div>
                      <p className="text-[10px] md:text-xs text-muted-foreground">Gross Profit</p>
                      <p className={`text-sm md:text-lg font-semibold tabular-nums ${monthGross >= 0 ? "text-emerald-600" : "text-destructive"}`}>{fmtBDT(monthGross)}</p>
                    </div>
                    <div>
                      <p className="text-[10px] md:text-xs text-muted-foreground">Net Profit</p>
                      <p className={`text-sm md:text-lg font-semibold tabular-nums ${monthNet >= 0 ? "text-emerald-600" : "text-destructive"}`}>{fmtBDT(monthNet)}</p>
                    </div>
                  </div>
                  <div>
                    <div className="flex justify-between text-[10px] md:text-xs mb-1">
                      <span className="text-muted-foreground">Margin</span>
                      <span className={`font-medium tabular-nums ${monthMargin >= 0 ? "text-emerald-600" : "text-destructive"}`}>{monthMargin.toFixed(1)}%</span>
                    </div>
                    <Progress value={Math.min(Math.max(monthMargin, 0), 100)} className="h-1.5" />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })()}

      {/* Accounts Overview */}
      {hasPermission("accounts") && <AccountsOverviewSection />}

      {/* Customer Due Overview */}
      {(hasPermission("sales") || hasPermission("accounts") || hasPermission("dues")) && <CustomerDueOverviewSection />}

      {/* Amanat / Hawlat Overview */}
      {hasPermission("personal_ledger") && <AmanatHawlatOverviewSection />}

      {/* Recent Activity: Recent Sales + Recent Purchases */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-5 stagger-fade">
        {/* Recent Sales */}
        <Card>
          <CardHeader className="pb-2 px-4 md:px-6">
            <CardTitle className="text-base md:text-lg flex items-center gap-2">
              <div className="h-7 w-7 md:h-8 md:w-8 rounded-lg bg-green-500/15 flex items-center justify-center">
                <ShoppingCart className="h-3.5 w-3.5 md:h-4 md:w-4 text-green-500" />
              </div>
              Recent Sales
              <SectionHelper text="Latest confirmed sales transactions" />
            </CardTitle>
          </CardHeader>
          <CardContent className="px-4 md:px-6">
            {sales.isLoading ? <DashboardTableSkeleton rows={5} cols={4} /> : (
            <div className="overflow-x-auto -mx-4 md:mx-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="text-xs">Invoice</TableHead>
                    <TableHead className="text-xs">Customer</TableHead>
                    <TableHead className="text-xs">Amount</TableHead>
                    <TableHead className="text-xs">Type</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {recentSales.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={4} className="py-8">
                        <div className="flex flex-col items-center gap-2 text-center">
                          <div className="h-12 w-12 rounded-2xl bg-emerald-500/10 flex items-center justify-center">
                            <ShoppingCart className="h-6 w-6 text-emerald-400" />
                          </div>
                          <p className="font-medium text-sm">No sales yet</p>
                          <p className="text-xs text-muted-foreground">Sales will appear here once recorded</p>
                        </div>
                      </TableCell>
                    </TableRow>
                  )}
                  {recentSales.map((sale) => (
                    <TableRow key={sale.id}>
                      <TableCell className="font-mono text-xs py-2.5">{sale.invoice_no || "—"}</TableCell>
                      <TableCell className="text-xs py-2.5">{sale.customers?.name || "Walk-in"}</TableCell>
                      <TableCell className="font-medium text-xs py-2.5">৳{Number(sale.total_amount).toLocaleString()}</TableCell>
                      <TableCell className="py-2.5">
                        <Badge variant={sale.sale_type === "cash" ? "default" : "secondary"} className="text-[10px]">
                          {sale.sale_type}
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
            )}
          </CardContent>
        </Card>

        {/* Recent Purchases */}
        {(hasPermission("purchases") || hasPermission("inventory")) && <RecentPurchasesCard />}
      </div>

      <CashInOutDialog open={cashDialogOpen} onOpenChange={setCashDialogOpen} initialType={cashInitialType} />
      <MobileQuickFab onCashClick={openCash} />
    </div>
  );
}