import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { Search, Loader2, Star, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
import { treesApi } from '@/api/trees'
import { sessionsApi } from '@/api/sessions'
import type { TreeListItem, TreeFilters } from '@/types'
import type { Session } from '@/types/session'
import { getTreeNavigatePath } from '@/lib/routing'
import { usePermissions } from '@/hooks/usePermissions'
import { useAuthStore } from '@/store/authStore'
import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
import { usePaginationParams } from '@/hooks/usePaginationParams'
import { useCachedQuota } from '@/hooks/useCachedQuota'
import { QuickStats } from '@/components/dashboard/QuickStats'
import { SessionsPanel } from '@/components/dashboard/SessionsPanel'
import { TreeGridView } from '@/components/library/TreeGridView'
import { TreeListView } from '@/components/library/TreeListView'
import { TreeTableView } from '@/components/library/TreeTableView'
import { ViewToggle } from '@/components/library/ViewToggle'
import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'

function timeAgo(dateStr: string): string {
  const now = Date.now()
  const then = new Date(dateStr).getTime()
  const diffMs = now - then
  const minutes = Math.floor(diffMs / 60000)
  if (minutes < 1) return 'just now'
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  const days = Math.floor(hours / 24)
  if (days === 1) return 'Yesterday'
  return `${days}d ago`
}

export function QuickStartPage() {
  const navigate = useNavigate()
  const { canCreateTrees } = usePermissions()
  const user = useAuthStore((s) => s.user)

  // Search state
  const [query, setQuery] = useState('')
  const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
  const [isSearching, setIsSearching] = useState(false)
  const [showResults, setShowResults] = useState(false)
  const searchRef = useRef<HTMLDivElement>(null)
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  // Sessions state
  const [activeSessions, setActiveSessions] = useState<Session[]>([])
  const [allSessions, setAllSessions] = useState<Session[]>([])

  // My Flows state
  const [myFlows, setMyFlows] = useState<TreeListItem[]>([])
  const [isLoadingFlows, setIsLoadingFlows] = useState(true)
  const [hasNextPage, setHasNextPage] = useState(false)
  const [allFlowsCeiling, setAllFlowsCeiling] = useState(false)

  // Favorites state
  const [showAllFavorites, setShowAllFavorites] = useState(false)

  // AI Builder
  const [showAIBuilder, setShowAIBuilder] = useState(false)
  const { aiEnabled } = useCachedQuota()

  // Tab state
  type Tab = 'mine' | 'team' | 'public' | 'all'
  const hasTeam = Boolean(user?.account_id)
  const [activeTab, setActiveTab] = useState<Tab>('mine')

  // Fork modal state
  const [forkTarget, setForkTarget] = useState<TreeListItem | null>(null)
  const [forkReason, setForkReason] = useState('')
  const [isForking, setIsForking] = useState(false)

  // Pin store
  const pinnedItems = usePinnedFlowsStore((s) => s.items)
  const pinnedIsLoading = usePinnedFlowsStore((s) => s.isLoading)
  const loadPinned = usePinnedFlowsStore((s) => s.load)
  const isMutatingByTreeId = usePinnedFlowsStore((s) => s.isMutatingByTreeId)
  const togglePin = usePinnedFlowsStore((s) => s.toggle)

  const pinnedTreeIds = useMemo(() => new Set(pinnedItems.map((f) => f.tree_id)), [pinnedItems])
  const pinLoadingTreeIds = useMemo(
    () => new Set(Object.entries(isMutatingByTreeId).filter(([, v]) => v).map(([k]) => k)),
    [isMutatingByTreeId]
  )

  // Preferences
  const { dashboardMyFlowsView, setDashboardMyFlowsView } = useUserPreferencesStore()

  // Pagination
  const { page, pageSize, setPage, setPageSize } = usePaginationParams({
    defaultPageSize: 10,
    allowedPageSizes: [10, 25, 50, 'all'],
  })

  // Load pinned flows
  useEffect(() => { loadPinned() }, [loadPinned])

  // Load sessions on mount
  useEffect(() => {
    Promise.all([
      sessionsApi.list({ completed: false, size: 5 }).catch(() => []),
      sessionsApi.list({ size: 10 }).catch(() => []),
    ]).then(([active, recent]) => {
      setActiveSessions(active)
      setAllSessions(recent)
    })
  }, [])

  // Load flows — tab-aware
  const loadFlows = useCallback(async () => {
    if (!user?.id) return
    setIsLoadingFlows(true)
    setAllFlowsCeiling(false)

    try {
      if (pageSize === 'all') {
        let allItems: TreeListItem[] = []
        let skip = 0
        const CHUNK = 100
        const MAX = 500

        while (true) {
          const params: TreeFilters = { sort_by: 'updated_at', limit: CHUNK, skip }
          if (activeTab === 'mine') params.author_id = user.id
          if (activeTab === 'team') params.visibility = 'team'
          if (activeTab === 'public') { params.visibility = 'public'; params.sort_by = 'usage_count' }

          const chunk = await treesApi.list(params)
          allItems = [...allItems, ...chunk]
          if (chunk.length < CHUNK || allItems.length >= MAX) {
            if (allItems.length >= MAX) { allItems = allItems.slice(0, MAX); setAllFlowsCeiling(true) }
            break
          }
          skip += CHUNK
        }
        setMyFlows(allItems)
        setHasNextPage(false)
      } else {
        const numSize = pageSize as number
        const params: TreeFilters = {
          sort_by: activeTab === 'public' ? 'usage_count' : 'updated_at',
          limit: numSize + 1,
          skip: (page - 1) * numSize,
        }
        if (activeTab === 'mine') params.author_id = user.id
        if (activeTab === 'team') params.visibility = 'team'
        if (activeTab === 'public') params.visibility = 'public'

        const response = await treesApi.list(params)
        setHasNextPage(response.length > numSize)
        setMyFlows(response.slice(0, numSize))
      }
    } catch {
      // silently fail
    } finally {
      setIsLoadingFlows(false)
    }
  }, [user?.id, page, pageSize, activeTab])

  useEffect(() => { loadFlows() }, [loadFlows])

  // Reload on window focus (fixes stale data after returning from editor)
  useEffect(() => {
    const onFocus = () => loadFlows()
    window.addEventListener('focus', onFocus)
    return () => window.removeEventListener('focus', onFocus)
  }, [loadFlows])

  // Debounced search
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
    if (query.length < 2) {
      setSearchResults([])
      setShowResults(false)
      setIsSearching(false)
      return
    }
    setIsSearching(true)
    setShowResults(true)
    debounceRef.current = setTimeout(async () => {
      try {
        const results = await treesApi.search(query, 8)
        setSearchResults(results)
      } catch {
        setSearchResults([])
      } finally {
        setIsSearching(false)
      }
    }, 300)
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
  }, [query])

  // Close search dropdown on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
        setShowResults(false)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [])

  // Stats
  const openSessions = activeSessions.length
  const todaySessions = allSessions.filter(s => {
    const d = new Date(s.started_at)
    const now = new Date()
    return d.toDateString() === now.toDateString()
  }).length
  const completedSessions = allSessions.filter(s => s.completed_at).length

  const recentSessionItems = allSessions.slice(0, 5).map(s => ({
    id: s.id,
    treeName: s.tree_snapshot?.name || 'Unknown',
    status: (s.completed_at ? 'completed' : 'in_progress') as 'completed' | 'in_progress',
    ticketNumber: s.ticket_number || undefined,
    timeAgo: timeAgo(s.started_at),
  }))

  // Favorites display
  const MAX_VISIBLE_FAVORITES = 8
  const visibleFavorites = showAllFavorites ? pinnedItems : pinnedItems.slice(0, MAX_VISIBLE_FAVORITES)
  const hasMoreFavorites = pinnedItems.length > MAX_VISIBLE_FAVORITES

  // Handlers
  const handleStartSession = (treeId: string, treeType?: string) => {
    navigate(getTreeNavigatePath(treeId, treeType))
  }

  const handleDeleteTree = () => {} // Not used on dashboard
  const handleTagClick = () => {} // Not used on dashboard
  const handleFolderCreated = () => {} // Not used on dashboard

  const handleFork = async () => {
    if (!forkTarget) return
    setIsForking(true)
    try {
      const forked = await treesApi.fork(forkTarget.id, {
        fork_reason: forkReason.trim() || undefined,
      })
      toast.success(`"${forked.name}" added to your flows`)
      setForkTarget(null)
      setForkReason('')
      setActiveTab('mine')
    } catch {
      toast.error('Failed to fork flow')
    } finally {
      setIsForking(false)
    }
  }

  // Page size options
  const pageSizeOptions: (number | 'all')[] = [10, 25, 50, 'all']

  // Tabs
  const tabs: { id: Tab; label: string }[] = [
    { id: 'mine', label: 'My Flows' },
    ...(hasTeam ? [{ id: 'team' as Tab, label: 'My Team' }] : []),
    { id: 'public', label: 'Public' },
    { id: 'all', label: 'All' },
  ]

  return (
    <div className="p-6 space-y-6">
      {/* Page Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="font-heading text-[1.375rem] font-bold tracking-tight text-foreground">
            Dashboard
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Welcome back. Here&apos;s what&apos;s happening with your flows.
          </p>
        </div>
      </div>

      {/* Quick Stats */}
      <QuickStats
        stats={[
          { label: 'My Flows', value: myFlows.length, gradient: true },
          { label: 'Sessions Today', value: todaySessions, color: '#f59e0b' },
          { label: 'Open Sessions', value: openSessions, meta: `${completedSessions} completed` },
          { label: 'Favorites', value: pinnedItems.length },
        ]}
      />

      {/* Search */}
      <div ref={searchRef} className="relative">
        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => query.length >= 2 && setShowResults(true)}
          placeholder="Search flows, sessions, tags…"
          className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
        />
        {showResults && (
          <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
            {isSearching ? (
              <div className="flex items-center justify-center py-6">
                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
              </div>
            ) : searchResults.length === 0 ? (
              <div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
            ) : (
              <ul className="max-h-72 overflow-y-auto py-1">
                {searchResults.map((tree) => (
                  <li key={tree.id}>
                    <button
                      onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
                      className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
                    >
                      <div className="text-sm font-medium text-foreground">{tree.name}</div>
                      {tree.description && (
                        <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
                      )}
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </div>

      {/* Recent Sessions */}
      <SessionsPanel sessions={recentSessionItems} delay={150} />

      {/* Favorites Section */}
      <div>
        <div className="mb-3 flex items-center justify-between">
          <h2 className="font-heading text-lg font-semibold text-foreground">
            Favorites
            {pinnedItems.length > 0 && (
              <span className="ml-2 text-sm font-normal text-muted-foreground">({pinnedItems.length})</span>
            )}
          </h2>
          {hasMoreFavorites && (
            <button
              onClick={() => setShowAllFavorites(!showAllFavorites)}
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {showAllFavorites ? 'Show less' : 'View all favorites'}
            </button>
          )}
        </div>
        {pinnedIsLoading ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="h-20 rounded-xl bg-card border border-border animate-pulse" />
            ))}
          </div>
        ) : pinnedItems.length === 0 ? (
          <p className="text-sm text-muted-foreground py-4">
            Star a flow to pin it here for quick access.
          </p>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {visibleFavorites.map((flow) => (
              <button
                key={flow.tree_id}
                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
                className="group relative flex items-center gap-3 rounded-xl bg-card border border-border p-4 text-left transition-colors hover:border-border/80 hover:bg-accent/50"
              >
                <span className="text-lg shrink-0">
                  {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
                </span>
                <span className="truncate text-sm font-medium text-foreground">{flow.tree_name}</span>
                <button
                  onClick={(e) => {
                    e.stopPropagation()
                    e.preventDefault()
                    togglePin(flow.tree_id)
                  }}
                  aria-label="Remove from favorites"
                  className="absolute top-2 right-2 rounded-md p-1 text-amber-400 opacity-0 group-hover:opacity-100 hover:text-amber-300 transition-all"
                >
                  <Star size={14} fill="currentColor" />
                </button>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* My Flows Section — tabbed */}
      <div>
        <div className="mb-3 flex items-center gap-1 border-b border-border">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              type="button"
              onClick={() => { setActiveTab(tab.id); setPage(1) }}
              className={cn(
                'px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
                activeTab === tab.id
                  ? 'border-primary text-foreground'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              )}
            >
              {tab.label}
            </button>
          ))}
          <div className="ml-auto flex items-center gap-2 pb-1.5">
            {activeTab === 'mine' && canCreateTrees && (
              <CreateFlowDropdown
                aiEnabled={aiEnabled}
                onOpenAIBuilder={() => setShowAIBuilder(true)}
              />
            )}
            <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
          </div>
        </div>

        {isLoadingFlows ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-32 rounded-xl bg-card border border-border animate-pulse" />
            ))}
          </div>
        ) : myFlows.length === 0 ? (
          <div className="py-12 text-center">
            <p className="text-muted-foreground mb-4">
              {activeTab === 'mine'
                ? "You haven't created any flows yet."
                : activeTab === 'team'
                ? 'No team flows found.'
                : activeTab === 'public'
                ? 'No public flows found.'
                : 'No flows found.'}
            </p>
            {activeTab === 'mine' && canCreateTrees && (
              <CreateFlowDropdown
                aiEnabled={aiEnabled}
                onOpenAIBuilder={() => setShowAIBuilder(true)}
                label="Create your first flow"
              />
            )}
          </div>
        ) : (
          <>
            {allFlowsCeiling && (
              <p className="mb-3 text-sm text-muted-foreground">
                Showing first 500 flows. Use search or filters to find specific flows.
              </p>
            )}

            {dashboardMyFlowsView === 'grid' && (
              <TreeGridView
                trees={myFlows}
                onStartSession={handleStartSession}
                onTagClick={handleTagClick}
                onFolderCreated={handleFolderCreated}
                onDeleteTree={handleDeleteTree}
                pinnedTreeIds={pinnedTreeIds}
                onTogglePin={togglePin}
                pinLoadingTreeIds={pinLoadingTreeIds}
              />
            )}
            {dashboardMyFlowsView === 'list' && (
              <TreeListView
                trees={myFlows}
                onStartSession={handleStartSession}
                onTagClick={handleTagClick}
                onFolderCreated={handleFolderCreated}
                onDeleteTree={handleDeleteTree}
                pinnedTreeIds={pinnedTreeIds}
                onTogglePin={togglePin}
                pinLoadingTreeIds={pinLoadingTreeIds}
              />
            )}
            {dashboardMyFlowsView === 'table' && (
              <TreeTableView
                trees={myFlows}
                onStartSession={handleStartSession}
                onTagClick={handleTagClick}
                onFolderCreated={handleFolderCreated}
                onDeleteTree={handleDeleteTree}
                pinnedTreeIds={pinnedTreeIds}
                onTogglePin={togglePin}
                pinLoadingTreeIds={pinLoadingTreeIds}
              />
            )}

            {/* Pagination controls */}
            {pageSize !== 'all' && (
              <div className="mt-4 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => setPage(page - 1)}
                    disabled={page <= 1}
                    className={cn(
                      'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
                      page <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
                    )}
                  >
                    <ChevronLeft size={14} />
                    Prev
                  </button>
                  <span className="text-sm text-muted-foreground">Page {page}</span>
                  <button
                    onClick={() => setPage(page + 1)}
                    disabled={!hasNextPage}
                    className={cn(
                      'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
                      !hasNextPage ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
                    )}
                  >
                    Next
                    <ChevronRight size={14} />
                  </button>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-muted-foreground">Show:</span>
                  <select
                    value={String(pageSize)}
                    onChange={(e) => {
                      const val = e.target.value
                      setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
                    }}
                    className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
                  >
                    {pageSizeOptions.map((opt) => (
                      <option key={String(opt)} value={String(opt)}>
                        {opt === 'all' ? 'All' : opt}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            )}
            {pageSize === 'all' && (
              <div className="mt-4 flex items-center justify-end">
                <div className="flex items-center gap-2">
                  <span className="text-sm text-muted-foreground">Show:</span>
                  <select
                    value="all"
                    onChange={(e) => {
                      const val = e.target.value
                      setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
                    }}
                    className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
                  >
                    {pageSizeOptions.map((opt) => (
                      <option key={String(opt)} value={String(opt)}>
                        {opt === 'all' ? 'All' : opt}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* Fork Modal */}
      {forkTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
          <div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-xl">
            <h3 className="mb-1 text-sm font-semibold text-foreground">Fork this flow?</h3>
            <p className="mb-4 text-xs text-muted-foreground">
              Creates a copy of &ldquo;{forkTarget.name}&rdquo; under your account that you can edit freely.
            </p>
            <label className="mb-1 block text-xs text-muted-foreground">
              Why are you forking? <span className="opacity-60">(optional)</span>
            </label>
            <input
              type="text"
              value={forkReason}
              onChange={(e) => setForkReason(e.target.value)}
              placeholder="e.g. Adding Cisco Meraki steps for our network"
              maxLength={255}
              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
              onKeyDown={(e) => e.key === 'Enter' && handleFork()}
            />
            <div className="flex gap-2">
              <button
                type="button"
                onClick={handleFork}
                disabled={isForking}
                className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-gradient-brand py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
              >
                <GitBranch className="h-3.5 w-3.5" />
                {isForking ? 'Forking...' : 'Fork Flow'}
              </button>
              <button
                type="button"
                onClick={() => setForkTarget(null)}
                className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* AI Builder Modal */}
      {showAIBuilder && (
        <AIFlowBuilderModal
          isOpen={showAIBuilder}
          onClose={() => setShowAIBuilder(false)}
        />
      )}
    </div>
  )
}

export default QuickStartPage