import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { XAxis, YAxis, LineChart, Line, BarChart, Bar, ResponsiveContainer } from "recharts"
import { useGetWeeklyBookings, useGetWeeklyEarnings } from "@/lib/react-query/hooks/analytics"
import { useState } from "react"
import { Calendar, TrendingUp } from "lucide-react"
import { useTranslations } from "next-intl"

export function OverviewTab() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <WeeklyBookingChart />
      <WeeklyEarningsChart />
    </div>
  )
}

const bookingConfig = {
  bookings: {
    label: "Bookings",
    color: "#2563eb" // Tailwind blue-600
  }
}

function EmptyBookingsState() {
  const t = useTranslations()

  return (
    <div className="flex flex-col items-center justify-center py-12 text-center">
      <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4">
        <Calendar className="w-8 h-8 text-blue-600" />
      </div>
      <h3 className="text-lg font-semibold text-gray-900 mb-2">{t("analytics.overview.bookings.empty.title")}</h3>
      <p className="text-sm text-gray-500 mb-4 max-w-xs">
        {t("analytics.overview.bookings.empty.description")}
      </p>
      <div className="flex items-center gap-2 text-xs text-gray-400">
        <TrendingUp className="w-4 h-4" />
        <span>{t("analytics.overview.bookings.empty.subtitle")}</span>
      </div>
    </div>
  )
}

function EmptyEarningsState() {
  const t = useTranslations()

  return (
    <div className="flex flex-col items-center justify-center py-12 text-center">
      <div className="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-4">
        <TrendingUp className="w-8 h-8 text-green-600" />
      </div>
      <h3 className="text-lg font-semibold text-gray-900 mb-2">{t("analytics.overview.earnings.empty.title")}</h3>
      <p className="text-sm text-gray-500 mb-4 max-w-xs">
        {t("analytics.overview.earnings.empty.description")}
      </p>
      <div className="flex items-center gap-2 text-xs text-gray-400">
        <TrendingUp className="w-4 h-4" />
        <span>{t("analytics.overview.earnings.empty.subtitle")}</span>
      </div>
    </div>
  )
}

function WeeklyBookingChart() {
  const [range, setRange] = useState("daily")
  const { data: bookingsData } = useGetWeeklyBookings(range)
  const t = useTranslations()

  if (!bookingsData || bookingsData.length === 0) {
    return (
      <Card>
        <CardHeader className="flex flex-row items-start justify-between space-y-0">
          <div className="space-y-1">
            <CardTitle className="font-medium text-primary-blue">{t("analytics.overview.bookings.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("analytics.overview.bookings.description")}</CardDescription>
          </div>
          <Select value={range} onValueChange={setRange}>
            <SelectTrigger className="w-[120px] h-9">
              <SelectValue placeholder={t("analytics.overview.bookings.selectRange")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="daily">{t("analytics.overview.bookings.ranges.daily")}</SelectItem>
              <SelectItem value="weekly">{t("analytics.overview.bookings.ranges.weekly")}</SelectItem>
              <SelectItem value="monthly">{t("analytics.overview.bookings.ranges.monthly")}</SelectItem>
            </SelectContent>
          </Select>
        </CardHeader>
        <CardContent>
          <EmptyBookingsState />
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader className="flex flex-row items-start justify-between space-y-0">
        <div className="space-y-1">
          <CardTitle className="font-medium text-primary-blue">{t("analytics.overview.bookings.title")}</CardTitle>
          <CardDescription className="text-xs text-muted-foreground">{t("analytics.overview.bookings.description")}</CardDescription>
        </div>
        <Select value={range} onValueChange={setRange}>
          <SelectTrigger className="w-[120px] h-9">
            <SelectValue placeholder={t("analytics.overview.bookings.selectRange")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="daily">{t("analytics.overview.bookings.ranges.daily")}</SelectItem>
            <SelectItem value="weekly">{t("analytics.overview.bookings.ranges.weekly")}</SelectItem>
            <SelectItem value="monthly">{t("analytics.overview.bookings.ranges.monthly")}</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        <ChartContainer config={bookingConfig} className="h-[300px] w-full">
          <BarChart data={bookingsData}>
            <XAxis
              dataKey="label"
              tickLine={false}
              axisLine={false}
              //   tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
            />
            <YAxis
              tickLine={false}
              axisLine={false}
              //   tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
            />
            <ChartTooltip content={<ChartTooltipContent formatter={value => [`${value} `, t("analytics.overview.bookings.tooltip")]} />} />
            <Bar dataKey="bookings" fill="#265491" radius={[6, 6, 0, 0]} barSize={24} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

const earningsConfig = {
  earnings: {
    label: "Earnings",
    color: "#265491" // Tailwind blue-700
  }
}

function WeeklyEarningsChart() {
  const [range, setRange] = useState("daily")
  const { data: earningsData } = useGetWeeklyEarnings(range)
  const t = useTranslations()

  if (!earningsData || earningsData.length === 0) {
    return (
      <Card>
        <CardHeader className="flex flex-row items-start justify-between space-y-0">
          <div className="space-y-1">
            <CardTitle className="font-medium text-primary-blue">{t("analytics.overview.earnings.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("analytics.overview.earnings.description")}</CardDescription>
          </div>
          <Select value={range} onValueChange={setRange}>
            <SelectTrigger className="w-[120px] h-9">
              <SelectValue placeholder={t("analytics.overview.bookings.selectRange")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="daily">{t("analytics.overview.bookings.ranges.daily")}</SelectItem>
              <SelectItem value="weekly">{t("analytics.overview.bookings.ranges.weekly")}</SelectItem>
              <SelectItem value="monthly">{t("analytics.overview.bookings.ranges.monthly")}</SelectItem>
            </SelectContent>
          </Select>
        </CardHeader>
        <CardContent>
          <EmptyEarningsState />
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader className="flex flex-row items-start justify-between space-y-0">
        <div className="space-y-1">
          <CardTitle className="font-medium text-primary-blue">{t("analytics.overview.earnings.title")}</CardTitle>
          <CardDescription className="text-xs text-muted-foreground">{t("analytics.overview.earnings.earningsDescription")}</CardDescription>
        </div>
        <Select value={range} onValueChange={setRange}>
          <SelectTrigger className="w-[120px] h-9">
            <SelectValue placeholder={t("analytics.overview.bookings.selectRange")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="daily">{t("analytics.overview.bookings.ranges.daily")}</SelectItem>
            <SelectItem value="weekly">{t("analytics.overview.bookings.ranges.weekly")}</SelectItem>
            <SelectItem value="monthly">{t("analytics.overview.bookings.ranges.monthly")}</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        <ChartContainer config={earningsConfig} className="h-[300px] w-full">
          <LineChart data={earningsData}>
            <XAxis dataKey="label" tickLine={false} axisLine={false} tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }} />
            <YAxis
              tickLine={false}
              axisLine={false}
              tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
              tickFormatter={value => `€${value}`}
            />
            <ChartTooltip content={<ChartTooltipContent formatter={value => [`€${value} `, t("analytics.overview.earnings.tooltip")]} />} />
            <Line
              type="monotone"
              dataKey="earnings"
              stroke="#265491"
              strokeWidth={3}
              dot={{ fill: "#265491", strokeWidth: 2, r: 4 }}
              activeDot={{ r: 6, stroke: "#265491", strokeWidth: 2 }}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}