'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { AdminLogin, AdminRegister, OrderManagement } from '@/backend/route-params';
import { adminLogin, checkAdminSession } from '@/backend/actions/AdminLogin';
import type { AdminLoginInput } from '@/backend/actions/AdminLogin';
import { toast } from "sonner";
import { useAdminSession } from '@/tools/BackendSession';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { User, Lock, Eye, EyeOff, AlertCircle } from 'lucide-react';

// ===== 页面入参 =====
const getParams = AdminLogin.getParams;
export default function AdminLoginPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const sessionStore = useAdminSession();

  // ===== State =====
  const [formData, setFormData] = useState<AdminLoginInput>({
    accountUser_account: '',
    accountUser_password: ''
  });
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isCheckingSession, setIsCheckingSession] = useState(true);
  const [systemMessage, setSystemMessage] = useState<{
    type: 'error' | 'success';
    text: string;
  } | null>(null);

  // ===== Effects =====
  useEffect(() => {
    let isMounted = true;
    const verifySession = async () => {
      try {
        const result = await checkAdminSession();
        if (isMounted) {
          if (result.session_isLoggedIn) {
            OrderManagement.navigateToDefault(router);
          } else {
            setIsCheckingSession(false);
          }
        }
      } catch (error) {
        if (isMounted) {
          setIsCheckingSession(false);
        }
      }
    };
    verifySession();
    return () => {
      isMounted = false;
    };
  }, [router]);

  // ===== Handlers =====
  const handleFormChange = useCallback(<K extends keyof AdminLoginInput,>(field: K, value: AdminLoginInput[K]) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    // مسح رسالة الخطأ عند بدء الكتابة مجدداً
    if (systemMessage?.type === 'error') {
      setSystemMessage(null);
    }
  }, [systemMessage]);
  const togglePasswordVisibility = useCallback(() => {
    setShowPassword(prev => !prev);
  }, []);
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSystemMessage(null);
    const account = formData.accountUser_account.trim();
    if (!account || !formData.accountUser_password) {
      const msg = 'يرجى إدخال اسم الحساب وكلمة المرور';
      setSystemMessage({
        type: 'error',
        text: msg
      });
      toast.error(msg);
      return;
    }
    setIsLoading(true);
    try {
      const result = await adminLogin(formData);

      // تحديث حالة الجلسة
      sessionStore.set({
        token: result.token,
        user_id: result.accountUser_id,
        username: result.accountUser_account
      });
      const successMsg = 'تم تسجيل الدخول بنجاح';
      setSystemMessage({
        type: 'success',
        text: successMsg
      });
      toast.success(successMsg);

      // الانتقال إلى صفحة إدارة الطلبات
      OrderManagement.navigateToDefault(router);
    } catch (error: any) {
      const errorMsg = error.message || 'بيانات الدخول غير صحيحة';
      setSystemMessage({
        type: 'error',
        text: errorMsg
      });
      toast.error(errorMsg);
    } finally {
      setIsLoading(false);
    }
  };
  const handleNavigateToRegister = useCallback(() => {
    AdminRegister.navigateTo(router);
  }, [router]);

  // ===== Render =====
  if (isCheckingSession) {
    return <main data-api-unique-id='adminloginview-skeleton-with-logic-r21780721f2957fa5-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
        <div data-api-unique-id='adminloginview-skeleton-with-logic-re5f6a352fa10c29b-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>جاري التحقق من الجلسة...</div>
      </main>;
  }
  return <main data-api-unique-id='adminloginview-skeleton-with-logic-r00b1cc5d34e34354-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
      <section data-api-unique-id='adminloginview-skeleton-with-logic-r0e316c10998b092d-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
        <Card data-api-unique-id='adminloginview-skeleton-with-logic-ra078257fb0aacaf8-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
          <CardHeader data-api-unique-id='adminloginview-skeleton-with-logic-rf5ff75f70e562f06-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
            <CardTitle data-api-unique-id='adminloginview-skeleton-with-logic-reb2837ba075f0b3d-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>مشوار - تسجيل دخول الإدارة</CardTitle>
            <CardDescription data-api-unique-id='adminloginview-skeleton-with-logic-r5d9ee491a8b066f4-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>هذه الصفحة مخصصة لمدير النظام فقط</CardDescription>
          </CardHeader>
          
          <CardContent data-api-unique-id='adminloginview-skeleton-with-logic-rc23f788df87978b5-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
            {systemMessage && <Alert variant={systemMessage.type === 'error' ? 'destructive' : 'default'} data-api-unique-id='adminloginview-skeleton-with-logic-r77e5501a36da51d0-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                {systemMessage.type === 'error' && <AlertCircle data-api-unique-id='adminloginview-skeleton-with-logic-r40745c431bfffe3b-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' />}
                <AlertDescription data-api-unique-id='adminloginview-skeleton-with-logic-r0384afc200dbc410-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                  {systemMessage.text}
                </AlertDescription>
              </Alert>}

            <form onSubmit={handleSubmit} data-api-unique-id='adminloginview-skeleton-with-logic-r8262809f0e67cfaf-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
              <fieldset disabled={isLoading} data-api-unique-id='adminloginview-skeleton-with-logic-r047d4fab5ce491cc-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                
                <div data-api-unique-id='adminloginview-skeleton-with-logic-r1bff3cefd8e6e844-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                  <Label htmlFor="accountUser_account" data-api-unique-id='adminloginview-skeleton-with-logic-r51d7a7837edce87b-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                    <User data-api-unique-id='adminloginview-skeleton-with-logic-rfe2a98298053e1c3-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' /> اسم الحساب
                  </Label>
                  <Input id="accountUser_account" type="text" placeholder="أدخل اسم الحساب" value={formData.accountUser_account} onChange={e => handleFormChange('accountUser_account', e.target.value)} disabled={isLoading} autoComplete="username" data-api-unique-id='adminloginview-skeleton-with-logic-r0eb041e50168fb4e-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' />
                </div>

                <div data-api-unique-id='adminloginview-skeleton-with-logic-r0465c1c9c09449b8-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                  <Label htmlFor="accountUser_password" data-api-unique-id='adminloginview-skeleton-with-logic-r270b066c9fa31e41-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                    <Lock data-api-unique-id='adminloginview-skeleton-with-logic-rb2acdf0f253249ac-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' /> كلمة المرور
                  </Label>
                  <div data-api-unique-id='adminloginview-skeleton-with-logic-r8d5e70fbc192577d-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                    <Input id="accountUser_password" type={showPassword ? 'text' : 'password'} placeholder="أدخل كلمة المرور" value={formData.accountUser_password} onChange={e => handleFormChange('accountUser_password', e.target.value)} disabled={isLoading} autoComplete="current-password" data-api-unique-id='adminloginview-skeleton-with-logic-r875694f7bf120b01-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' />
                    <Button type="button" variant="ghost" size="icon" onClick={togglePasswordVisibility} disabled={isLoading} aria-label="إظهار/إخفاء كلمة المرور" data-api-unique-id='adminloginview-skeleton-with-logic-r97e89a66d9f21546-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                      {showPassword ? <EyeOff data-api-unique-id='adminloginview-skeleton-with-logic-r92155581c6219074-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' /> : <Eye data-api-unique-id='adminloginview-skeleton-with-logic-recaaa841c0c01396-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic' />}
                    </Button>
                  </div>
                </div>

                <Button type="submit" disabled={isLoading} data-api-unique-id='adminloginview-skeleton-with-logic-rf6051a5df8d82018-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
                  تسجيل الدخول
                </Button>
              </fieldset>
            </form>
          </CardContent>

          <CardFooter data-api-unique-id='adminloginview-skeleton-with-logic-r562d439593f39499-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
            <Button type="button" variant="link" onClick={handleNavigateToRegister} disabled={isLoading} data-api-unique-id='adminloginview-skeleton-with-logic-r86b6d828cb0c2170-s3753020151' data-api-unique-page-name='src/backend/components/AdminLoginView_skeleton_with_logic'>
              تسجيل حساب مدير جديد
            </Button>
          </CardFooter>
        </Card>
      </section>
    </main>;
}