import { SummaryCard } from "@/components/dashboard/summary-card";
import { BarChartBig, Users, Package, ShoppingCart, DollarSign, Activity } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { mockRecentSales } from "@/lib/mock-data";
import Image from "next/image";

// Placeholder chart component
const SalesChartPlaceholder = () => (
  <div className="flex items-center justify-center h-full bg-muted/50 rounded-lg">
    <BarChartBig className="w-16 h-16 text-muted-foreground" />
    <p className="ml-4 text-muted-foreground">Sales Chart Coming Soon</p>
  </div>
);

export default function DashboardPage() {
  const summaryData = [
    { title: "Total Revenue", value: "$1,250.75", icon: DollarSign, description: "+15% from last month", colorClass: "text-green-500" },
    { title: "Total Sales", value: "152", icon: ShoppingCart, description: "+8% from last week", colorClass: "text-blue-500" },
    { title: "Active Customers", value: "87", icon: Users, description: "+5 new this week", colorClass: "text-purple-500" },
    { title: "Items in Stock", value: "1,200", icon: Package, description: "3 items low stock", colorClass: "text-orange-500" },
  ];

  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold tracking-tight text-foreground">Dashboard</h1>
      
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {summaryData.map((data) => (
          <SummaryCard key={data.title} {...data} />
        ))}
      </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
        <Card className="lg:col-span-4 h-[400px] shadow-lg">
          <CardHeader>
            <CardTitle>Sales Overview</CardTitle>
            <CardDescription>A visual representation of sales trends.</CardDescription>
          </CardHeader>
          <CardContent className="h-[calc(100%-4rem)]">
            {/* Placeholder for Sales Chart */}
             <Image src="https://placehold.co/600x300.png" alt="Sales chart placeholder" data-ai-hint="sales chart" width={600} height={300} className="w-full h-full object-cover rounded-md" />
          </CardContent>
        </Card>

        <Card className="lg:col-span-3 shadow-lg">
          <CardHeader>
            <CardTitle>Recent Sales</CardTitle>
            <CardDescription>Latest transactions processed.</CardDescription>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Sale ID</TableHead>
                  <TableHead>Customer</TableHead>
                  <TableHead className="text-right">Amount</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockRecentSales.slice(0, 5).map((sale) => (
                  <TableRow key={sale.id}>
                    <TableCell className="font-medium">{sale.id}</TableCell>
                    <TableCell>{sale.customer}</TableCell>
                    <TableCell className="text-right">${sale.total.toFixed(2)}</TableCell>
                    <TableCell><Badge variant={sale.status === "Completed" ? "default" : "secondary"}>{sale.status}</Badge></TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}