'use client'

import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Loader2,
  RotateCcw,
  Save,
  Search,
} from 'lucide-react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useMemo, useState, useTransition } from 'react'
import { toast } from 'sonner'
import { saveEmulatorSettings } from '@/actions/emulator'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useServerAction } from '@/hooks/use-server-action'

interface Setting {
  key: string
  value: string
}

interface GroupSummary {
  name: string
  count: number
}

interface EmulatorSettingsFormProps {
  settings: Setting[]
  pagination: { total: number; page: number; perPage: number; lastPage: number }
  search: string
  allGroups?: GroupSummary[]
  activeGroup?: string
}

const PER_PAGE_OPTIONS = [25, 50, 100, 200] as const

function getSettingGroup(key: string): string {
  const parts = key.split('.')
  return parts.length > 1 ? parts[0] : 'general'
}

const GROUP_BORDER_COLORS: Record<string, string> = {
  hotel: 'border-l-blue-500',
  navigator: 'border-l-green-500',
  catalog: 'border-l-purple-500',
  room: 'border-l-orange-500',
  camera: 'border-l-pink-500',
  commands: 'border-l-cyan-500',
  wordfilter: 'border-l-red-500',
  pet: 'border-l-yellow-500',
  matchmaking: 'border-l-indigo-500',
  message: 'border-l-emerald-500',
  notification: 'border-l-fuchsia-500',
  general: 'border-l-gray-400',
}

