"use client"

import { Topbar } from "@/components/topbar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CalendarDateRangePicker } from "@/components/date-range-picker"
import { Overview } from "@/components/overview"
import { RecentSales } from "@/components/recent-sales"
import { DataTable } from "@/components/data-table"
import { DollarSign, TrendingUp, Users, Target, Plus } from "lucide-react"
import { useTranslation } from "@/lib/i18n"

export default function Dashboard() {
  const { t } = useTranslation()

  const dashboardStats = [
    {
      title: t("dashboard.stats.monthlyRevenue"),
      value: "$48,500",
      description: t("dashboard.stats.monthlyRevenueChange"),
      icon: DollarSign,
    },
    {
      title: t("dashboard.stats.newDealsClosed"),
      value: "12",
      description: t("dashboard.stats.newDealsChange"),
      icon: Target,
    },
    {
      title: t("dashboard.stats.pipelineValue"),
      value: "$320,000",
      description: t("dashboard.stats.pipelineChange"),
      icon: TrendingUp,
    },
    {
      title: t("dashboard.stats.conversionRate"),
      value: "18.4%",
      description: t("dashboard.stats.conversionChange"),
      icon: Users,
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <Topbar />

      <div className="flex-1 space-y-4 p-8 pt-6">
        <div className="flex items-center justify-between space-y-2">
          <h2 className="text-3xl font-bold tracking-tight">{t("dashboard.title")}</h2>
          <div className="flex items-center space-x-2">
            <CalendarDateRangePicker />
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              {t("dashboard.addNewDeal")}
            </Button>
          </div>
        </div>
        <Tabs defaultValue="overview" className="space-y-4">
          <TabsList>
            <TabsTrigger value="overview">{t("dashboard.tabs.overview")}</TabsTrigger>
            <TabsTrigger value="analytics">{t("dashboard.tabs.analytics")}</TabsTrigger>
            <TabsTrigger value="deals">{t("dashboard.tabs.allDeals")}</TabsTrigger>
            <TabsTrigger value="reports">{t("dashboard.tabs.reports")}</TabsTrigger>
          </TabsList>
          <TabsContent value="overview" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              {dashboardStats.map((stat, index) => (
                <Card key={index}>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{stat.value}</div>
                    <p className="text-xs text-muted-foreground">{stat.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
              <Card className="col-span-4">
                <CardHeader>
                  <CardTitle>{t("dashboard.revenueOverview")}</CardTitle>
                  <CardDescription>{t("dashboard.revenueOverviewDesc")}</CardDescription>
                </CardHeader>
                <CardContent className="pl-2">
                  <Overview />
                </CardContent>
              </Card>
              <Card className="col-span-3">
                <CardHeader>
                  <CardTitle>{t("dashboard.recentSales")}</CardTitle>
                  <CardDescription>{t("dashboard.recentSalesDesc")}</CardDescription>
                </CardHeader>
                <CardContent>
                  <RecentSales />
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          <TabsContent value="deals" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>{t("dashboard.allDealsTitle")}</CardTitle>
                <CardDescription>{t("dashboard.allDealsDesc")}</CardDescription>
              </CardHeader>
              <CardContent>
                <DataTable />
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="analytics" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              {dashboardStats.map((stat, index) => (
                <Card key={index}>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{stat.value}</div>
                    <p className="text-xs text-muted-foreground">{stat.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
            <Card>
              <CardHeader>
                <CardTitle>{t("dashboard.analyticsTitle")}</CardTitle>
                <CardDescription>{t("dashboard.analyticsDesc")}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-center h-[200px] text-muted-foreground">
                  {t("dashboard.analyticsPlaceholder")}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="reports" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>{t("dashboard.reportsTitle")}</CardTitle>
                <CardDescription>{t("dashboard.reportsDesc")}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-center h-[200px] text-muted-foreground">
                  {t("dashboard.reportsPlaceholder")}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}