"use client"

import * as React from "react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import { useQuery } from "convex/react"
import { api } from "@/convex/_generated/api"
import type { Id } from "@/convex/_generated/dataModel"
import { useAuth } from "@/lib/auth-client"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { useIsMobile } from "@/hooks/use-mobile"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import { cn, formatDateDM, formatDateDMY } from "@/lib/utils"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group"
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"

export const description = "Distribuição semanal de tickets por canal"
type ChartRange = "7d" | "30d" | "90d"

type ChartAreaInteractiveProps = {
  range?: ChartRange
  onRangeChange?: (value: ChartRange) => void
  companyId?: string
  onCompanyChange?: (value: string) => void
  hideControls?: boolean
  title?: string
  description?: React.ReactNode
  className?: string
}

export function ChartAreaInteractive({
  range,
  onRangeChange,
  companyId,
  onCompanyChange,
  hideControls = false,
  title = "Entrada de tickets por canal",
  description: descriptionOverride,
  className,
}: ChartAreaInteractiveProps = {}) {
  const [mounted, setMounted] = React.useState(false)
  const isMobile = useIsMobile()
  const [internalRange, setInternalRange] = React.useState<ChartRange>(range ?? "7d")
  const timeRange = range ?? internalRange
  // Persistir seleção de empresa globalmente
  const [internalCompanyId, setInternalCompanyId] = usePersistentCompanyFilter("all")
  const selectedCompanyId = companyId ?? internalCompanyId
  const { session, convexUserId, isStaff } = useAuth()
  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID

  React.useEffect(() => {
    setMounted(true)
  }, [])

  React.useEffect(() => {
    if (!range && isMobile) {
      setInternalRange("7d")
    }
  }, [isMobile, range])

  const handleRangeChange = (value: ChartRange) => {
    if (!value) return
    onRangeChange?.(value)
    if (!range) {
      setInternalRange(value)
    }
  }

  const handleCompanyChange = (value: string) => {
    onCompanyChange?.(value)
    if (!companyId) {
      setInternalCompanyId(value)
    }
  }

  const reportsEnabled = Boolean(isStaff && convexUserId)
  const report = useQuery(
    api.reports.ticketsByChannel,
    reportsEnabled
      ? ({
          tenantId,
          viewerId: convexUserId as Id<"users">,
          range: timeRange,
          companyId: selectedCompanyId === "all" ? undefined : (selectedCompanyId as Id<"companies">),
        })
      : "skip"
  )
  const companies = useQuery(
    api.companies.list,
    reportsEnabled ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
  ) as Array<{ id: Id<"companies">; name: string }> | undefined
  const companyOptions = React.useMemo<SearchableComboboxOption[]>(() => {
    const base: SearchableComboboxOption[] = [{ value: "all", label: "Todas as empresas" }]
    if (!companies || companies.length === 0) {
      return base
    }
    const sorted = [...companies].sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
    return [
      base[0],
      ...sorted.map((company) => ({
        value: company.id,
        label: company.name,
      })),
    ]
  }, [companies])

  const channels = React.useMemo(() => report?.channels ?? [], [report])

  const palette = React.useMemo(
    () => [
      "var(--chart-1)",
      "var(--chart-2)",
      "var(--chart-3)",
      "var(--chart-4)",
      "var(--chart-5)",
    ],
    []
  )

  const chartConfig = React.useMemo(() => {
    const entries = channels.map((channel: string, index: number) => [
      channel,
      {
        label: channel
          .toLowerCase()
          .replace(/_/g, " ")
          .replace(/\b\w/g, (letter) => letter.toUpperCase()),
        color: palette[index % palette.length],
      },
    ])
    return Object.fromEntries(entries) as ChartConfig
  }, [channels, palette])

  const chartData = React.useMemo(() => {
    if (!report?.points) return []
    return report.points.map((point: { date: string; values: Record<string, number> }) => {
      const entry: Record<string, number | string> = { date: point.date }
      for (const channel of channels) {
        entry[channel] = point.values[channel] ?? 0
      }
      return entry
    })
  }, [channels, report])

  if (!mounted) {
    return (
      <div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
        Carregando gráfico...
      </div>
    )
  }

  const defaultDescription = (
    <>
      <span className="hidden @[540px]/card:block">
        Distribuição dos canais nos últimos {timeRange.replace("d", " dias")}
      </span>
      <span className="@[540px]/card:hidden">Período: {timeRange}</span>
    </>
  )

  return (
    <Card className={cn("@container/card", className)}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{descriptionOverride ?? defaultDescription}</CardDescription>
        <CardAction>
          <div className="flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:justify-end sm:gap-2">
            {!hideControls ? (
              <>
                <SearchableCombobox
                  value={selectedCompanyId}
                  onValueChange={(next) => handleCompanyChange(next ?? "all")}
                  options={companyOptions}
                  placeholder="Todas as empresas"
                  className="w-full min-w-56 sm:w-64"
                />
                <ToggleGroup
                  type="single"
                  value={timeRange}
                  onValueChange={(value) => handleRangeChange((value as ChartRange) ?? timeRange)}
                  variant="outline"
                  className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
                >
                  <ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
                  <ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
                  <ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
                </ToggleGroup>
                <Select value={timeRange} onValueChange={(value) => handleRangeChange(value as ChartRange)}>
                  <SelectTrigger
                    className="flex w-full min-w-40 @[767px]/card:hidden"
                    size="sm"
                    aria-label="Selecionar período"
                  >
                    <SelectValue placeholder="Selecionar período" />
                  </SelectTrigger>
                  <SelectContent className="rounded-xl">
                    <SelectItem value="90d" className="rounded-lg">
                      Últimos 90 dias
                    </SelectItem>
                    <SelectItem value="30d" className="rounded-lg">
                      Últimos 30 dias
                    </SelectItem>
                    <SelectItem value="7d" className="rounded-lg">
                      Últimos 7 dias
                    </SelectItem>
                  </SelectContent>
                </Select>
              </>
            ) : null}
            <Button asChild size="sm" variant="outline" className={cn(!hideControls && "sm:ml-1")}>
              <a
                href={`/api/reports/tickets-by-channel.xlsx?range=${timeRange}${selectedCompanyId !== "all" ? `&companyId=${selectedCompanyId}` : ""}`}
                download
              >
                Exportar XLSX
              </a>
            </Button>
          </div>
        </CardAction>
      </CardHeader>
      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
        {report === undefined ? (
          <div className="flex h-[250px] items-center justify-center">
            <Skeleton className="h-24 w-full" />
          </div>
        ) : chartData.length === 0 || channels.length === 0 ? (
          <div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
            Sem dados suficientes no período selecionado.
          </div>
        ) : (
          <ChartContainer
            config={chartConfig}
            className="aspect-auto h-[250px] w-full"
          >
            <AreaChart data={chartData}>
              <defs>
                {channels.map((channel: string) => (
                  <linearGradient key={channel} id={`fill-${channel}`} x1="0" y1="0" x2="0" y2="1">
                    <stop
                      offset="5%"
                      stopColor={chartConfig[channel]?.color ?? "var(--chart-1)"}
                      stopOpacity={0.85}
                    />
                    <stop
                      offset="95%"
                      stopColor={chartConfig[channel]?.color ?? "var(--chart-1)"}
                      stopOpacity={0.1}
                    />
                  </linearGradient>
                ))}
              </defs>
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="date"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                minTickGap={32}
                tickFormatter={(value) => formatDateDM(new Date(value))}
              />
              <ChartTooltip
                cursor={false}
                content={
                  <ChartTooltipContent
                    labelFormatter={(value) => formatDateDMY(new Date(value as string))}
                    indicator="dot"
                  />
                }
              />
              {channels
                .slice()
                .reverse()
                .map((channel: string) => (
                  <Area
                    key={channel}
                    dataKey={channel}
                    type="natural"
                    fill={`url(#fill-${channel})`}
                    stroke={chartConfig[channel]?.color ?? "var(--chart-1)"}
                    strokeWidth={2}
                    stackId="a"
                    name={
                      typeof chartConfig[channel]?.label === "string"
                        ? (chartConfig[channel]?.label as string)
                        : channel
                    }
                  />
                ))}
            </AreaChart>
          </ChartContainer>
        )}
      </CardContent>
    </Card>
  )
}

export default ChartAreaInteractive