"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useRouter, useSearchParams } from "next/navigation"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { X, Search, Filter } from "lucide-react"
import { format } from "date-fns"
import { cn } from "@/lib/utils"
import { KPISection } from "@/components/marketing/kpi-section"
import { ChannelPerformanceSection } from "@/components/marketing/channel-performance-section"
import { ChartsSection } from "@/components/marketing/charts-section"
import { ConvertedLeadsReports } from "@/components/marketing/converted-leads-reports"
import { LeadQualitySection } from "@/components/marketing/lead-quality-section"
import { TrafficSourcePerformance } from "@/components/marketing/traffic-source-performance"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { LeadTargetReport } from "@/components/marketing/lead-target-report"

export default function MarketingFunnelPage() {
  // Router and search params
  const router = useRouter()
  const searchParams = useSearchParams()

  // Filter states
  const [searchQuery, setSearchQuery] = useState("")
  const [dateRange, setDateRange] = useState<{ from?: Date; to?: Date }>({})
  const [dateRangeType, setDateRangeType] = useState<
    | ""
    | "today"
    | "yesterday"
    | "this_week"
    | "last_week"
    | "this_month"
    | "last_month"
    | "this_year"
    | "last_year"
    | "custom"
  >("")
  const [selectedProperties, setSelectedProperties] = useState<string[]>(["KTAHV", "KAPPL", "VILLA RAAG"])
  // const isFirstLoad = useRef(true)

  const [loading, setLoading] = useState(true)

  // const isBlockingLoad = loading && isFirstLoad.current

  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)

  // useEffect(() => {
  //   if (isBlockingLoad) {
  //     document.body.style.overflow = "hidden"
  //   } else {
  //     document.body.style.overflow = ""
  //   }

  //   return () => {
  //     document.body.style.overflow = ""
  //   }
  // }, [isBlockingLoad])

  // Apply date preset
  const applyDatePreset = (type: string) => {
    const today = new Date()
    let from: Date | undefined
    let to: Date | undefined

    switch (type) {
      case "today":
        from = today
        to = today
        break
      case "yesterday":
        from = new Date(today)
        from.setDate(from.getDate() - 1)
        to = from
        break
      case "this_week": {
        const day = today.getDay() || 7
        from = new Date(today)
        from.setDate(today.getDate() - day + 1)
        to = today
        break
      }
      case "last_week": {
        const day = today.getDay() || 7
        from = new Date(today)
        from.setDate(today.getDate() - day - 6)
        to = new Date(today)
        to.setDate(today.getDate() - day)
        break
      }
      case "this_month":
        from = new Date(today.getFullYear(), today.getMonth(), 1)
        to = today
        break
      case "last_month":
        from = new Date(today.getFullYear(), today.getMonth() - 1, 1)
        to = new Date(today.getFullYear(), today.getMonth(), 0)
        break
      case "this_year":
        from = new Date(today.getFullYear(), 0, 1)
        to = today
        break
      case "last_year":
        from = new Date(today.getFullYear() - 1, 0, 1)
        to = new Date(today.getFullYear() - 1, 11, 31)
        break
    }

    setDateRange({ from, to })
  }

  const toggleProperty = (property: string) => {
    setSelectedProperties((prev) =>
      prev.includes(property) ? prev.filter((p) => p !== property) : [...prev, property]
    )
  }

  // Reset filters
  const resetFilters = () => {
    setSearchQuery("")
    setDateRange({})
    setDateRangeType("")
    setSelectedProperties(["KTAHV", "KAPPL", "VILLA RAAG"])
  }

  // Clear date range
  const clearDateRange = () => {
    setDateRange({})
    setDateRangeType("")
  }

  // Get active filters
  const getActiveFilters = () => {
    const filters = []
    if (searchQuery) {
      filters.push({ type: "search", value: searchQuery })
    }
    if (dateRange.from || dateRange.to) {
      filters.push({
        type: "dateRange",
        value: `${dateRange.from ? format(dateRange.from, "MMM dd") : ""} - ${dateRange.to ? format(dateRange.to, "MMM dd") : ""}`,
      })
    }
    if (selectedProperties.length <= 3) {
      filters.push(...selectedProperties.map((prop) => ({ type: "property", value: prop })))
    }
    return filters
  }

  // Remove filter
  const removeFilter = (filter: { type: string; value: string }) => {
    switch (filter.type) {
      case "search":
        setSearchQuery("")
        break
      case "dateRange":
        clearDateRange()
        break
      case "property":
        setSelectedProperties((prev) => prev.filter((p) => p !== filter.value))
        break
    }
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false)
    }, 1200)

    return () => clearTimeout(timer)
  }, [])


  // Initialize from URL parameters
  const isHydrated = useRef(false)

  useEffect(() => {
    if (isHydrated.current) return

    const search = searchParams.get("search")
    const range = searchParams.get("range")
    const from = searchParams.get("from")
    const to = searchParams.get("to")

    if (search) setSearchQuery(search)

    if (range && range !== "custom") {
      setDateRangeType(range as any)
      applyDatePreset(range)
    }

    if (from && to) {
      setDateRange({ from: new Date(from), to: new Date(to) })
    }

    isHydrated.current = true
  }, [searchParams])

  // Mobile filters content component
  const MobileFiltersContent = () => (
    <div className="space-y-6 p-4">
      {/* Search Box */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#1f2a2e]">Search</label>
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
          <Input
            type="text"
            placeholder="Search by Campaigns, Treatments, Sources..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 h-10 border-[#dfe7e2]"
          />
        </div>
      </div>

      {/* Date Range */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#1f2a2e]">Date Range</label>
        <Select
          value={dateRangeType}
          onValueChange={(val) => {
            setDateRangeType(val as any)
            if (val !== "custom") {
              applyDatePreset(val)
            } else {
              setDateRange({})
            }
          }}
        >
          <SelectTrigger className="h-10 w-full border-[#dfe7e2]">
            <SelectValue placeholder="Select date range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="today">Today</SelectItem>
            <SelectItem value="yesterday">Yesterday</SelectItem>
            <SelectItem value="this_week">This Week</SelectItem>
            <SelectItem value="last_week">Last Week</SelectItem>
            <SelectItem value="this_month">This Month</SelectItem>
            <SelectItem value="last_month">Last Month</SelectItem>
            <SelectItem value="this_year">This Year</SelectItem>
            <SelectItem value="last_year">Last Year</SelectItem>
            <SelectItem value="custom">Custom</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Custom Date Inputs */}
      {dateRangeType === "custom" && (
        <div className="grid grid-cols-1 gap-3">
          <div className="space-y-1">
            <label className="text-xs font-medium text-slate-600">Start Date</label>
            <input
              type="date"
              className="h-10 w-full rounded-md border border-[#dfe7e2] px-3 text-sm"
              value={dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : ""}
              onChange={(e) => {
                setDateRange({
                  from: e.target.value ? new Date(e.target.value) : undefined,
                  to: dateRange.to,
                })
              }}
            />
          </div>

          <div className="space-y-1">
            <label className="text-xs font-medium text-slate-600">End Date</label>
            <input
              type="date"
              className="h-10 w-full rounded-md border border-[#dfe7e2] px-3 text-sm"
              value={dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : ""}
              onChange={(e) => {
                setDateRange({
                  from: dateRange.from,
                  to: e.target.value ? new Date(e.target.value) : undefined,
                })
              }}
            />
          </div>
        </div>
      )}

      {(dateRange.from || dateRange.to) && (
        <Button
          variant="ghost"
          size="sm"
          onClick={clearDateRange}
          className="w-full text-[#1f2a2e] hover:bg-[#2f6b4f]/10"
        >
          <X className="mr-2 h-4 w-4" />
          Clear date range
        </Button>
      )}

      {/* Properties */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#1f2a2e]">Properties</label>
        <div className="grid grid-cols-1 gap-2">
          {["KTAHV", "KAPPL", "VILLA RAAG"].map((property) => (
            <Button
              key={property}
              variant={selectedProperties.includes(property) ? "default" : "outline"}
              size="sm"
              onClick={() => toggleProperty(property)}
              className={cn(
                "justify-start h-10 font-medium transition-all",
                selectedProperties.includes(property)
                  ? "bg-[#2f6b4f] text-white hover:bg-[#2f6b4f]/90"
                  : "border-[#dfe7e2] text-[#1f2a2e] hover:bg-[#2f6b4f]/10"
              )}
            >
              {property}
            </Button>
          ))}
        </div>
      </div>

      {/* Reset Button */}
      <Button
        variant="outline"
        onClick={() => {
          resetFilters()
          setMobileFiltersOpen(true)
        }}
        className="w-full border-[#dfe7e2] text-[#1f2a2e] hover:bg-[#2f6b4f]/10"
      >
        <X className="mr-2 h-4 w-4" />
        Reset all filters
      </Button>
    </div>
  )

  // Get current month for default
  const currentMonth = new Date().getMonth()
  const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]

  const filters = {
    year: "",          // ✅ allow ALL years
    months: [],        // ✅ allow ALL months
    searchQuery,
    dateRange,
    dateRangeType,
    properties: selectedProperties,
    channels: [],
  }


  return (
    <div className="relative min-h-screen bg-white">
      {/* Loading Overlay */}
      {loading && (
        <div className="absolute inset-0 z-40 bg-white/80 backdrop-blur-sm flex items-center justify-center">
          <div className="flex flex-col items-center">
            <img
              src="/grouploader"
              alt="Loading"
              className="h-[110px] w-auto"
            />
            <p className="mt-4 text-[#1f2a2e] font-medium">
              Loading Marketing Funnel data…
            </p>
          </div>
        </div>
      )}
      {/* Header */}
      <div className="relative z-10">
        <div className="bg-gradient-to-r from-[#007f73] via-[#009688] to-[#7c5cff] shadow-md">
          <div className="w-full px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between py-4 sm:py-5 lg:py-6">
              <div className="flex items-center gap-3 sm:gap-5 min-w-0">
                <div className="w-11 h-11 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-white/15 backdrop-blur-md flex items-center justify-center flex-shrink-0">
                  <div className="bg-white rounded-md sm:rounded-lg p-1.5 sm:p-2">
                    <img
                      src="/funnel.png"
                      alt="Marketing Funnel"
                      className="w-[24px] h-[24px] sm:w-[32px] sm:h-[32px] object-contain"
                    />
                  </div>
                </div>

                <div className="min-w-0">
                  <h1 className="text-base sm:text-xl lg:text-3xl font-semibold text-white truncate">
                    Marketing Funnel
                  </h1>
                  <p className="hidden sm:block text-sm lg:text-base text-white/80">
                    Performance overview & conversion analytics
                  </p>
                </div>
              </div>

              <div className="lg:hidden flex-shrink-0">
                <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
                  <SheetTrigger asChild>
                    <Button
                      size="icon"
                      className="h-10 w-10 bg-white/15 text-white hover:bg-white/25"
                    >
                      <Filter className="h-5 w-5" />
                    </Button>
                  </SheetTrigger>

                  <SheetContent side="right" className="w-80 sm:w-96 overflow-y-auto">
                    <SheetHeader>
                      <SheetTitle className="text-slate-800">
                        Filters
                      </SheetTitle>
                    </SheetHeader>
                    <MobileFiltersContent />
                  </SheetContent>
                </Sheet>
              </div>

              <div className="hidden lg:flex items-center gap-2 px-3 py-2 rounded-full bg-white/10 backdrop-blur-md">
                {["KTAHV", "KAPPL", "VILLA RAAG"].map((property) => {
                  const isActive = selectedProperties.includes(property)
                  const hasSelection = selectedProperties.length > 0

                  return (
                    <Button
                      key={property}
                      variant="ghost"
                      size="sm"
                      onClick={() => toggleProperty(property)}
                      className={cn(
                        "h-11 px-6 rounded-full text-sm font-semibold transition-all",
                        !hasSelection && "bg-white text-[#007f73]",
                        hasSelection && isActive && "bg-white text-[#007f73] shadow-md",
                        hasSelection && !isActive && "text-white hover:bg-white/20"
                      )}
                    >
                      {property}
                    </Button>
                  )
                })}
              </div>
            </div>

            <div className="lg:hidden pb-3">
              <div className="flex gap-2 overflow-x-auto scrollbar-hide">
                {["KTAHV", "KAPPL", "VILLA RAAG"].map((property) => {
                  const isActive = selectedProperties.includes(property)
                  const hasSelection = selectedProperties.length > 0

                  return (
                    <Button
                      key={property}
                      size="sm"
                      onClick={() => toggleProperty(property)}
                      className={cn(
                        "h-9 px-4 rounded-full text-sm font-semibold whitespace-nowrap transition-all",
                        !hasSelection && "bg-white text-[#007f73]",
                        hasSelection && isActive && "bg-white text-[#007f73] shadow-sm",
                        hasSelection && !isActive && "bg-white/20 text-white"
                      )}
                    >
                      {property}
                    </Button>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Desktop Filters */}
      <div className="hidden lg:block w-full mt-6">
        <div className="border-2 border-slate-300 rounded-2xl overflow-hidden shadow-lg bg-white">
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-4 sm:px-5 py-4 bg-gradient-to-r from-teal-50 via-cyan-50 to-blue-50 border-b border-slate-200">
            <div className="flex items-center gap-2">
              <div className="p-2 rounded-md bg-blue-50">
                <Filter className="h-4 w-4 text-blue-600" />
              </div>
              <div>
                <h3 className="text-sm sm:text-base font-semibold text-slate-800 leading-tight">
                  Filters & Search
                </h3>
                <p className="text-xs text-slate-500">
                  Refine results using filters
                </p>
              </div>
            </div>

            <Button
              variant="outline"
              size="sm"
              onClick={resetFilters}
              className="border-slate-300 text-slate-700 hover:bg-slate-100"
            >
              <X className="mr-2 h-4 w-4" />
              Clear Filters
            </Button>
          </div>

          <div className="px-6 py-5 space-y-5 bg-white">
            <div className="grid grid-cols-2 gap-5">
              {/* Search Box */}
              <div className="space-y-1">
                <label className="text-xs font-medium text-slate-600">Search</label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                  <Input
                    type="text"
                    placeholder="Search by Campaign, Treatments, Sources..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10 h-10 border-slate-200"
                  />
                </div>
              </div>

              {/* Date Range Type */}
              <div className="space-y-1">
                <label className="text-xs font-medium text-slate-600">Date Range</label>
                <Select
                  value={dateRangeType}
                  onValueChange={(val) => {
                    setDateRangeType(val as any)
                    if (val !== "custom") {
                      applyDatePreset(val)
                    } else {
                      setDateRange({})
                    }
                  }}
                >
                  <SelectTrigger className="h-10 border-slate-200 w-full">
                    <SelectValue placeholder="Select date range" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="today">Today</SelectItem>
                    <SelectItem value="yesterday">Yesterday</SelectItem>
                    <SelectItem value="this_week">This Week</SelectItem>
                    <SelectItem value="last_week">Last Week</SelectItem>
                    <SelectItem value="this_month">This Month</SelectItem>
                    <SelectItem value="last_month">Last Month</SelectItem>
                    <SelectItem value="this_year">This Year</SelectItem>
                    <SelectItem value="last_year">Last Year</SelectItem>
                    <SelectItem value="custom">Custom</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Custom Date Inputs */}
            {dateRangeType === "custom" && (
              <div className="grid grid-cols-2 gap-5 max-w-3xl">
                <div className="space-y-1">
                  <label className="text-xs font-medium text-slate-600">Start Date</label>
                  <input
                    type="date"
                    className="h-10 w-full rounded-md border border-slate-200 px-3 text-sm"
                    value={dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : ""}
                    onChange={(e) => {
                      setDateRange({
                        from: e.target.value ? new Date(e.target.value) : undefined,
                        to: dateRange.to,
                      })
                    }}
                  />
                </div>

                <div className="space-y-1">
                  <label className="text-xs font-medium text-slate-600">End Date</label>
                  <input
                    type="date"
                    className="h-10 w-full rounded-md border border-slate-200 px-3 text-sm"
                    value={dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : ""}
                    onChange={(e) => {
                      setDateRange({
                        from: dateRange.from,
                        to: e.target.value ? new Date(e.target.value) : undefined,
                      })
                    }}
                  />
                </div>
              </div>
            )}

            {/* Active Filters */}
            {getActiveFilters().length > 0 && (
              <div className="pt-4 border-t border-slate-200 flex flex-wrap gap-2">
                {getActiveFilters().map((filter, i) => (
                  <Badge
                    key={`${filter.type}-${filter.value}-${i}`}
                    className="bg-blue-50 text-blue-700 hover:bg-blue-100 cursor-pointer"
                    onClick={() => removeFilter(filter)}
                  >
                    {filter.value}
                    <X className="ml-1 h-3 w-3" />
                  </Badge>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Mobile Filters Card */}
      <div className="lg:hidden w-full">
        <div className="border-2 border-slate-300 rounded-2xl overflow-hidden shadow-lg bg-white">
          <div className="flex items-center gap-4 px-4 py-4 bg-gradient-to-r from-teal-50 via-cyan-50 to-blue-50 border-b border-slate-200">
            <div className="p-3 rounded-xl bg-emerald-100">
              <Filter className="h-5 w-5 text-emerald-700" />
            </div>

            <div>
              <h3 className="text-base font-bold text-slate-800 leading-tight">
                Filters & Search
              </h3>
              <p className="text-sm text-slate-500">
                Refine results using filters
              </p>
            </div>
          </div>

          {getActiveFilters().length > 0 && (
            <div className="px-4 py-3 border-b border-slate-200 bg-slate-50">
              <div className="flex items-center justify-between mb-2">
                <span className="text-xs font-semibold text-slate-600">
                  Active Filters
                </span>

                <Button
                  variant="ghost"
                  size="sm"
                  onClick={resetFilters}
                  className="h-6 px-2 text-xs text-slate-600 hover:bg-slate-100"
                >
                  Clear all
                </Button>
              </div>

              <div className="flex flex-wrap gap-2">
                {getActiveFilters().map((filter, index) => (
                  <Badge
                    key={`${filter.type}-${filter.value}-${index}`}
                    className="bg-white border border-slate-200 text-slate-700 text-xs px-2 py-1 flex items-center gap-1 cursor-pointer hover:bg-slate-100"
                    onClick={() => removeFilter(filter)}
                  >
                    {filter.value}
                    <X className="h-3 w-3 text-slate-400" />
                  </Badge>
                ))}
              </div>
            </div>
          )}

          <div className="px-4 py-4 space-y-4 bg-slate-50">
            {/* Search Box */}
            <div className="space-y-1">
              <label className="text-xs font-medium text-slate-600">Search</label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  type="text"
                  placeholder="Search..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 h-10 border-slate-200"
                />
              </div>
            </div>

            {/* Date Range */}
            <div className="space-y-1">
              <label className="text-xs font-medium text-slate-600">Date Range</label>
              <Select
                value={dateRangeType}
                onValueChange={(val) => {
                  setDateRangeType(val as any)
                  if (val !== "custom") {
                    applyDatePreset(val)
                  } else {
                    setDateRange({})
                  }
                }}
              >
                <SelectTrigger className="h-10 w-full border-slate-200">
                  <SelectValue placeholder="Select date range" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="today">Today</SelectItem>
                  <SelectItem value="yesterday">Yesterday</SelectItem>
                  <SelectItem value="this_week">This Week</SelectItem>
                  <SelectItem value="last_week">Last Week</SelectItem>
                  <SelectItem value="this_month">This Month</SelectItem>
                  <SelectItem value="last_month">Last Month</SelectItem>
                  <SelectItem value="this_year">This Year</SelectItem>
                  <SelectItem value="last_year">Last Year</SelectItem>
                  <SelectItem value="custom">Custom</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Custom Date Inputs */}
            {dateRangeType === "custom" && (
              <div className="grid grid-cols-1 gap-3">
                <div className="space-y-1">
                  <label className="text-xs font-medium text-slate-600">Start Date</label>
                  <input
                    type="date"
                    className="h-10 w-full rounded-md border border-slate-200 px-3 text-sm"
                    value={dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : ""}
                    onChange={(e) => {
                      setDateRange({
                        from: e.target.value ? new Date(e.target.value) : undefined,
                        to: dateRange.to,
                      })
                    }}
                  />
                </div>

                <div className="space-y-1">
                  <label className="text-xs font-medium text-slate-600">End Date</label>
                  <input
                    type="date"
                    className="h-10 w-full rounded-md border border-slate-200 px-3 text-sm"
                    value={dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : ""}
                    onChange={(e) => {
                      setDateRange({
                        from: dateRange.from,
                        to: e.target.value ? new Date(e.target.value) : undefined,
                      })
                    }}
                  />
                </div>
              </div>
            )}

            {/* Clear Filters */}
            <Button
              variant="outline"
              onClick={resetFilters}
              className="w-full h-10 border-slate-300 text-slate-700 font-medium hover:bg-slate-100"
            >
              <X className="mr-2 h-4 w-4" />
              Clear Filters
            </Button>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div
        className={cn(
          "w-full transition-opacity",
          loading && "pointer-events-none opacity-40"
        )}
      >
        {/* KPI – has full-width header */}
        <KPISection />
        <LeadQualitySection />

        <TrafficSourcePerformance filters={filters} />
        <LeadTargetReport
          companies={selectedProperties.map(property =>
            property === "VILLA RAAG" ? "VILLARAAG" : property
          ) as Company[]}
          startDate={dateRange.from?.toISOString().slice(0, 10)}
          endDate={dateRange.to?.toISOString().slice(0, 10)}
        />

        <ConvertedLeadsReports />

        <ChannelPerformanceSection />

        <ChartsSection />
        {/* Padded content sections */}
        {/* <div className="w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
          <div className="space-y-6 sm:space-y-8">


            
            
          </div>
        </div> */}
      </div>

    </div>
  )
}