"use client"

import * as React from "react"
import { Activity, ActivityType, ActivityStats } from "./types"
import { ActivityItem } from "./activity-item"
import { apiActivityToActivity } from "./utils"
import { useGetActivitiesQuery } from "@/api/rtk/activities-api"
import { useGetTeamsQuery } from "@/api/rtk/teams-api"
import { formatTeamLabelForUi } from "@/lib/deal-display"
import { useAuthToken } from "@/hooks/use-auth-token"
import { Search, FileText, Zap, ListTodo, UserRound } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Loading } from "@/components/ui/loading"
import { NoDataFound } from "@/components/ui/no-data-found"
import { ReactSelect } from "@/components/ui/react-select"
import { cn } from "@/lib/utils"

type ActivityKpiType = keyof Pick<ActivityStats, "Note" | "Lead" | "Deal" | "Task">

const ACTIVITIES_HEADER_GLASS_CLASS =
  "rounded-2xl border border-white/40 bg-white/50 dark:bg-white/10 backdrop-blur-[15px] shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)]"

const ACTIVITIES_FILTER_TRIGGER_CLASS =
  "h-10 min-h-10 max-h-10 px-3.5 rounded-xl w-full text-[13px] font-bold font-['Lexend_Deca'] border-border/80 bg-white shadow-sm hover:border-accent transition-all ring-0 focus:ring-0 lg:min-w-[140px]"

const ACTIVITIES_FILTER_CONTENT_CLASS = "rounded-2xl border-border/40 shadow-premium"

const ACT_TYPES: { type: ActivityKpiType; icon: React.ReactNode }[] = [
  { type: "Note", icon: <FileText size={18} /> },
  { type: "Lead", icon: <UserRound size={18} /> },
  { type: "Deal", icon: <Zap size={18} /> },
  { type: "Task", icon: <ListTodo size={18} /> },
]

