"use client"

import * as React from "react"
import { useState } from "react"
import { useQueryState, parseAsString } from "nuqs"
import {
  ArrowRight,
  Plus,
  RefreshCw,
  Search,
  Layers,
} from "lucide-react"
import {
  useGetSubStagesQuery,
  useDeleteSubStageMutation,
  type SubStage,
} from "@/api/rtk/pipelines-api"
import { useGetPipelineStageNamesQuery, type PipelineStageName } from "@/api/rtk/pipeline-stage-names-api"
import { useGetProfileQuery } from "@/api/rtk/auth-api"
import { useAuthToken } from "@/hooks/use-auth-token"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ReactSelect } from "@/components/ui/react-select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { MoreHorizontal, Edit, Trash2 } from "lucide-react"
import { SubStageModal } from "@/components/pipelines/sub-stage-modal"
import { toast } from "sonner"
import { filterForbiddenStageNames } from "@/lib/stage-name-filter"
import { hasPermission } from "@/lib/permissions"
import { useSession } from "next-auth/react"

export default function SubStagesPage() {
  const { token } = useAuthToken()
  const { data: session } = useSession()
  const { data: profile } = useGetProfileQuery(undefined, { skip: !token })
  const permissionSource = (session as { backendUser?: unknown } | null)?.backendUser ?? profile
  const canManageSubStages = hasPermission(permissionSource, ["CREATE", "UPDATE"], "PIPELINE")

  const [searchQuery, setSearchQuery] = useQueryState(
    "search",
    parseAsString.withDefault("")
  )
  const [selectedStageId, setSelectedStageId] = useQueryState(
    "stage",
    parseAsString.withDefault("")
  )

  const {
    data: subStages = [],
    isLoading: isLoadingSubStages,
    isFetching: isFetchingSubStages,
    refetch: refetchSubStages,
  } = useGetSubStagesQuery(undefined, { skip: !token })

  const {
    data: stageNamesData,
    isLoading: isLoadingStages,
  } = useGetPipelineStageNamesQuery({ limit: 1000 }, { skip: !token })
  
  const stageNames: PipelineStageName[] = stageNamesData?.data ?? []
  const visibleStageNames = React.useMemo(
    () => filterForbiddenStageNames(stageNames),
    [stageNames],
  )

  const [deleteSubStage, { isLoading: isDeleting }] = useDeleteSubStageMutation()

  const [editingSubStage, setEditingSubStage] = useState<SubStage | undefined>()
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [activeStageNameId, setActiveStageNameId] = useState("")

  // Filter sub-stages based on search and selected stage
  const filteredSubStages = React.useMemo(() => {
    let filtered = subStages

    if (searchQuery.trim()) {
      const query = searchQuery.trim().toLowerCase()
      filtered = filtered.filter(
        (subStage) =>
          subStage.name.toLowerCase().includes(query)
      )
    }

    return filtered
  }, [subStages, searchQuery])

  // Group sub-stages by their parent stages
  const subStagesByStage = React.useMemo(() => {
    const grouped: Record<string, SubStage[]> = {}

    // Pre-populate with all visible stage names so they all show up as section headers
    visibleStageNames.forEach((stage) => {
      grouped[stage.id] = []
    })

    const stagesToShow = selectedStageId && selectedStageId !== "all"
      ? filteredSubStages.filter(subStage => subStage.stageNameId === selectedStageId)
      : filteredSubStages

    stagesToShow.forEach((subStage) => {
      const stageNameId = subStage.stageNameId;
      if (!stageNameId) return;

      // If we are filtering by a specific stage, we only care about that one.
      // Otherwise, we populate the existing groups.
      if (grouped[stageNameId]) {
        grouped[stageNameId].push(subStage)
      } else if (!selectedStageId || selectedStageId === "all") {
        // Fallback for sub-stages whose stage names might have been filtered out or not loaded
        if (!grouped[stageNameId]) {
          grouped[stageNameId] = []
        }
        grouped[stageNameId].push(subStage)
      }
    })

    const sortedGrouped: Record<string, SubStage[]> = {}
    
    // Sort stage IDs: 
    // 1. Stages WITH sub-stages first
    // 2. Original order from visibleStageNames as secondary sort
    const sortedStageIds = [...visibleStageNames.map(s => s.id)]
    
    // Also include any stage IDs that have sub-stages but weren't in visibleStageNames
    Object.keys(grouped).forEach(id => {
      if (!sortedStageIds.includes(id)) {
        sortedStageIds.push(id)
      }
    })

    const finalSortedIds = sortedStageIds.filter(id => {
      if (selectedStageId && selectedStageId !== "all") {
        return id === selectedStageId
      }
      return true
    }).sort((a, b) => {
      const subA = grouped[a]?.length || 0
      const subB = grouped[b]?.length || 0
      
      // If one has data and the other doesn't, put the one with data first
      if (subA > 0 && subB === 0) return -1
      if (subA === 0 && subB > 0) return 1
      
      // Secondary sort: original order from visibleStageNames
      const idxA = visibleStageNames.findIndex(s => s.id === a)
      const idxB = visibleStageNames.findIndex(s => s.id === b)
      
      if (idxA === -1 && idxB === -1) return 0
      if (idxA === -1) return 1
      if (idxB === -1) return -1
      return idxA - idxB
    })

    finalSortedIds.forEach((id) => {
      if (grouped[id]) {
        sortedGrouped[id] = [...grouped[id]].sort((a, b) => a.sortOrder - b.sortOrder)
      }
    })

    return sortedGrouped
  }, [filteredSubStages, selectedStageId, visibleStageNames])

  const handleEdit = (subStage: SubStage) => {
    setEditingSubStage(subStage)
    setActiveStageNameId(subStage.stageNameId || "")
    setIsModalOpen(true)
  }

  const handleDelete = async (subStage: SubStage) => {
    if (window.confirm(`Are you sure you want to delete "${subStage.name}"?`)) {
      try {
        await deleteSubStage(subStage.id).unwrap()
        toast.success("Sub-stage deleted successfully")
        refetchSubStages()
      } catch (error) {
        toast.error("Failed to delete sub-stage")
      }
    }
  }

  const handleAddNew = (stageNameId?: string) => {
    setEditingSubStage(undefined)
    setActiveStageNameId(
      stageNameId || (selectedStageId && selectedStageId !== "all" ? selectedStageId : "")
    )
    setIsModalOpen(true)
  }

  const handleModalClose = () => {
    setIsModalOpen(false)
    setEditingSubStage(undefined)
  }

  const handleModalSuccess = () => {
    refetchSubStages()
    handleModalClose()
  }


  const getStageInfo = (stageNameId: string, mapIndex: number) => {
    const stageName = visibleStageNames.find((s) => s.id === stageNameId)
    return {
      name: stageName?.name || `Group ${mapIndex + 1}`,
    }
  }

  return (
    <div className="flex flex-col h-full gap-4.5 p-1 sm:p-2 md:p-3 animate-in fade-in duration-500 overflow-hidden">
      <div className="flex max-w-full flex-col md:flex-row md:flex-wrap md:items-center justify-between gap-4 border-b border-border/40 pb-5 shrink-0">
        <div className="flex items-center gap-3 min-w-0">
          <div className="h-10 w-10 rounded-xl bg-accent/10 flex items-center justify-center text-accent shrink-0">
            <ArrowRight size={20} />
          </div>
          <div className="min-w-0">
            <h1 className="text-[18px] md:text-[25px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
              Sub-Stages
            </h1>
            <p className="text-[12px] text-gray-500 mt-2 font-['Lexend_Deca'] uppercase tracking-wider">
              <span className="font-bold text-text/80">
                {isFetchingSubStages
                  ? "Loading..."
                  : `${filteredSubStages.length} sub-stage${filteredSubStages.length === 1 ? "" : "s"}`}
              </span>
              <span className="text-gray-400 font-normal normal-case ml-2">
                · granular pipeline stages
              </span>
            </p>
          </div>
        </div>
        <div className="flex flex-col sm:flex-row sm:flex-nowrap items-stretch sm:items-center gap-2 shrink-0 w-full sm:w-auto min-w-0">
          <div className="relative w-full sm:w-[220px] lg:w-[260px] shrink-0">
            <Search
              size={14}
              className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"
              aria-hidden
            />
            <Input
              type="search"
              className="pl-9 pr-3 h-9 text-[13px] bg-white border-border/60 rounded-xl w-full font-['Lexend_Deca']"
              placeholder="Search sub-stages…"
              value={searchQuery}
              onChange={(e) => {
                const v = e.target.value
                void setSearchQuery(v === "" ? null : v)
              }}
              aria-label="Search sub-stages by name"
            />
          </div>
          <div className="w-full sm:w-[180px] lg:w-[200px] min-w-0 shrink-0">
            <ReactSelect
              value={selectedStageId || "all"}
              onValueChange={(v) => void setSelectedStageId(v === "all" ? null : v)}
              options={[
                { value: "all", label: "All Stages" },
                ...visibleStageNames.map((stage) => ({
                  value: stage.id,
                  label: stage.name,
                })),
              ]}
              placeholder="All Stages"
              aria-label="Filter by stage"
              triggerClassName="h-9 rounded-xl text-[12px] font-bold font-['Lexend_Deca'] border-border/60 bg-white"
              contentClassName="rounded-xl"
            />
          </div>
          <Button
            variant="accentSubStageToolbar"
            onClick={() => handleAddNew()}
            disabled={!canManageSubStages}
          >
            <Plus size={15} className="sm:mr-1.5 stroke-[3px]" />
            <span className="hidden sm:inline">Add Sub-Stage</span>
          </Button>
        </div>
      </div>

      <div className="flex-1 min-h-0 flex flex-col rounded-2xl border border-border/60 bg-white/60 backdrop-blur-sm overflow-hidden">
        <div className="px-4 py-3 border-b border-border/60 flex items-center justify-between gap-3 shrink-0">
          <div className="flex items-center gap-2 text-[12px] text-gray-600">
            <Layers size={14} className="text-gray-400 shrink-0" />
            <span>
              Pipeline sub-stages organized by stage names.
            </span>
          </div>
          {isFetchingSubStages && !isLoadingSubStages && (
            <div className="flex items-center gap-2 text-[12px] text-gray-500">
              <RefreshCw size={14} className="animate-spin" />
              Refreshing
            </div>
          )}
        </div>

        {isLoadingSubStages || isLoadingStages ? (
          <div className="flex-1 overflow-y-auto p-4 space-y-3 scrollbar-themed">
            {[1, 2, 3, 4, 5].map((i) => (
              <Skeleton key={i} className="h-16 w-full rounded-lg bg-border/30" />
            ))}
          </div>
        ) : Object.keys(subStagesByStage).length === 0 ? (
          <div className="flex-1 flex flex-col items-center justify-center gap-4 text-center px-4 py-14">
            <ArrowRight size={32} className="text-gray-300" />
            <p className="text-[15px] font-semibold text-gray-600 font-['Lexend_Deca']">
              {searchQuery || (selectedStageId && selectedStageId !== "all") ? "No sub-stages match your filters" : "No sub-stages yet"}
            </p>
            <p className="text-[13px] text-gray-500 max-w-[320px]">
              {searchQuery || (selectedStageId && selectedStageId !== "all")
                ? "Try adjusting your search or filters."
                : "Create sub-stages to provide more granular tracking within your pipeline stages."}
            </p>
            {!searchQuery && (!selectedStageId || selectedStageId === "all") && (
              <Button
                variant="accentPipelineHeader"
                onClick={() => handleAddNew()}
                disabled={!canManageSubStages}
              >
                <Plus size={16} className="mr-2" />
                Create First Sub-Stage
              </Button>
            )}
          </div>
        ) : (
          <div className="flex-1 overflow-y-auto p-4 space-y-6 scrollbar-themed">
            {Object.entries(subStagesByStage).map(([stageId, stageSubStages], index) => {
              const stageInfo = getStageInfo(stageId, index)

              return (
                <Card key={stageId} className="overflow-hidden">
                  <CardHeader className="pb-3">
                    <div className="flex items-center gap-3">
                      <CardTitle className="text-base">{stageInfo.name}</CardTitle>
                      <Badge variant="outline" className="text-xs">
                        {stageSubStages.length} sub-stage{stageSubStages.length !== 1 ? "s" : ""}
                      </Badge>
                      {canManageSubStages && (
                        <Button
                          variant="outlineRowTight"
                          onClick={() => handleAddNew(stageId)}
                        >
                          <Plus size={12} className="mr-1" />
                          Add Sub-Stage
                        </Button>
                      )}
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    {stageSubStages.length === 0 ? (
                      <div className="text-center py-6 text-muted-foreground">
                        <p className="text-sm">No sub-stages in this stage</p>
                        {canManageSubStages && (
                          <div className="mt-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleAddNew(stageId)}
                            >
                              <Plus size={12} className="mr-1" />
                              Add First Sub-Stage
                            </Button>
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="overflow-x-auto pb-2">
                        <div className="flex gap-3 min-w-max">
                          {stageSubStages.map((subStage) => (
                            <Card
                              key={subStage.id}
                              className="w-[260px] shrink-0 snap-start transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-xl"
                            >
                              <CardContent className="p-3">
                                <div className="flex items-center justify-between">
                                  <div className="flex items-center gap-3">
                                    <div className="flex items-center gap-2">
                                      {subStage.color && (
                                        <div
                                          className="w-3 h-3 rounded-full border"
                                          style={{ backgroundColor: subStage.color }}
                                        />
                                      )}
                                      <div>
                                        <span className="font-medium text-sm">{subStage.name}</span>
                                        <div className="flex items-center gap-2 mt-1">
                                          {subStage.prob !== undefined && (
                                            <Badge variant="secondary" className="text-xs">
                                              {subStage.prob}%
                                            </Badge>
                                          )}
                                          <Badge variant="outline" className="text-xs">
                                            Order: {subStage.sortOrder}
                                          </Badge>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  {canManageSubStages && (
                                    <DropdownMenu>
                                      <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" size="sm">
                                          <MoreHorizontal className="h-4 w-4" />
                                        </Button>
                                      </DropdownMenuTrigger>
                                      <DropdownMenuContent align="end">
                                        <DropdownMenuItem onClick={() => handleEdit(subStage)}>
                                          <Edit className="mr-2 h-4 w-4" />
                                          Edit
                                        </DropdownMenuItem>
                                        <DropdownMenuItem
                                          onClick={() => handleDelete(subStage)}
                                          className="text-destructive"
                                          disabled={isDeleting}
                                        >
                                          <Trash2 className="mr-2 h-4 w-4" />
                                          Delete
                                        </DropdownMenuItem>
                                      </DropdownMenuContent>
                                    </DropdownMenu>
                                  )}
                                </div>
                              </CardContent>
                            </Card>
                          ))}
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              )
            })}
          </div>
        )}
      </div>

      <SubStageModal
        isOpen={isModalOpen}
        onClose={handleModalClose}
        stageNameId={activeStageNameId}
        subStage={editingSubStage}
        onSuccess={handleModalSuccess}
      />
    </div>
  )
}