import { useEffect, useState, useRef, useCallback } from 'react'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import { PageMeta } from '@/components/common/PageMeta'
import { sessionsApi } from '@/api/sessions'
import { aiSessionsApi } from '@/api/aiSessions'
import { treesApi } from '@/api/trees'
import type { Session, TreeListItem, SessionOutcome, AISessionSummary } from '@/types'
import type { DateRange } from 'react-day-picker'
import { SessionFilters } from '@/components/session/SessionFilters'
import type { SessionFilterState } from '@/components/session/SessionFilters'
import { Spinner } from '@/components/common/Spinner'
import { EmptyState } from '@/components/common/EmptyState'
import { SessionIllustration } from '@/components/common/EmptyStateIllustrations'
import { AISessionListItem } from '@/components/flowpilot/AISessionListItem'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { getSessionResumePath } from '@/lib/routing'

export function SessionHistoryPage() {
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()

  // Top-level tab: flow sessions vs AI sessions
  const [sessionType, setSessionType] = useState<'flow' | 'ai'>('flow')
  const [aiSessions, setAiSessions] = useState<AISessionSummary[]>([])
  const [aiLoading, setAiLoading] = useState(false)

  const [sessions, setSessions] = useState<Session[]>([])
  const [hasMore, setHasMore] = useState(false)
  const [trees, setTrees] = useState<TreeListItem[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [filter, setFilter] = useState<'all' | 'completed' | 'active' | 'prepared'>('active')

  // Close session popover state
  const [closingSessionId, setClosingSessionId] = useState<string | null>(null)
  const [closeOutcome, setCloseOutcome] = useState<SessionOutcome | ''>('')
  const [closeNotes, setCloseNotes] = useState('')
  const [closeLoading, setCloseLoading] = useState(false)
  const closePopoverRef = useRef<HTMLDivElement>(null)

  // Initialize filters from URL params
  const [filters, setFilters] = useState<SessionFilterState>(() => {
    const ticketNumber = searchParams.get('ticket') || ''
    const clientName = searchParams.get('client') || ''
    const treeName = searchParams.get('tree') || ''
    const dateType = (searchParams.get('dateType') || 'started') as 'started' | 'completed'

    const from = searchParams.get('from')
    const to = searchParams.get('to')
    const dateRange: DateRange | undefined =
      from && to ? { from: new Date(from), to: new Date(to) } : undefined

    return {
      ticketNumber,
      clientName,
      treeName,
      dateRange,
      dateType,
    }
  })

  // Load trees for filter dropdown
  useEffect(() => {
    const loadTrees = async () => {
      try {
        const treesData = await treesApi.list({})
        setTrees(treesData)
      } catch (err) {
        console.error('Failed to load trees:', err)
      }
    }
    loadTrees()
  }, [])

  // Load sessions when filters change
  useEffect(() => {
    let cancelled = false

    const loadSessions = async () => {
      setIsLoading(true)
      try {
        const params: Record<string, string | boolean> = {}

        // Tab filter (all/active/completed/prepared)
        if (filter === 'prepared') {
          params.status = 'prepared'
        } else if (filter !== 'all') {
          params.completed = filter === 'completed'
        }

        // Search/filter params
        if (filters.ticketNumber) {
          params.ticket_number = filters.ticketNumber
        }
        if (filters.clientName) {
          params.client_name = filters.clientName
        }
        if (filters.treeName) {
          params.tree_name = filters.treeName
        }

        // Date range params
        if (filters.dateRange?.from) {
          const fromDate = filters.dateRange.from
          const toDate = filters.dateRange.to || filters.dateRange.from

          if (filters.dateType === 'started') {
            params.started_after = fromDate.toISOString()
            params.started_before = toDate.toISOString()
          } else {
            params.completed_after = fromDate.toISOString()
            params.completed_before = toDate.toISOString()
          }
        }

        const sessionsData = await sessionsApi.list({ ...params, size: 51 })
        if (cancelled) return
        const truncated = sessionsData.length > 50
        setHasMore(truncated)
        setSessions(truncated ? sessionsData.slice(0, 50) : sessionsData)
      } catch (err) {
        if (cancelled) return
        toast.error('Failed to load sessions')
        console.error(err)
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }

    loadSessions()
    return () => { cancelled = true }
  }, [filter, filters])

  // Update URL params when filters change
  useEffect(() => {
    const params = new URLSearchParams()

    if (filters.ticketNumber) params.set('ticket', filters.ticketNumber)
    if (filters.clientName) params.set('client', filters.clientName)
    if (filters.treeName) params.set('tree', filters.treeName)
    if (filters.dateRange?.from) {
      params.set('from', filters.dateRange.from.toISOString())
      params.set('to', (filters.dateRange.to || filters.dateRange.from).toISOString())
      params.set('dateType', filters.dateType)
    }

    setSearchParams(params, { replace: true })
  }, [filters, setSearchParams])

  // Load AI sessions when tab is active
  useEffect(() => {
    if (sessionType !== 'ai') return
    let cancelled = false
    const loadAiSessions = async () => {
      setAiLoading(true)
      try {
        const data = await aiSessionsApi.listSessions({ limit: 50 })
        if (!cancelled) setAiSessions(data)
      } catch {
        if (!cancelled) toast.error('Failed to load AI sessions')
      } finally {
        if (!cancelled) setAiLoading(false)
      }
    }
    loadAiSessions()
    return () => { cancelled = true }
  }, [sessionType])

  const handleFilterChange = (newFilters: SessionFilterState) => {
    setFilters(newFilters)
  }

  const handleClearFilters = () => {
    setFilters({
      ticketNumber: '',
      clientName: '',
      treeName: '',
      dateRange: undefined,
      dateType: 'started',
    })
  }

  const handleCloseSession = useCallback(async () => {
    if (!closingSessionId || !closeOutcome) return
    setCloseLoading(true)
    try {
      await sessionsApi.complete(closingSessionId, {
        outcome: closeOutcome,
        outcome_notes: closeNotes || undefined,
      })
      setSessions(prev =>
        prev.map(s =>
          s.id === closingSessionId
            ? { ...s, completed_at: new Date().toISOString(), outcome: closeOutcome, outcome_notes: closeNotes || null }
            : s
        )
      )
      toast.success('Session closed')
      setClosingSessionId(null)
      setCloseOutcome('')
      setCloseNotes('')
    } catch {
      toast.error('Failed to close session')
    } finally {
      setCloseLoading(false)
    }
  }, [closingSessionId, closeOutcome, closeNotes])

  // Close popover on click outside
  useEffect(() => {
    if (!closingSessionId) return
    const handleClickOutside = (e: MouseEvent) => {
      if (closePopoverRef.current && !closePopoverRef.current.contains(e.target as Node)) {
        setClosingSessionId(null)
        setCloseOutcome('')
        setCloseNotes('')
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [closingSessionId])

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString()
  }

  const getTreeName = (session: Session): string => {
    return session.tree_snapshot?.name || 'Unknown Tree'
  }

  const formatOutcomeLabel = (outcome: Session['outcome']): string => {
    if (!outcome) return 'Not set'
    const labels: Record<string, string> = {
      resolved: 'Resolved',
      escalated: 'Escalated',
      workaround: 'Workaround',
      unresolved: 'Unresolved',
      cancelled: 'Cancelled',
      resolved_externally: 'Resolved Externally',
    }
    return labels[outcome] ?? outcome
  }

  return (
    <div className="overflow-y-auto h-full">
    <PageMeta title="Session History" />
    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
      <div className="mb-8">
        <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
        <p className="mt-2 text-muted-foreground">
          Search and filter your troubleshooting sessions
        </p>
      </div>

      {/* Session type toggle */}
      <div className="mb-4 flex gap-1 rounded-lg bg-card/50 p-1 w-fit border border-border">
        <button
          onClick={() => setSessionType('flow')}
          className={cn(
            'rounded-md px-4 py-1.5 text-sm font-medium transition-colors',
            sessionType === 'flow'
              ? 'bg-primary/10 text-foreground'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          Flow Sessions
        </button>
        <button
          onClick={() => setSessionType('ai')}
          className={cn(
            'rounded-md px-4 py-1.5 text-sm font-medium transition-colors',
            sessionType === 'ai'
              ? 'bg-primary/10 text-foreground'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          AI Sessions
        </button>
      </div>

      {/* Filter Tabs (flow sessions only) */}
      {sessionType === 'flow' && (
      <div className="mb-6 flex gap-2 border-b border-border">
        {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => (
          <button
            key={tab}
            onClick={() => setFilter(tab)}
            className={cn(
              'px-4 py-2 text-sm font-medium transition-colors',
              filter === tab
                ? 'border-b-2 border-primary text-foreground'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            {tab.charAt(0).toUpperCase() + tab.slice(1)}
          </button>
        ))}
      </div>
      )}

      {/* AI Sessions view */}
      {sessionType === 'ai' && (
        aiLoading ? (
          <div className="flex justify-center py-12">
            <Spinner />
          </div>
        ) : aiSessions.length === 0 ? (
          <EmptyState
            title="No AI sessions yet"
            description="Start a FlowPilot session to get AI-guided troubleshooting. Sessions will appear here."
            action={
              <Link
                to="/pilot"
                className="inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-5 py-2.5 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
              >
                Start AI Session
              </Link>
            }
          />
        ) : (
          <div className="space-y-2">
            {aiSessions.map((s) => (
              <AISessionListItem key={s.id} session={s} />
            ))}
          </div>
        )
      )}

      {/* Flow Sessions Content */}
      {sessionType === 'flow' && (
      <>
      <div className="mb-6">
        <SessionFilters
          filters={filters}
          onChange={handleFilterChange}
          onClear={handleClearFilters}
          trees={trees}
        />
      </div>

      {/* Loading State */}
      {isLoading ? (
        <div className="flex justify-center py-12">
          <Spinner />
        </div>
      ) : sessions.length === 0 ? (
        (filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from) ? (
          <EmptyState
            title="No sessions match your filters"
            description="Try adjusting your search or filters."
            action={
              <button onClick={handleClearFilters} className="text-foreground hover:underline text-sm">
                Clear all filters
              </button>
            }
          />
        ) : (
          <EmptyState
            illustration={<SessionIllustration />}
            title="Your session history will appear here"
            description="Every troubleshooting session is recorded with decisions, timing, and outcomes — ready for export or review."
            action={
              <Link
                to="/trees"
                className="inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-5 py-2.5 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
              >
                Start a Session
              </Link>
            }
            learnMoreLink="/guides/sessions"
          />
        )
      ) : (
        <>
        <div className="space-y-4">
          {sessions.map((session, i) => (
            <div
              key={session.id}
              className={cn(
                'stagger-item',
                closingSessionId === session.id && 'relative z-50'
              )}
              style={{ '--stagger-index': i } as React.CSSProperties}
            >
            <div
              className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
            >
              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div className="flex-1">
                  {/* Status and Ticket/Client */}
                  <div className="flex flex-wrap items-center gap-2">
                    <span
                      className={cn(
                        'inline-block h-2.5 w-2.5 rounded-full',
                        session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
                      )}
                    />
                    <span className="font-medium text-foreground">
                      {session.ticket_number || 'No ticket'}
                    </span>
                    {session.client_name && (
                      <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-foreground">
                        {session.client_name}
                      </span>
                    )}
                    {session.completed_at && (
                      <span
                        className={cn(
                          'rounded-full px-2.5 py-0.5 text-xs font-medium',
                          session.outcome === 'resolved' && 'bg-emerald-500/20 text-emerald-300',
                          session.outcome === 'workaround' && 'bg-amber-500/20 text-amber-300',
                          session.outcome === 'escalated' && 'bg-blue-500/20 text-blue-300',
                          session.outcome === 'unresolved' && 'bg-rose-500/20 text-rose-300',
                          session.outcome === 'cancelled' && 'bg-zinc-500/20 text-zinc-300',
                          session.outcome === 'resolved_externally' && 'bg-cyan-500/20 text-cyan-300',
                          !session.outcome && 'bg-accent text-muted-foreground'
                        )}
                      >
                        {formatOutcomeLabel(session.outcome)}
                      </span>
                    )}
                  </div>

                  {/* Tree Name */}
                  <p className="mt-1 text-sm text-muted-foreground">
                    <span className="font-medium">Tree:</span> {getTreeName(session)}
                  </p>

                  {/* Timestamps */}
                  <p className="mt-1 text-sm text-muted-foreground">
                    Started: {session.started_at ? formatDate(session.started_at) : 'Not started'}
                    {session.completed_at && (
                      <> · Completed: {formatDate(session.completed_at)}</>
                    )}
                  </p>

                  {/* Stats */}
                  <p className="mt-1 text-sm text-muted-foreground">
                    {session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
                    {session.scratchpad && session.scratchpad.trim() && (
                      <span> · Has notes</span>
                    )}
                  </p>
                </div>

                {/* Actions */}
                <div className="relative flex gap-2">
                  <button
                    onClick={() => navigate(`/sessions/${session.id}`)}
                    className={cn(
                      'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
                      'hover:bg-accent hover:text-foreground'
                    )}
                  >
                    View Details
                  </button>
                  {!session.completed_at && session.started_at && (
                    <>
                      <button
                        onClick={() => {
                          setClosingSessionId(closingSessionId === session.id ? null : session.id)
                          setCloseOutcome('')
                          setCloseNotes('')
                        }}
                        className={cn(
                          'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
                          'hover:bg-accent hover:text-foreground',
                          closingSessionId === session.id && 'bg-accent text-foreground'
                        )}
                      >
                        Close
                      </button>
                      <button
                        onClick={() => navigate(getSessionResumePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
                        className={cn(
                          'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
                          'hover:opacity-90'
                        )}
                      >
                        Resume
                      </button>
                    </>
                  )}

                  {/* Close Session Popover */}
                  {closingSessionId === session.id && (
                    <div
                      ref={closePopoverRef}
                      className="absolute right-0 top-full z-20 mt-2 w-72 rounded-xl border border-border bg-card p-4 shadow-xl"
                    >
                      <p className="text-sm font-heading font-medium text-foreground mb-3">Close Session</p>

                      <label className="block text-xs font-label text-muted-foreground mb-1">Outcome</label>
                      <select
                        value={closeOutcome}
                        onChange={(e) => setCloseOutcome(e.target.value as SessionOutcome)}
                        title="Session outcome"
                        className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none mb-3"
                      >
                        <option value="">Select outcome...</option>
                        <option value="resolved">Resolved</option>
                        <option value="escalated">Escalated</option>
                        <option value="workaround">Workaround</option>
                        <option value="unresolved">Unresolved</option>
                        <option value="cancelled">Cancelled</option>
                        <option value="resolved_externally">Resolved Externally</option>
                      </select>

                      <label className="block text-xs font-label text-muted-foreground mb-1">Notes (optional)</label>
                      <textarea
                        value={closeNotes}
                        onChange={(e) => setCloseNotes(e.target.value)}
                        rows={2}
                        placeholder="Add closure notes..."
                        className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none mb-3"
                      />

                      <div className="flex items-center justify-end gap-2">
                        <button
                          onClick={() => {
                            setClosingSessionId(null)
                            setCloseOutcome('')
                            setCloseNotes('')
                          }}
                          className="rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                        >
                          Cancel
                        </button>
                        <button
                          onClick={handleCloseSession}
                          disabled={!closeOutcome || closeLoading}
                          className={cn(
                            'rounded-lg px-4 py-1.5 text-sm font-medium shadow-lg shadow-primary/20 transition-opacity',
                            closeOutcome
                              ? 'bg-gradient-brand text-[#101114] hover:opacity-90'
                              : 'bg-gradient-brand text-[#101114] opacity-50 cursor-not-allowed'
                          )}
                        >
                          {closeLoading ? 'Closing...' : 'Confirm'}
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
            </div>
          ))}
        </div>
        {hasMore ? (
          <p className="text-center text-sm text-muted-foreground py-4">
            Showing the 50 most recent sessions
          </p>
        ) : sessions.length > 0 ? (
          <p className="text-center text-sm text-muted-foreground py-4">
            Showing all {sessions.length} sessions
          </p>
        ) : null}
        </>
      )}
      </>
      )}
    </div>
    </div>
  )
}

export default SessionHistoryPage