export function EmulatorSettingsForm({
  settings,
  pagination,
  search,
  allGroups,
  activeGroup,
}: EmulatorSettingsFormProps) {
  const router = useRouter()
  const searchParams = useSearchParams()

  // `values` only contains overrides typed by the user. Display falls back
  // to `setting.value`. `originalValues` accumulates the on-disk values for
  // every setting we have ever rendered (across pages) so we can detect when
  // an edit returns to its original state.
  const [values, setValues] = useState<Record<string, string>>({})
  const [originalValues, setOriginalValues] = useState<Record<string, string>>({})
  const [changedKeys, setChangedKeys] = useState<Set<string>>(new Set())
  const [isNavigating, startTransition] = useTransition()
  const { run, isPending } = useServerAction()
  const [searchValue, setSearchValue] = useState(search)

  useEffect(() => {
    setOriginalValues((prev) => {
      let dirty = false
      const next = { ...prev }
      for (const s of settings) {
        if (!(s.key in next)) {
          next[s.key] = s.value
          dirty = true
        }
      }
      return dirty ? next : prev
    })
  }, [settings])

  // Prefer the canonical list passed by the server (covers all groups, not
  // just those visible on the current page). Fall back to deriving from the
  // current page when the prop is omitted.
  const groupSummary = useMemo<GroupSummary[]>(() => {
    if (allGroups && allGroups.length > 0) return allGroups
    const map = new Map<string, number>()
    for (const s of settings) {
      const g = getSettingGroup(s.key)
      map.set(g, (map.get(g) ?? 0) + 1)
    }
    return Array.from(map.entries())
      .map(([name, count]) => ({ name, count }))
      .sort((a, b) => a.name.localeCompare(b.name))
  }, [allGroups, settings])

  function toggleGroup(name: string) {
    updateParams({
      group: activeGroup === name ? '' : name,
      page: '1',
    })
  }

  function getDisplayValue(setting: Setting): string {
    return values[setting.key] ?? setting.value
  }

  function updateValue(key: string, val: string) {
    setValues((prev) => ({ ...prev, [key]: val }))
    setChangedKeys((prev) => {
      const next = new Set(prev)
      if (originalValues[key] !== undefined && val === originalValues[key]) {
        next.delete(key)
      } else {
        next.add(key)
      }
      return next
    })
  }

  function revertChange(key: string) {
    setValues((prev) => {
      const next = { ...prev }
      delete next[key]
      return next
    })
    setChangedKeys((prev) => {
      const next = new Set(prev)
      next.delete(key)
      return next
    })
  }

  function updateParams(updates: Record<string, string>) {
    const params = new URLSearchParams(searchParams.toString())
    for (const [key, value] of Object.entries(updates)) {
      if (value) params.set(key, value)
      else params.delete(key)
    }
    startTransition(() => {
      router.push(`?${params.toString()}`)
    })
  }

  function handleSearch(e: React.FormEvent) {
    e.preventDefault()
    updateParams({ search: searchValue, page: '1' })
  }

  function handleSaveAll() {
    if (changedKeys.size === 0) {
      toast.info('No changes to save.')
      return
    }
    const changedSettings: Record<string, string> = {}
    for (const key of changedKeys) {
      changedSettings[key] = values[key]
    }
    const count = changedKeys.size
    run(() => saveEmulatorSettings({ settings: changedSettings }), {
      successMessage: `${count} setting(s) saved and synced with emulator.`,
      onSuccess: () => {
        setChangedKeys(new Set())
        setValues({})
        // Refresh server data so the on-disk values reflect the save and the
        // originalValues snapshot rebuilds on next render.
        setOriginalValues({})
        router.refresh()
      },
    })
  }

  function jumpToPage(raw: string) {
    const n = parseInt(raw, 10)
    if (!Number.isFinite(n)) return
    const clamped = Math.max(1, Math.min(pagination.lastPage, n))
    if (clamped !== pagination.page) updateParams({ page: String(clamped) })
  }

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex flex-wrap items-center gap-3">
        <form onSubmit={handleSearch} className="flex gap-2 flex-1 max-w-md">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search settings..."
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
              className="pl-9"
            />
          </div>
          <Button type="submit" variant="outline" size="sm">
            Search
          </Button>
        </form>

        <div className="ml-auto flex items-center gap-3">
          <span className="text-sm text-muted-foreground">{pagination.total} settings</span>
          {changedKeys.size > 0 && (
            <Badge variant="secondary" className="gap-1">
              {changedKeys.size} changed
            </Badge>
          )}
          <Button onClick={handleSaveAll} disabled={isPending || changedKeys.size === 0} size="sm">
            {isPending ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <Save className="mr-2 h-4 w-4" />
            )}
            Save & Sync
          </Button>
        </div>
      </div>

      {/* Group summary chips — click to toggle group filter */}
      {groupSummary.length > 1 && (
        <div className="flex flex-wrap gap-1.5 items-center">
          {activeGroup && (
            <button
              type="button"
              onClick={() => toggleGroup(activeGroup)}
              className="text-[11px] underline text-muted-foreground hover:text-foreground"
            >
              clear
            </button>
          )}
          {groupSummary.map(({ name, count }) => {
            const isActive = activeGroup === name
            const color = (GROUP_BORDER_COLORS[name] || GROUP_BORDER_COLORS.general).replace(
              'border-l-',
              'bg-',
            )
            return (
              <button
                key={name}
                type="button"
                onClick={() => toggleGroup(name)}
                className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md border text-[10px] font-mono transition-colors ${
                  isActive
                    ? 'border-primary bg-primary/10 text-foreground'
                    : 'border-border bg-background text-muted-foreground hover:text-foreground hover:bg-accent'
                }`}
                title={isActive ? `Rimuovi filtro: ${name}` : `Filtra: ${name}`}
                disabled={isNavigating}
              >
                <span className={`inline-block w-2 h-2 rounded-full ${color}`} />
                {name}
                <span className="text-muted-foreground">{count}</span>
              </button>
            )
          })}
        </div>
      )}

      {/* Settings list — flat rows with always-on inline editing */}
      <div className="rounded-md border bg-card divide-y">
        {settings.length === 0 ? (
          <div className="px-4 py-8 text-center text-sm text-muted-foreground">
            No settings found.
          </div>
        ) : (
          settings.map((setting) => {
            const group = getSettingGroup(setting.key)
            const borderColor = GROUP_BORDER_COLORS[group] || GROUP_BORDER_COLORS.general
            const isChanged = changedKeys.has(setting.key)
            const display = getDisplayValue(setting)
            return (
              <div
                key={setting.key}
                className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
                  isChanged ? 'bg-yellow-50/60 dark:bg-yellow-950/20' : ''
                }`}
              >
                <code
                  className="text-xs font-mono text-muted-foreground w-[280px] flex-shrink-0 truncate"
                  title={setting.key}
                >
                  {setting.key}
                </code>
                <Input
                  value={display}
                  onChange={(e) => updateValue(setting.key, e.target.value)}
                  className={`flex-1 h-8 text-xs font-mono ${
                    isChanged ? 'border-yellow-500/60' : ''
                  }`}
                />
                {isChanged && (
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-7 w-7 shrink-0"
                    title="Revert"
                    onClick={() => revertChange(setting.key)}
                  >
                    <RotateCcw className="h-3.5 w-3.5 text-muted-foreground" />
                  </Button>
                )}
              </div>
            )
          })
        )}
      </div>

      {/* Pagination + per-page selector */}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>Per page</span>
          <Select
            value={String(pagination.perPage)}
            onValueChange={(v) => updateParams({ perPage: v, page: '1' })}
          >
            <SelectTrigger size="sm" className="w-[80px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {PER_PAGE_OPTIONS.map((n) => (
                <SelectItem key={n} value={String(n)}>
                  {n}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <span className="ml-2">
            {pagination.total === 0
              ? '0 results'
              : `${(pagination.page - 1) * pagination.perPage + 1}–${Math.min(
                  pagination.page * pagination.perPage,
                  pagination.total,
                )} of ${pagination.total}`}
          </span>
        </div>

        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon"
            disabled={pagination.page <= 1 || isNavigating}
            onClick={() => updateParams({ page: '1' })}
            title="First page"
          >
            <ChevronsLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            disabled={pagination.page <= 1 || isNavigating}
            onClick={() => updateParams({ page: String(pagination.page - 1) })}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <div className="flex items-center gap-1 mx-1 text-sm">
            <Input
              type="number"
              min={1}
              max={pagination.lastPage}
              defaultValue={pagination.page}
              key={pagination.page}
              onBlur={(e) => jumpToPage(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') jumpToPage((e.target as HTMLInputElement).value)
              }}
              className="h-8 w-14 text-center text-xs"
            />
            <span className="text-muted-foreground">of {pagination.lastPage}</span>
          </div>
          <Button
            variant="outline"
            size="icon"
            disabled={pagination.page >= pagination.lastPage || isNavigating}
            onClick={() => updateParams({ page: String(pagination.page + 1) })}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            disabled={pagination.page >= pagination.lastPage || isNavigating}
            onClick={() => updateParams({ page: String(pagination.lastPage) })}
            title="Last page"
          >
            <ChevronsRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}