export default function ActivitiesPage() {
  const [search, setSearch] = React.useState("")
  const [repFilter, setRepFilter] = React.useState("all")
  const [teamFilter, setTeamFilter] = React.useState("all")
  const [activeType, setActiveType] = React.useState<ActivityType | "All">("All")

  const { token: accessToken } = useAuthToken()
  const { data: teams = [] } = useGetTeamsQuery(undefined, { skip: !accessToken })
  const teamSlug = teamFilter === "all" ? undefined : teamFilter
  const activitiesApiType =
    activeType === "All"
      ? undefined
      : activeType === "Lead" || activeType === "Deal"
        ? "Deal"
        : activeType
  const { data: apiActivities = [], isLoading } = useGetActivitiesQuery(
    {
      days: 14,
      type: activitiesApiType,
      repId: repFilter !== "all" ? repFilter : undefined,
      team: teamSlug,
    },
    { skip: !accessToken }
  )

  const apiActivitiesNoLogout = React.useMemo(
    () => apiActivities.filter((a) => a.type !== "Logout"),
    [apiActivities]
  )

  const activities: Activity[] = React.useMemo(
    () => apiActivitiesNoLogout.map(apiActivityToActivity),
    [apiActivitiesNoLogout]
  )

  const activitiesForTab = React.useMemo(() => {
    if (activeType === "All") return activities
    if (activeType === "Lead") return activities.filter((a) => a.type === "Lead")
    if (activeType === "Deal") return activities.filter((a) => a.type === "Deal")
    return activities.filter((a) => a.type === activeType)
  }, [activities, activeType])

  const repOptions = React.useMemo(() => {
    const reps = new Map<string, string>()
    apiActivitiesNoLogout.forEach((a) => {
      if (!reps.has(a.user.name)) {
        reps.set(a.user.name, a.userId)
      }
    })
    return Array.from(reps.entries()).map(([name, id]) => ({ name, id }))
  }, [apiActivitiesNoLogout])

  const teamFilterOptions = React.useMemo(
    () => [
      { value: "all", label: "All Teams" },
      ...teams.map((t) => ({
        value: t.name.toLowerCase().replace(/\s+/g, "-"),
        label: (
          <span className="flex items-center gap-2">
            <span
              className="size-2.5 rounded-full shrink-0"
              style={{ backgroundColor: t.color || "#94a3b8" }}
            />
            {formatTeamLabelForUi(t.name)}
          </span>
        ),
      })),
    ],
    [teams],
  )

  const repFilterOptions = React.useMemo(
    () => [
      { value: "all", label: "All Reps" },
      ...repOptions.map((r) => ({ value: r.id, label: r.name })),
    ],
    [repOptions],
  )

  const filteredActivities = activitiesForTab.filter(
    (a) =>
      search === "" ||
      (a.company + a.rep + a.desc)
        .toLowerCase()
        .includes(search.toLowerCase())
  )

  const stats: ActivityStats = {
    Call: 0,
    Email: 0,
    Meeting: 0,
    Note: filteredActivities.filter((a) => a.type === "Note").length,
    Lead: filteredActivities.filter((a) => a.type === "Lead").length,
    Deal: filteredActivities.filter((a) => a.type === "Deal").length,

    Task: filteredActivities.filter((a) => a.type === "Task").length,
  }

  const groups: Record<string, Activity[]> = {}
  filteredActivities.forEach((a) => {
    const k =
      a.day === 0 ? "Today" : a.day === 1 ? "Yesterday" : `${a.day} days ago`
    if (!groups[k]) groups[k] = []
    groups[k].push(a)
  })

  const typeOptions: (ActivityType | "All")[] = [
    "All",
    "Note",
    "Lead",
    "Deal",
    "Task",
  ]

  return (
    <div className="flex flex-col h-full gap-4.5 p-1 sm:p-2 md:p-4 animate-in fade-in duration-500 w-full max-w-full overflow-x-hidden">
      {/* Header — glass card (matches Tasks / Contacts) */}
      <div className={cn("flex flex-col gap-4 p-4 md:p-6", ACTIVITIES_HEADER_GLASS_CLASS)}>
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div className="flex flex-col min-w-0 shrink-0">
            <h1 className="text-[25px] md:text-[28px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
              Activities
            </h1>
            <div className="flex flex-wrap items-center gap-2 mt-2">
              <span className="text-[12px] font-bold text-text/80 bg-accent/5 px-2 py-0.5 rounded-md border border-accent/10">
                {filteredActivities.length} Shown
              </span>
              <span className="text-[12px] font-bold text-accent/90 bg-accent/5 px-2 py-0.5 rounded-md border border-accent/10">
                Last 14 days
              </span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-2 lg:flex lg:flex-row items-stretch lg:items-center gap-3 w-full pt-1 border-t border-border/10">
          <div className="relative col-span-2 lg:flex-1 group">
            <Search
              size={14}
              className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-accent transition-colors duration-300 pointer-events-none"
            />
            <Input
              type="search"
              placeholder="Search activities..."
              className="pl-10 pr-4 h-10 text-[13px] font-bold bg-white border-border/80 rounded-xl w-full font-['Lexend_Deca'] shadow-sm focus:ring-accent/20 focus:border-accent hover:border-accent/40 transition-all placeholder:text-gray-400"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          <div className="col-span-1">
            <ReactSelect
              value={teamFilter}
              onValueChange={setTeamFilter}
              options={teamFilterOptions}
              placeholder="All Teams"
              aria-label="Filter by team"
              triggerClassName={ACTIVITIES_FILTER_TRIGGER_CLASS}
              contentClassName={ACTIVITIES_FILTER_CONTENT_CLASS}
            />
          </div>
          <div className="col-span-1">
            <ReactSelect
              value={repFilter}
              onValueChange={setRepFilter}
              options={repFilterOptions}
              placeholder="All Reps"
              aria-label="Filter by rep"
              triggerClassName={ACTIVITIES_FILTER_TRIGGER_CLASS}
              contentClassName={ACTIVITIES_FILTER_CONTENT_CLASS}
            />
          </div>
        </div>
      </div>

      {/* Stats strip */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-3.5">
        {ACT_TYPES.map((at) => (
          <Card
            key={at.type}
            className={cn(
              "gap-0 p-2.5 sm:p-4 min-w-0 flex-row items-center group border-white/40 bg-white/50 backdrop-blur-[15px]",
              "hover:border-accent/30 hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.08)] transition-all duration-300",
            )}
          >
            <div
              className="size-10 rounded-xl flex items-center justify-center shrink-0 border border-white/60 bg-white/40 group-hover:bg-accent/5 transition-colors"
              style={{ color: "var(--accent)" }}
            >
              {at.icon}
            </div>
            <div className="flex flex-col ml-2.5 sm:ml-4 min-w-0">
              <span className="text-[10px] font-bold text-gray-700 uppercase tracking-[0.08em] font-['Lexend_Deca']">
                {at.type}s
              </span>
              <span className="text-[18px] sm:text-[20px] font-extrabold text-text font-['Lexend_Deca'] tracking-tight leading-tight truncate">
                {stats[at.type]}
              </span>
            </div>
          </Card>
        ))}
      </div>

      {/* Type filter pills */}
      <div
        className={cn(
          "flex items-center gap-1.5 overflow-x-auto scrollbar-themed p-2 rounded-2xl border border-white/40 bg-white/40 backdrop-blur-[12px]",
        )}
      >
        {typeOptions.map((tp) => (
          <button
            key={tp}
            type="button"
            onClick={() => setActiveType(tp)}
            className={cn(
              "rounded-full px-4 py-1.5 text-[12px] font-bold font-['Lexend_Deca'] transition-all shrink-0",
              activeType === tp
                ? "bg-accent text-white shadow-md shadow-accent/25"
                : "bg-white/70 border border-white/80 text-gray-700 hover:border-accent/40 hover:text-accent",
            )}
          >
            {tp}
          </button>
        ))}
      </div>

      {/* Activity feed */}
      <div
        className={cn(
          "flex-1 min-h-0 overflow-hidden rounded-2xl border border-white/40 bg-white/30 backdrop-blur-[12px] p-3 sm:p-4",
        )}
      >
        <div className="h-full overflow-y-auto pr-1 pb-4 scrollbar-themed space-y-6">
          {isLoading ? (
            <Loading message="Loading activities..." className="h-40" />
          ) : (
            <>
              {Object.entries(groups).map(([day, acts]) => (
                <div key={day} className="flex flex-col gap-4">
                  <div className="sticky top-0 z-10 py-2 px-3 -mx-1 bg-white/50 backdrop-blur-[15px] rounded-xl border border-white/40 mb-1">
                    <h3 className="text-[11px] font-extrabold text-gray-700 uppercase tracking-[0.12em] font-['Lexend_Deca'] flex items-center gap-3">
                      <span className="size-1.5 rounded-full bg-accent shadow-[0_0_8px_rgba(108,99,255,0.5)]" />
                      {day}
                    </h3>
                  </div>
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4">
                    {acts.map((a) => (
                      <ActivityItem
                        key={a.id}
                        activity={a}
                        onClick={() => {}}
                      />
                    ))}
                  </div>
                </div>
              ))}
              {filteredActivities.length === 0 && !isLoading && (
                <NoDataFound
                  message="No activities yet"
                  description="Activities are created when you add deals, notes, move deals, or create contacts."
                />
              )}
            </>
          )}
        </div>
      </div>
    </div>
  )
}