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'
// QuickStats and SessionsPanel replaced by new dashboard panels
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'
import { WeeklyCalendar } from '@/components/dashboard/WeeklyCalendar'
import { QuickActions } from '@/components/dashboard/QuickActions'
import { OpenSessions } from '@/components/dashboard/OpenSessions'
import { RecentActivity } from '@/components/dashboard/RecentActivity'

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
  // completedSessions removed — no longer displayed in new layout

  // Open sessions for the new panel (3 oldest)
  const openSessionItems = activeSessions
    .sort((a, b) => new Date(a.started_at).getTime() - new Date(b.started_at).getTime())
    .slice(0, 3)
    .map(s => ({
      id: s.id,
      treeName: s.tree_snapshot?.name || 'Unknown',
      treeId: s.tree_id,
      treeType: (s.tree_snapshot as unknown as Record<string, unknown>)?.tree_type as string | undefined,
      timeAgo: timeAgo(s.started_at),
    }))

  // recentSessionItems removed — replaced by RecentActivity component

  // 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">
      {/* Greeting */}
      <div className="fade-in" style={{ animationDelay: '100ms' }}>
        <h1 className="font-heading text-4xl font-extrabold tracking-tight text-foreground">
          Good {new Date().getHours() < 12 ? 'morning' : new Date().getHours() < 18 ? 'afternoon' : 'evening'}, {user?.name?.split(' ')[0] || 'there'}
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
        </p>
      </div>

      {/* Row 1: Calendar + Quick Actions */}
      <div className="flex gap-4" style={{ alignItems: 'stretch' }}>
        <div className="flex-1 min-w-0">
          <WeeklyCalendar />
        </div>
        <div className="w-72 shrink-0">
          <QuickActions />
        </div>
      </div>

      {/* Row 2: Open Sessions + Stats 2x2 */}
      <div className="flex gap-4" style={{ alignItems: 'stretch' }}>
        <div className="flex-1 min-w-0">
          <OpenSessions sessions={openSessionItems} />
        </div>
        <div className="w-72 shrink-0">
          <div className="grid grid-cols-2 gap-3 h-full">
            {[
              { label: 'Active Flows', value: myFlows.length, gradient: true, glow: true },
              { label: 'This Week', value: todaySessions },
              { label: 'Open Sessions', value: openSessions },
              { label: 'Favorites', value: pinnedItems.length },
            ].map((stat, i) => (
              <div
                key={stat.label}
                className={cn('glass-card p-4 flex flex-col justify-between fade-in', stat.glow && 'active-glow')}
                style={{ animationDelay: `${500 + i * 70}ms` }}
              >
                <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
                  {stat.label}
                </p>
                <p className={cn('font-heading text-2xl font-extrabold tracking-tight', stat.gradient && 'text-gradient-brand')}>
                  {stat.value}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Row 3: Recent Activity */}
      <RecentActivity />

      {/* ── Existing content below ── */}
      <div style={{ borderTop: '1px solid var(--glass-border)' }} className="pt-6 space-y-6">

        {/* 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>

        {/* 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>
      </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
