'use client'

import { useRouter } from 'next/navigation'
import { useAdminSession } from '@/tools/BackendSession'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { create } from 'zustand'

/**
 * rpc-auth.tsx
 * Frontend Authentication Logic & UI Implementation
 * Language: Arabic (ar-IQ)
 * Theme: Meshwar Brand (Purple/Orange Dark Mode)
 */

// 1. مسار تسجيل الدخول (Login Route)
const LOGIN_ROUTE = '/adminlogin'

// 2. إدارة حالة النافذة المنبثقة (Auth Dialog State Management)
interface AuthDialogState {
  isOpen: boolean
  open: () => void
  close: () => void
}

export const useAuthDialog = create<AuthDialogState>((set) => ({
  isOpen: false,
  open: () => set({ isOpen: true }),
  close: () => set({ isOpen: false })
}))

// 3. الحصول على الرمز (Token Acquisition)
export function getToken(): string | null {
  const session = useAdminSession.getState()
  return session.token || null
}

// 4. مسح بيانات الجلسة (Clear Session)
export function clearAuth(): void {
  useAdminSession.getState().reset()
}

/**
 * 5. معالجة خطأ 401 غير مخول (Unauthorized Handler)
 * المنطق: مسح التخزين المحلي وتفعيل النافذة المنبثقة العالمية
 * ملاحظة: إذا كان المستخدم في صفحة تسجيل الدخول بالفعل، لا تظهر النافذة
 */
export function handleUnauthorized(): void {
  clearAuth()
  
  // التحقق مما إذا كان المستخدم في صفحة تسجيل الدخول بالفعل لتجنب التكرار
  if (typeof window !== 'undefined' && window.location.pathname.includes(LOGIN_ROUTE)) {
    return
  }
  
  useAuthDialog.getState().open()
}

/**
 * 6. مكون نافذة انتهاء الصلاحية (AuthExpiredDialog)
 * يتم تركيبه في الـ Layout الأساسي للوحة التحكم
 */
export function AuthExpiredDialog() {
  const router = useRouter()
  const { isOpen, close } = useAuthDialog()

  const handleLogin = () => {
    close()
    router.push(LOGIN_ROUTE)
  }

  return (
    <Dialog open={isOpen} onOpenChange={close}>
      {/* 
          الموضع: ثابت في الزاوية اليمنى السفلية (Fixed Bottom-Right)
          التصميم: مستوحى من نظام Meshwar (Glassmorphism)
      */}
      <DialogContent 
        dir="rtl"
        className="fixed bottom-4 right-4 left-auto top-auto translate-x-0 translate-y-0 w-[90vw] max-w-[400px] border-border bg-card/95 backdrop-blur-md shadow-lg rounded-lg border-2"
      >
        <DialogHeader className="text-right space-y-3">
          <DialogTitle className="font-header text-primary text-xl font-bold tracking-tight">
            تهيئة حساب تسجيل الدخول
          </DialogTitle>
          <DialogDescription className="font-body text-muted-foreground text-sm leading-relaxed">
            انتهت صلاحية الجلسة أو لم يتم تسجيل الدخول. يمكنك تسجيل الدخول باستخدام حساب تجريبي لتجربة كافة المميزات.
          </DialogDescription>
        </DialogHeader>
        
        <DialogFooter className="flex flex-row-reverse gap-3 mt-6 sm:justify-start">
          <Button 
            onClick={handleLogin}
            className="font-body bg-meshwar-brand hover:bg-meshwar-brand/90 active:scale-95 text-white shadow-neon-primary transition-all duration-200 px-6 rounded-md"
          >
            تسجيل الدخول
          </Button>
          <Button 
            variant="outline" 
            onClick={close}
            className="font-body border-border hover:bg-muted hover:text-foreground active:bg-border transition-colors px-6 rounded-md"
          >
            لاحقاً
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}