import { useEffect, useState } from 'react'
import { Check } from 'lucide-react'
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { SUPABASE_URL, SUPABASE_ANON_KEY } from '@/lib/supabase'
import { useAuth } from '@/auth/AuthContext'

interface ProfileSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

// Lee el access token de localStorage sin pasar por el processLock de Supabase.
// El token es escrito por GoTrueClient tras cada login/refresh y siempre está vigente
// mientras la sesión esté activa.
function getAccessToken(): string | null {
  try {
    const key = Object.keys(localStorage).find(
      (k) => k.startsWith('sb-') && k.endsWith('-auth-token')
    )
    if (!key) return null
    const stored = JSON.parse(localStorage.getItem(key) ?? 'null') as Record<string, unknown> | null
    return (stored?.access_token as string | undefined) ?? null
  } catch {
    return null
  }
}

export function ProfileSheet({ open, onOpenChange }: ProfileSheetProps) {
  const { user, updateUser } = useAuth()
  const [name, setName] = useState('')
  const [company, setCompany] = useState('')

  useEffect(() => {
    if (open && user) {
      setName(user.name || user.email || '')
      setCompany(user.company ?? '')
    }
    // Intencional: solo inicializar cuando el sheet se abre, no en cada cambio de `user`
    // (evita resetear el formulario mientras el usuario está editando).
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])

  function handleSave() {
    if (!user || !name.trim()) return

    const savedName = name.trim()
    const savedCompany = company.trim() || undefined

    // Actualización optimista: aplicar cambios localmente y cerrar el Sheet de inmediato.
    // El Sheet nunca queda abierto esperando la respuesta del servidor.
    // La modal de Radix bloquea todo el UI mientras está abierta, así que cerramos
    // ANTES del await para que el usuario pueda seguir trabajando sin demora.
    updateUser({ name: savedName, company: savedCompany })
    onOpenChange(false)

    // Persistir en Supabase en background — fire & forget.
    // Si falla (red lenta, token vencido, cold start de Supabase), el estado local
    // ya tiene el nuevo nombre. En el próximo login, syncProfileFromDB recupera el DB.
    const token = getAccessToken()
    if (!token) return

    void fetch(
      `${SUPABASE_URL}/rest/v1/users?id=eq.${encodeURIComponent(user.id)}`,
      {
        method: 'PATCH',
        headers: {
          apikey: SUPABASE_ANON_KEY,
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
          Prefer: 'return=minimal',
        },
        body: JSON.stringify({ name: savedName, company: savedCompany ?? null }),
        signal: AbortSignal.timeout(10000),
      }
    )
      .then((res) => {
        if (!res.ok) console.error('[ProfileSheet] Error guardando perfil:', res.status)
      })
      .catch((err) => {
        console.error('[ProfileSheet] Error guardando perfil:', err)
      })
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Editar perfil</SheetTitle>
        </SheetHeader>

        <div className="space-y-4 mt-6">
          <div className="space-y-1.5">
            <Label className="text-xs">Nombre</Label>
            <Input
              autoFocus
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Tu nombre"
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs">Empresa</Label>
            <Input
              value={company}
              onChange={(e) => setCompany(e.target.value)}
              placeholder="InQuality"
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs">Email</Label>
            <Input value={user?.email ?? ''} readOnly className="bg-muted text-muted-foreground cursor-not-allowed" />
          </div>
        </div>

        <SheetFooter className="mt-6 flex gap-2">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button onClick={handleSave} disabled={!name.trim()} className="gap-1.5">
            <Check className="h-4 w-4" />
            Guardar
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}