import { useEffect, useState, useRef } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { useLibraryStore } from '@/store/library-store'
import { AppHeader } from '@/components/AppHeader'

export function SettingsPage() {
  const navigate = useNavigate()
  const { settings, updateSettings, load } = useLibraryStore()
  const [localLabel, setLocalLabel] = useState(settings.groupLabel)
  const [isDirty, setIsDirty] = useState(false)

  // Cargar settings si el store no fue inicializado (navegación directa a /settings)
  useEffect(() => { load() }, [load])

  // Sincronizar con el store solo cuando el usuario no está editando
  useEffect(() => {
    if (!isDirty) setLocalLabel(settings.groupLabel)
  }, [settings.groupLabel, isDirty])

  async function save() {
    const trimmed = localLabel.trim() || 'Cliente'
    setLocalLabel(trimmed)
    setIsDirty(false)
    await updateSettings({ groupLabel: trimmed })
  }

  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <div className="min-h-screen bg-background">
      <AppHeader />
      <div className="max-w-2xl mx-auto px-6 py-8">
        {/* Header */}
        <div className="mb-8">
          <button
            onClick={() => navigate({ to: '/' })}
            className="text-sm font-medium mb-4 inline-block transition-opacity hover:opacity-80"
            style={{ color: '#F59845' }}
          >
            ← Volver
          </button>
          <h1 className="text-[18px] font-medium">Configuración</h1>
          <p className="text-[12px] text-muted-foreground mt-0.5">Personalización del workspace</p>
        </div>

        {/* Sección Biblioteca */}
        <div className="space-y-5">
          <div className="border-b border-border pb-2">
            <h2 className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
              Biblioteca
            </h2>
          </div>

          <div className="space-y-2">
            <label className="text-[13px] font-medium block">Etiqueta de grupos</label>
            <p className="text-[12px] text-muted-foreground">
              Cómo se llama el nivel de agrupación en la biblioteca. Por defecto: 'Cliente'.
            </p>
            <input
              ref={inputRef}
              type="text"
              value={localLabel}
              onChange={(e) => { setLocalLabel(e.target.value); setIsDirty(true) }}
              onBlur={save}
              onKeyDown={(e) => {
                if (e.key === 'Enter') { e.preventDefault(); inputRef.current?.blur() }
                if (e.key === 'Escape') { setLocalLabel(settings.groupLabel); setIsDirty(false); inputRef.current?.blur() }
              }}
              className="text-sm px-3 py-2 rounded-lg border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary w-full max-w-xs"
              placeholder="Cliente"
            />
            {localLabel.trim() && (
              <p className="text-[12px] text-muted-foreground">
                Los procesos se organizarán por <strong>{localLabel.trim()}</strong>.
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
