import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { BarChartBig, CalendarDays, DollarSign, FileText, Users, Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DatePickerWithRange } from "@/components/ui/date-range-picker"; // Assuming this component exists or will be created
import Image from "next/image";

// Mock DatePickerWithRange component if not available
// This is a simplified placeholder. A real one would use react-day-picker
const DatePickerWithRangePlaceholder = () => (
  <Button variant="outline" className="w-[280px] justify-start text-left font-normal">
    <CalendarDays className="mr-2 h-4 w-4" />
    <span>Pick a date range</span>
  </Button>
);


export default function ReportsPage() {
  const reportCards = [
    { title: "Sales Summary", description: "Overview of sales performance.", icon: DollarSign, link: "/reports/sales-summary" },
    { title: "Inventory Report", description: "Current stock levels and valuations.", icon: FileText, link: "/reports/inventory" },
    { title: "Customer Insights", description: "Analysis of customer behavior.", icon: Users, link: "/reports/customer-insights" },
    { title: "Product Performance", description: "Best-selling items and trends.", icon: BarChartBig, link: "/reports/product-performance" },
  ];

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 className="text-3xl font-bold tracking-tight text-foreground">Reports & Analytics</h1>
            <p className="text-muted-foreground">Gain insights into your business performance.</p>
        </div>
        <div className="flex items-center gap-2">
           {/* <DatePickerWithRange /> Requires a DateRangePicker component */}
           <DatePickerWithRangePlaceholder />
           <Button variant="outline"><Download className="mr-2 h-4 w-4" /> Export All</Button>
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
        {reportCards.map((report, index) => (
          <Card key={index} className="shadow-lg hover:shadow-xl transition-shadow duration-300">
            <CardHeader className="flex flex-row items-center gap-4">
              <div className="p-3 rounded-full bg-primary/10 text-primary">
                <report.icon className="h-6 w-6" />
              </div>
              <div>
                <CardTitle>{report.title}</CardTitle>
                <CardDescription>{report.description}</CardDescription>
              </div>
            </CardHeader>
            <CardContent>
              <Button variant="outline" className="w-full" asChild>
                <a href={report.link}>View Report</a>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
      
      <Card className="shadow-lg">
        <CardHeader>
          <CardTitle>Key Performance Indicators (KPIs)</CardTitle>
          <CardDescription>At-a-glance view of your most important metrics.</CardDescription>
        </CardHeader>
        <CardContent>
          <Image src="https://placehold.co/800x400.png" alt="KPI Dashboard placeholder" data-ai-hint="kpi dashboard" width={800} height={400} className="w-full h-auto object-cover rounded-md"/>
        </CardContent>
      </Card>

    </div>
  );
}