import { useCallback, useEffect, useMemo, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { Plus, RefreshCw, Camera, BedDouble, LogOut, Layers, ChevronDown, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
import type { Task, Category, Location, AppConfig, TaskStatus, Priority } from '../types'
import { STATUS_LABELS, can } from '../types'
import { fetchTasks, fetchLocations, fetchConfig, fetchOccupancy } from '../api'
import { useAuth } from '../components/AuthGate'
import NewTaskModal from '../components/NewTaskModal'
import TaskModal from '../components/TaskModal'
import { PriorityBadge, StatusBadge, UnusableBadge, ageLabel, formatDate } from '../components/shared'

const OPEN_STATUSES: TaskStatus[] = ['submitted', 'in_progress', 'hold_parts', 'hold_scheduled', 'temporary_fix']

export default function Summary() {
  const { user } = useAuth()
  const [tasks, setTasks] = useState<Task[]>([])
  const [categories, setCategories] = useState<Category[]>([])
  const [locations, setLocations] = useState<Location[]>([])
  const [config, setConfig] = useState<AppConfig | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [occupiedSiteIds, setOccupiedSiteIds] = useState<Set<string>>(new Set())
  const [departingSiteIds, setDepartingSiteIds] = useState<Set<string>>(new Set())
  const [arrivingSiteIds, setArrivingSiteIds] = useState<Set<string>>(new Set())

  const [statusFilter, setStatusFilter] = useState<TaskStatus | null>(null)
  const [categoryFilter, setCategoryFilter] = useState<number | null>(null)
  const [mineOnly, setMineOnly] = useState(false)
  const [roomsView, setRoomsView] = useState(false)
  const [groupByLocation, setGroupByLocation] = useState(false)

  const [statusOpen, setStatusOpen] = useState(false)
  const [filtersOpen, setFiltersOpen] = useState(false)

  type SortMode = 'default' | 'priority_desc' | 'priority_asc' | 'age_asc' | 'age_desc'
  const [sortMode, setSortMode] = useState<SortMode>('default')

  const SORT_CYCLE: SortMode[] = ['default', 'priority_desc', 'priority_asc', 'age_asc', 'age_desc']
  const SORT_LABELS: Record<SortMode, string> = {
    default: 'Sort',
    priority_desc: 'Priority: High first',
    priority_asc: 'Priority: Low first',
    age_asc: 'Age: Oldest first',
    age_desc: 'Age: Newest first',
  }
  const PRIORITY_ORDER: Record<Priority, number> = { urgent: 4, high: 3, medium: 2, low: 1 }

  function cycleSortMode() {
    setSortMode(prev => SORT_CYCLE[(SORT_CYCLE.indexOf(prev) + 1) % SORT_CYCLE.length])
  }

  const [searchParams, setSearchParams] = useSearchParams()
  const [showNew, setShowNew] = useState(false)
  const [newTaskPreset, setNewTaskPreset] = useState<{ locationId?: number; assetId?: number }>({})
  const [openTask, setOpenTask] = useState<number | null>(null)

  const roomsCat = useMemo(() => categories.find(c => c.is_rooms) ?? null, [categories])

  const load = useCallback(() => {
    setLoading(true)
    const taskFetch = fetchTasks({
      status: statusFilter ?? OPEN_STATUSES.join(','),
      // In rooms-view mode filter to rooms category; otherwise use the active category chip
      category_id: roomsView ? (roomsCat?.id ?? undefined) : (categoryFilter ?? undefined),
      assigned_to: mineOnly ? user.email : undefined,
    })
    // When rooms-view is on, also fetch live occupancy to mark occupied tasks
    const occFetch = roomsView ? fetchOccupancy().catch(() => null) : Promise.resolve(null)

    Promise.all([taskFetch, occFetch])
      .then(([t, occ]) => {
        setTasks(t)
        setOccupiedSiteIds(occ ? new Set(occ.occupied_site_ids) : new Set())
        setDepartingSiteIds(occ ? new Set(occ.departing_site_ids) : new Set())
        setArrivingSiteIds(occ ? new Set(occ.arriving_site_ids) : new Set())
        setError(null)
      })
      .catch(err => setError(err.message))
      .finally(() => setLoading(false))
  }, [statusFilter, categoryFilter, mineOnly, roomsView, roomsCat, user.email])

  useEffect(() => { load() }, [load])
  useEffect(() => {
    fetchLocations().then(d => { setCategories(d.categories); setLocations(d.locations) }).catch(() => {})
    fetchConfig().then(setConfig).catch(() => {})
  }, [])

  // Deep link from the Assets page: ?new_asset=&new_location= opens a prefilled
  // Report fault form instead of the asset page having its own creation form.
  useEffect(() => {
    const newAsset = searchParams.get('new_asset')
    const newLocation = searchParams.get('new_location')
    if (newAsset || newLocation) {
      setNewTaskPreset({
        locationId: newLocation ? parseInt(newLocation) : undefined,
        assetId: newAsset ? parseInt(newAsset) : undefined,
      })
      setShowNew(true)
      setSearchParams(prev => {
        const next = new URLSearchParams(prev)
        next.delete('new_asset'); next.delete('new_location')
        return next
      }, { replace: true })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParams])

  const counts = useMemo(() => {
    const c: Partial<Record<TaskStatus, number>> = {}
    for (const t of tasks) c[t.status] = (c[t.status] || 0) + 1
    return c
  }, [tasks])

  const categoryCounts = useMemo(() => {
    const c: Record<number, number> = {}
    for (const t of tasks) c[t.category_id] = (c[t.category_id] || 0) + 1
    return c
  }, [tasks])

  // Rooms chip counts: occupied = guest staying, departing = guest checking out
  // today (accessible later), arriving = booked today not yet in
  const roomsCounts = useMemo(() => {
    if (!roomsView) return null
    let occupied = 0, departing = 0, arriving = 0
    for (const t of tasks) {
      const sid = t.newbook_site_id ? String(t.newbook_site_id) : null
      if (sid && occupiedSiteIds.has(sid)) occupied++
      else if (sid && departingSiteIds.has(sid)) departing++
      else if (sid && arrivingSiteIds.has(sid)) arriving++
    }
    return { total: tasks.length, occupied, departing, arriving, free: tasks.length - occupied - departing - arriving }
  }, [tasks, roomsView, occupiedSiteIds, departingSiteIds, arrivingSiteIds])

  const sortedTasks = useMemo(() => {
    if (sortMode === 'default') return tasks
    return [...tasks].sort((a, b) => {
      if (sortMode === 'priority_desc') return (PRIORITY_ORDER[b.priority] ?? 0) - (PRIORITY_ORDER[a.priority] ?? 0)
      if (sortMode === 'priority_asc') return (PRIORITY_ORDER[a.priority] ?? 0) - (PRIORITY_ORDER[b.priority] ?? 0)
      if (sortMode === 'age_asc') return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
      if (sortMode === 'age_desc') return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
      return 0
    })
  }, [tasks, sortMode])

  const taskGroups = useMemo(() => {
    if (!groupByLocation) return null
    const groups: Record<string, Task[]> = {}
    for (const t of sortedTasks) {
      const key = t.location_name || 'Unknown'
      if (!groups[key]) groups[key] = []
      groups[key].push(t)
    }
    return Object.entries(groups).sort(([a], [b]) => a.localeCompare(b))
  }, [sortedTasks, groupByLocation])

  const roomsCategoryExists = !!roomsCat

  function toggleRoomsView() {
    setRoomsView(v => !v)
    setCategoryFilter(null) // clear any category chip when entering/leaving rooms-view
  }

  return (
    <div className="page">
      <div className="page-header">
        <h1>Open maintenance</h1>
        <button className="btn" onClick={load} disabled={loading}>
          <RefreshCw size={14} strokeWidth={1.75} /> Refresh
        </button>
        {can(user, 'report') && (
          <button className="btn btn-primary" onClick={() => { setNewTaskPreset({}); setShowNew(true) }}>
            <Plus size={14} strokeWidth={1.75} /> Report fault
          </button>
        )}
      </div>

      {error && <div className="error-banner">{error}</div>}

      <div className="filter-row">
        <div className="filter-section">
          <div className="filter-section-header" onClick={() => setStatusOpen(v => !v)}>
            <span className="filter-section-label">Status</span>
            <span className={`filter-section-summary${statusFilter === null ? ' muted' : ''}`}>
              {statusFilter === null ? 'All open' : `${STATUS_LABELS[statusFilter]}${counts[statusFilter] ? ` (${counts[statusFilter]})` : ''}`}
            </span>
            <ChevronDown size={14} strokeWidth={1.75} className={`filter-section-chevron${statusOpen ? ' open' : ''}`} />
          </div>
          {statusOpen && (
            <div className="chip-bar">
              <button className={`chip ${statusFilter === null ? 'active' : ''}`} onClick={() => setStatusFilter(null)}>
                All open
              </button>
              {OPEN_STATUSES.map(s => (
                <button key={s} className={`chip ${statusFilter === s ? 'active' : ''}`} onClick={() => setStatusFilter(statusFilter === s ? null : s)}>
                  {STATUS_LABELS[s]}{counts[s] ? ` (${counts[s]})` : ''}
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="filter-section">
          <div className="filter-section-header" onClick={() => setFiltersOpen(v => !v)}>
            <span className="filter-section-label">Filters</span>
            <span className={`filter-section-summary${!categoryFilter && !mineOnly && !roomsView && !groupByLocation ? ' muted' : ''}`}>
              {[
                !roomsView && categoryFilter ? categories.find(c => c.id === categoryFilter)?.name : null,
                roomsView ? 'Rooms view' : null,
                mineOnly ? 'Mine only' : null,
                groupByLocation ? 'Grouped' : null,
              ].filter(Boolean).join(' · ') || 'All categories'}
            </span>
            <ChevronDown size={14} strokeWidth={1.75} className={`filter-section-chevron${filtersOpen ? ' open' : ''}`} />
          </div>
          {filtersOpen && (
            <div className="chip-bar">
              {!roomsView && categories.map(c => (
                <button key={c.id} className={`chip ${categoryFilter === c.id ? 'active' : ''}`} onClick={() => setCategoryFilter(categoryFilter === c.id ? null : c.id)}>
                  {c.name}{categoryCounts[c.id] ? ` (${categoryCounts[c.id]})` : ''}
                </button>
              ))}
              <button className={`chip ${mineOnly ? 'active' : ''}`} onClick={() => setMineOnly(!mineOnly)}>
                Mine
              </button>
              {roomsCategoryExists && (
                <button
                  className={`chip ${roomsView ? 'active' : ''}`}
                  title="Show all rooms tasks — greyed tasks have an in-house guest so access may be limited"
                  onClick={toggleRoomsView}
                >
                  <BedDouble size={13} strokeWidth={1.75} />
                  {roomsView && roomsCounts
                    ? `Rooms (${roomsCounts.free} free${roomsCounts.arriving ? ` • ${roomsCounts.arriving} arriving` : ''}${roomsCounts.departing ? ` • ${roomsCounts.departing} departing` : ''}${roomsCounts.occupied ? ` • ${roomsCounts.occupied} occupied` : ''})`
                    : 'Rooms Accessible View'}
                </button>
              )}
              <button className={`chip ${groupByLocation ? 'active' : ''}`} onClick={() => setGroupByLocation(v => !v)}>
                <Layers size={13} strokeWidth={1.75} /> Group by location
              </button>
            </div>
          )}
        </div>

        <button className={`chip sort-chip ${sortMode !== 'default' ? 'active' : ''}`} onClick={cycleSortMode}>
          {sortMode === 'default' && <ArrowUpDown size={13} strokeWidth={1.75} />}
          {(sortMode === 'priority_desc' || sortMode === 'age_asc') && <ArrowDown size={13} strokeWidth={1.75} />}
          {(sortMode === 'priority_asc' || sortMode === 'age_desc') && <ArrowUp size={13} strokeWidth={1.75} />}
          {SORT_LABELS[sortMode]}
        </button>
      </div>

      {tasks.length === 0 && !loading && (
        <div className="empty-state">No open tasks match these filters.</div>
      )}

      {(() => {
        const renderTask = (t: Task) => {
          const sid = t.newbook_site_id ? String(t.newbook_site_id) : null
          const isOccupied = roomsView && !!sid && occupiedSiteIds.has(sid)
          const isDeparting = roomsView && !!sid && !isOccupied && departingSiteIds.has(sid)
          // Not exclusive with isDeparting — a departing room can also have a same-day
          // incoming booking (back-to-back turnover), and both badges should show.
          const isArriving = roomsView && !!sid && !isOccupied && arrivingSiteIds.has(sid)
          return (
            <div
              key={t.id}
              className={`card task-card ${t.priority === 'urgent' ? 'urgent' : t.priority === 'high' ? 'high' : ''} ${t.unusable ? 'unusable' : ''}`}
              // Occupied (stayover) rooms grey out hard — not accessible today. Departing
              // rooms are lightly dimmed only: guest is still in there right now, but the
              // room frees up later today so it's worth flagging rather than hiding.
              style={isOccupied ? { opacity: 0.5, filter: 'grayscale(0.3)' } : isDeparting ? { opacity: 0.8 } : undefined}
              onClick={() => setOpenTask(t.id)}
            >
              <div className="task-card-main">
                <div className="task-card-title">
                  {t.title}
                  {isOccupied && <span className="badge badge-outline"><BedDouble size={10} strokeWidth={1.75} /> Occupied</span>}
                  {isDeparting && <span className="badge" style={{ background: '#ede9fe', color: '#6d28d9', border: '1px solid #c4b5fd' }}><LogOut size={10} strokeWidth={1.75} /> Departing</span>}
                  {isArriving && <span className="badge" style={{ background: '#fef3c7', color: '#92400e', border: '1px solid #fcd34d' }}><BedDouble size={10} strokeWidth={1.75} /> Arrival today</span>}
                  {t.unusable && <UnusableBadge />}
                  {t.template_id && <span className="badge badge-outline">Recurring</span>}
                </div>
                <div className="task-card-meta">
                  {!groupByLocation && <span>{t.location_name}</span>}
                  <span>{t.category_name}</span>
                  {t.asset_name && <span>{t.asset_name}</span>}
                  <span>{ageLabel(t.created_at)} old</span>
                  {t.due_date && (
                    <span className={new Date(t.due_date) < new Date() ? 'overdue' : ''}>
                      due {formatDate(t.due_date)}
                    </span>
                  )}
                  {t.hold_until && <span>held until {formatDate(t.hold_until)}</span>}
                  {t.photo_count > 0 && <span><Camera size={12} strokeWidth={1.75} style={{ verticalAlign: -2 }} /> {t.photo_count}</span>}
                </div>
              </div>
              <div className="task-card-side">
                <PriorityBadge priority={t.priority} />
                <StatusBadge status={t.status} />
                <span className="muted" style={{ fontSize: 11.5 }}>
                  {t.assigned_type === 'contractor' ? (t.contractor_name || '—') : (t.assigned_to_name || 'Unassigned')}
                </span>
              </div>
            </div>
          )
        }

        if (taskGroups) {
          return taskGroups.map(([locationName, groupTasks]) => (
            <div key={locationName}>
              <div className="section-title">{locationName} <span style={{ fontWeight: 400, textTransform: 'none', letterSpacing: 0 }}>({groupTasks.length})</span></div>
              {groupTasks.map(renderTask)}
            </div>
          ))
        }
        return sortedTasks.map(renderTask)
      })()}

      {showNew && (
        <NewTaskModal
          categories={categories}
          locations={locations}
          config={config}
          initialLocationId={newTaskPreset.locationId}
          initialAssetId={newTaskPreset.assetId}
          onClose={() => setShowNew(false)}
          onCreated={load}
        />
      )}
      {openTask !== null && (
        <TaskModal taskId={openTask} onClose={() => setOpenTask(null)} onChanged={load} />
      )}
    </div>
  )
}