'use client'

import {
  Armchair,
  ArrowDown,
  ArrowLeft,
  ArrowUp,
  ArrowUpDown,
  ChevronLeft,
  ChevronRight,
  Frame,
  Layers,
  Pencil,
  RefreshCw,
  Search,
  Trash2,
  Users,
  UserX,
} from 'lucide-react'
import Link from 'next/link'
import { useMemo, useState } from 'react'
import { bulkDeleteRoomItems, deleteRoomItem, roomRconAction } from '@/actions/rooms'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { useServerAction } from '@/hooks/use-server-action'
import { EditItemDialog } from './edit-item-dialog'

interface FurniRow {
  id: number
  baseId: number
  name: string
  itemName: string
  type: string
  x: number
  y: number
  z: number
  rot: number
  wallPos: string
  userId: number
  ownerUsername: string | null
  extraData: string
}

interface Props {
  room: {
    id: number
    name: string
    ownerUsername: string
  }
  items?: FurniRow[]
  canEdit: boolean
}

const PER_PAGE = 50
type SortKey = 'id' | 'name' | 'type' | 'pos' | 'owner'
type SortDir = 'asc' | 'desc'
type View = 'flat' | 'grouped'

function iconUrl(itemName: string) {
  if (!itemName) return null
  const base = itemName.split('*')[0]
  return `/swf/dcr/hof_furni/icons/${base}_icon.png`
}

function isWallType(t: string) {
  return t === 'i'
}

export function FurniClient({ room, items = [], canEdit }: Props) {
  const { run, isPending } = useServerAction()
  const [search, setSearch] = useState('')
  const [page, setPage] = useState(1)
  const [view, setView] = useState<View>('flat')
  const [typeFilter, setTypeFilter] = useState<'all' | 'floor' | 'wall'>('all')
  const [ownerFilter, setOwnerFilter] = useState<string>('all')
  const [sortKey, setSortKey] = useState<SortKey>('id')
  const [sortDir, setSortDir] = useState<SortDir>('desc')
  const [selected, setSelected] = useState<Set<number>>(new Set())
  const [editingItem, setEditingItem] = useState<FurniRow | null>(null)

  // ── Stats ──────────────────────────────────────────────────
  const stats = useMemo(() => {
    const floor = items.filter((i) => !isWallType(i.type)).length
    const wall = items.filter((i) => isWallType(i.type)).length
    const uniqueBases = new Set(items.map((i) => i.baseId)).size
    const owners = new Set(items.map((i) => i.userId).filter((u) => u > 0)).size
    return { total: items.length, floor, wall, uniqueBases, owners }
  }, [items])

  // ── Owner options for filter ───────────────────────────────
  const ownerOptions = useMemo(() => {
    const map = new Map<string, number>()
    for (const i of items) {
      const key = i.ownerUsername ?? `#${i.userId}`
      map.set(key, (map.get(key) ?? 0) + 1)
    }
    return Array.from(map.entries()).sort((a, b) => b[1] - a[1])
  }, [items])

  // ── Filtering ──────────────────────────────────────────────
  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase()
    return items.filter((i) => {
      if (typeFilter === 'floor' && isWallType(i.type)) return false
      if (typeFilter === 'wall' && !isWallType(i.type)) return false
      if (ownerFilter !== 'all') {
        const key = i.ownerUsername ?? `#${i.userId}`
        if (key !== ownerFilter) return false
      }
      if (q) {
        return (
          i.name.toLowerCase().includes(q) ||
          i.itemName.toLowerCase().includes(q) ||
          String(i.baseId).includes(q) ||
          String(i.id).includes(q)
        )
      }
      return true
    })
  }, [items, search, typeFilter, ownerFilter])

  // ── Sorting ────────────────────────────────────────────────
  const sorted = useMemo(() => {
    const arr = [...filtered]
    arr.sort((a, b) => {
      let cmp = 0
      switch (sortKey) {
        case 'id':
          cmp = a.id - b.id
          break
        case 'name':
          cmp = a.name.localeCompare(b.name)
          break
        case 'type':
          cmp = a.type.localeCompare(b.type)
          break
        case 'pos':
          cmp = a.x - b.x || a.y - b.y
          break
        case 'owner':
          cmp = (a.ownerUsername ?? '').localeCompare(b.ownerUsername ?? '')
          break
      }
      return sortDir === 'asc' ? cmp : -cmp
    })
    return arr
  }, [filtered, sortKey, sortDir])

  // ── Grouped view ───────────────────────────────────────────
  const grouped = useMemo(() => {
    const map = new Map<number, { base: FurniRow; count: number; ids: number[] }>()
    for (const i of filtered) {
      const existing = map.get(i.baseId)
      if (existing) {
        existing.count++
        existing.ids.push(i.id)
      } else {
        map.set(i.baseId, { base: i, count: 1, ids: [i.id] })
      }
    }
    return Array.from(map.values()).sort((a, b) => b.count - a.count)
  }, [filtered])

  // ── Pagination (flat view only) ─────────────────────────────
  const lastPage = Math.max(1, Math.ceil(sorted.length / PER_PAGE))
  const currentPage = Math.min(page, lastPage)
  const pageRows = sorted.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE)

  // ── Handlers ───────────────────────────────────────────────
  function toggleSort(key: SortKey) {
    if (sortKey === key) {
      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
    } else {
      setSortKey(key)
      setSortDir('asc')
    }
  }

  function SortIcon({ k }: { k: SortKey }) {
    if (sortKey !== k) return <ArrowUpDown className="w-3 h-3 opacity-40" />
    return sortDir === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
  }

  function togglePageSelection(checked: boolean) {
    const next = new Set(selected)
    for (const r of pageRows) {
      if (checked) next.add(r.id)
      else next.delete(r.id)
    }
    setSelected(next)
  }

  function toggleRowSelection(id: number, checked: boolean) {
    const next = new Set(selected)
    if (checked) next.add(id)
    else next.delete(id)
    setSelected(next)
  }

  function handleRcon(action: 'reload' | 'kick') {
    if (action === 'kick' && !confirm('Kick all users from this room?')) return
    run(() => roomRconAction({ roomId: room.id, action }), {
      successMessage: action === 'reload' ? 'Room reloaded' : 'All users kicked',
    })
  }

  function handleDelete(itemId: number, name: string) {
    if (!confirm(`Delete "${name}" (#${itemId}) from this room?`)) return
    run(() => deleteRoomItem({ roomId: room.id, itemId }), { successMessage: 'Item deleted' })
  }

  function handleBulkDelete() {
    if (selected.size === 0) return
    if (!confirm(`Delete ${selected.size} selected item${selected.size > 1 ? 's' : ''}?`)) return
    run(() => bulkDeleteRoomItems({ roomId: room.id, itemIds: Array.from(selected) }), {
      successMessage: `${selected.size} item(s) deleted`,
      onSuccess: () => setSelected(new Set()),
    })
  }

  function handleDeleteGroup(_baseId: number, ids: number[], name: string) {
    if (!confirm(`Delete all ${ids.length} "${name}" from this room?`)) return
    run(() => bulkDeleteRoomItems({ roomId: room.id, itemIds: ids }), {
      successMessage: `${ids.length} item(s) deleted`,
    })
  }

  const allPageSelected = pageRows.length > 0 && pageRows.every((r) => selected.has(r.id))

  return (
    <div className="space-y-6">
      {/* ── Header ─────────────────────────────────────────── */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <Link href={`/admin/rooms/show/${room.id}`}>
            <Button variant="outline" size="sm">
              <ArrowLeft className="w-4 h-4 mr-1" /> Back
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Armchair className="w-6 h-6" />
              {room.name}
            </h1>
            <p className="text-sm text-muted-foreground">
              Room #{room.id} · Owner: {room.ownerUsername}
            </p>
          </div>
        </div>
        {canEdit && (
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => handleRcon('reload')}
              disabled={isPending}
            >
              <RefreshCw className="w-4 h-4 mr-1" /> Reload
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={() => handleRcon('kick')}
              disabled={isPending}
            >
              <UserX className="w-4 h-4 mr-1" /> Kick All
            </Button>
          </div>
        )}
      </div>

      {/* ── Stats Cards ────────────────────────────────────── */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        <StatCard icon={<Armchair className="w-4 h-4" />} label="Total" value={stats.total} />
        <StatCard icon={<Layers className="w-4 h-4" />} label="Floor" value={stats.floor} />
        <StatCard icon={<Frame className="w-4 h-4" />} label="Wall" value={stats.wall} />
        <StatCard
          icon={<Armchair className="w-4 h-4" />}
          label="Unique furni"
          value={stats.uniqueBases}
        />
        <StatCard icon={<Users className="w-4 h-4" />} label="Owners" value={stats.owners} />
      </div>

      {/* ── Toolbar ────────────────────────────────────────── */}
      <Card>
        <CardContent className="pt-6 space-y-4">
          <div className="flex flex-wrap items-center gap-3">
            <div className="relative flex-1 min-w-[200px] max-w-sm">
              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                placeholder="Search by name or ID..."
                value={search}
                onChange={(e) => {
                  setSearch(e.target.value)
                  setPage(1)
                }}
                className="pl-8"
              />
            </div>

            <Select
              value={typeFilter}
              onValueChange={(v: 'all' | 'floor' | 'wall') => {
                setTypeFilter(v)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-[140px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All types</SelectItem>
                <SelectItem value="floor">Floor only</SelectItem>
                <SelectItem value="wall">Wall only</SelectItem>
              </SelectContent>
            </Select>

            <Select
              value={ownerFilter}
              onValueChange={(v) => {
                setOwnerFilter(v)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All owners</SelectItem>
                {ownerOptions.map(([name, count]) => (
                  <SelectItem key={name} value={name}>
                    {name} ({count})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Tabs value={view} onValueChange={(v) => setView(v as View)} className="ml-auto">
              <TabsList>
                <TabsTrigger value="flat">Flat</TabsTrigger>
                <TabsTrigger value="grouped">Grouped</TabsTrigger>
              </TabsList>
            </Tabs>
          </div>

          {/* Bulk action bar */}
          {view === 'flat' && selected.size > 0 && canEdit && (
            <div className="flex items-center justify-between bg-muted/50 border rounded-md px-3 py-2">
              <span className="text-sm">
                <strong>{selected.size}</strong> selected
              </span>
              <div className="flex gap-2">
                <Button variant="ghost" size="sm" onClick={() => setSelected(new Set())}>
                  Clear
                </Button>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={handleBulkDelete}
                  disabled={isPending}
                >
                  <Trash2 className="w-4 h-4 mr-1" /> Delete selected
                </Button>
              </div>
            </div>
          )}

          {/* ── Flat Table ─────────────────────────────────── */}
          {view === 'flat' ? (
            <>
              <div className="border rounded-md overflow-hidden">
                <Table>
                  <TableHeader>
                    <TableRow>
                      {canEdit && (
                        <TableHead className="w-10">
                          <Checkbox
                            checked={allPageSelected}
                            onCheckedChange={(c) => togglePageSelection(c === true)}
                          />
                        </TableHead>
                      )}
                      <TableHead className="w-16"></TableHead>
                      <TableHead>
                        <button
                          type="button"
                          className="flex items-center gap-1 hover:text-foreground"
                          onClick={() => toggleSort('name')}
                        >
                          Name <SortIcon k="name" />
                        </button>
                      </TableHead>
                      <TableHead className="w-20">
                        <button
                          type="button"
                          className="flex items-center gap-1 hover:text-foreground"
                          onClick={() => toggleSort('type')}
                        >
                          Type <SortIcon k="type" />
                        </button>
                      </TableHead>
                      <TableHead className="w-32">
                        <button
                          type="button"
                          className="flex items-center gap-1 hover:text-foreground"
                          onClick={() => toggleSort('pos')}
                        >
                          Position <SortIcon k="pos" />
                        </button>
                      </TableHead>
                      <TableHead className="w-16">Rot</TableHead>
                      <TableHead className="w-32">
                        <button
                          type="button"
                          className="flex items-center gap-1 hover:text-foreground"
                          onClick={() => toggleSort('owner')}
                        >
                          Owner <SortIcon k="owner" />
                        </button>
                      </TableHead>
                      <TableHead className="w-24">
                        <button
                          type="button"
                          className="flex items-center gap-1 hover:text-foreground"
                          onClick={() => toggleSort('id')}
                        >
                          ID <SortIcon k="id" />
                        </button>
                      </TableHead>
                      {canEdit && <TableHead className="w-24 text-right">Actions</TableHead>}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {pageRows.length === 0 ? (
                      <TableRow>
                        <TableCell
                          colSpan={canEdit ? 9 : 7}
                          className="text-center text-muted-foreground py-12"
                        >
                          {items.length === 0 ? (
                            <div className="space-y-2">
                              <Armchair className="w-10 h-10 mx-auto opacity-30" />
                              <p>This room has no furniture.</p>
                            </div>
                          ) : (
                            <p>No items match your filters.</p>
                          )}
                        </TableCell>
                      </TableRow>
                    ) : (
                      pageRows.map((item) => {
                        const icon = iconUrl(item.itemName)
                        const wall = isWallType(item.type)
                        const isSelected = selected.has(item.id)
                        return (
                          <TableRow
                            key={item.id}
                            className={isSelected ? 'bg-muted/40' : 'hover:bg-muted/30'}
                          >
                            {canEdit && (
                              <TableCell>
                                <Checkbox
                                  checked={isSelected}
                                  onCheckedChange={(c) => toggleRowSelection(item.id, c === true)}
                                />
                              </TableCell>
                            )}
                            <TableCell>
                              {icon ? (
                                // eslint-disable-next-line @next/next/no-img-element
                                <img
                                  src={icon}
                                  alt={item.name}
                                  className="w-10 h-10 object-contain"
                                  onError={(e) => {
                                    ;(e.target as HTMLImageElement).style.visibility = 'hidden'
                                  }}
                                />
                              ) : (
                                <div className="w-10 h-10 bg-muted rounded" />
                              )}
                            </TableCell>
                            <TableCell>
                              <div className="font-medium">{item.name}</div>
                              <div className="text-xs text-muted-foreground font-mono">
                                {item.itemName || `base #${item.baseId}`}
                              </div>
                            </TableCell>
                            <TableCell>
                              <Badge variant={wall ? 'outline' : 'secondary'}>
                                {wall ? 'Wall' : item.type === 's' ? 'Floor' : item.type}
                              </Badge>
                            </TableCell>
                            <TableCell className="font-mono text-xs">
                              {wall
                                ? item.wallPos || '-'
                                : `${item.x},${item.y},${item.z.toFixed(1)}`}
                            </TableCell>
                            <TableCell className="font-mono text-xs">{item.rot}</TableCell>
                            <TableCell className="text-sm">
                              {item.ownerUsername ? (
                                <Link
                                  href={`/admin/users/show/${item.userId}`}
                                  className="text-primary hover:underline"
                                >
                                  {item.ownerUsername}
                                </Link>
                              ) : (
                                <span className="text-muted-foreground">#{item.userId}</span>
                              )}
                            </TableCell>
                            <TableCell className="font-mono text-xs">#{item.id}</TableCell>
                            {canEdit && (
                              <TableCell className="text-right">
                                <div className="flex justify-end gap-1">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => setEditingItem(item)}
                                    disabled={isPending}
                                    title="Edit"
                                  >
                                    <Pencil className="w-4 h-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => handleDelete(item.id, item.name)}
                                    disabled={isPending}
                                    title="Delete"
                                  >
                                    <Trash2 className="w-4 h-4 text-destructive" />
                                  </Button>
                                </div>
                              </TableCell>
                            )}
                          </TableRow>
                        )
                      })
                    )}
                  </TableBody>
                </Table>
              </div>

              {lastPage > 1 && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">
                    Showing {(currentPage - 1) * PER_PAGE + 1}-
                    {Math.min(currentPage * PER_PAGE, sorted.length)} of {sorted.length}
                  </span>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage((p) => Math.max(1, p - 1))}
                      disabled={currentPage === 1}
                    >
                      <ChevronLeft className="w-4 h-4" />
                    </Button>
                    <span className="text-sm flex items-center px-2">
                      {currentPage} / {lastPage}
                    </span>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setPage((p) => Math.min(lastPage, p + 1))}
                      disabled={currentPage === lastPage}
                    >
                      <ChevronRight className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              )}
            </>
          ) : (
            /* ── Grouped View ──────────────────────────────── */
            <div className="border rounded-md overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-16"></TableHead>
                    <TableHead>Furniture</TableHead>
                    <TableHead className="w-24">Type</TableHead>
                    <TableHead className="w-24 text-right">Count</TableHead>
                    {canEdit && <TableHead className="w-32 text-right">Action</TableHead>}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {grouped.length === 0 ? (
                    <TableRow>
                      <TableCell
                        colSpan={canEdit ? 5 : 4}
                        className="text-center text-muted-foreground py-12"
                      >
                        No items.
                      </TableCell>
                    </TableRow>
                  ) : (
                    grouped.map((g) => {
                      const icon = iconUrl(g.base.itemName)
                      const wall = isWallType(g.base.type)
                      return (
                        <TableRow key={g.base.baseId} className="hover:bg-muted/30">
                          <TableCell>
                            {icon ? (
                              // eslint-disable-next-line @next/next/no-img-element
                              <img
                                src={icon}
                                alt={g.base.name}
                                className="w-10 h-10 object-contain"
                                onError={(e) => {
                                  ;(e.target as HTMLImageElement).style.visibility = 'hidden'
                                }}
                              />
                            ) : (
                              <div className="w-10 h-10 bg-muted rounded" />
                            )}
                          </TableCell>
                          <TableCell>
                            <div className="font-medium">{g.base.name}</div>
                            <div className="text-xs text-muted-foreground font-mono">
                              {g.base.itemName || `base #${g.base.baseId}`}
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge variant={wall ? 'outline' : 'secondary'}>
                              {wall ? 'Wall' : g.base.type === 's' ? 'Floor' : g.base.type}
                            </Badge>
                          </TableCell>
                          <TableCell className="text-right">
                            <Badge>{g.count}</Badge>
                          </TableCell>
                          {canEdit && (
                            <TableCell className="text-right">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleDeleteGroup(g.base.baseId, g.ids, g.base.name)}
                                disabled={isPending}
                              >
                                <Trash2 className="w-4 h-4 text-destructive mr-1" />
                                Delete all
                              </Button>
                            </TableCell>
                          )}
                        </TableRow>
                      )
                    })
                  )}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      <EditItemDialog
        roomId={room.id}
        item={editingItem}
        open={editingItem !== null}
        onOpenChange={(o) => !o && setEditingItem(null)}
      />
    </div>
  )
}

function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: number }) {
  return (
    <Card>
      <CardContent className="pt-6">
        <div className="flex items-center justify-between">
          <div>
            <div className="text-xs text-muted-foreground">{label}</div>
            <div className="text-2xl font-bold">{value.toLocaleString()}</div>
          </div>
          <div className="text-muted-foreground">{icon}</div>
        </div>
      </CardContent>
    </Card>
  )
}