'use client';

import { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { AdminRegister, AdminLogin } from '@/backend/route-params';
import type { RegisterAdminInput } from '@/backend/actions/AdminRegister';
import { registerAdmin } from '@/backend/actions/AdminRegister';
import { toast } from "sonner";
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";
export default function AdminRegisterPage() {
  // ===== 页面入参 =====
  const searchParams = useSearchParams();
  const _params = AdminRegister.getParams(searchParams);

  // ===== State =====
  const router = useRouter();
  const [formData, setFormData] = useState<RegisterAdminInput>({
    account_user_account: '',
    account_user_email: '',
    account_user_password: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [showPassword, setShowPassword] = useState(false);

  // ===== Handlers =====
  const handleFormFieldChange = <K extends keyof RegisterAdminInput,>(field: K, value: RegisterAdminInput[K]) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    // بمجرد أن يبدأ المستخدم في الكتابة، نقوم بإخفاء رسالة الخطأ السابقة
    if (errorMessage) {
      setErrorMessage(null);
    }
  };
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setErrorMessage(null);
    try {
      await registerAdmin(formData);
      toast.success('تم إنشاء حساب المدير بنجاح');
      AdminLogin.navigateTo(router);
    } catch (error: unknown) {
      if (error instanceof Error) {
        setErrorMessage(error.message);
      } else {
        setErrorMessage('حدث خطأ غير متوقع أثناء التسجيل');
      }
    } finally {
      setIsLoading(false);
    }
  };

  // ===== Render =====
  return <main data-api-unique-id='adminregisterview-skeleton-with-logic-r06debf2cd812ea01-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
      <section data-api-unique-id='adminregisterview-skeleton-with-logic-r8aad4d169789c4b0-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
        <header data-api-unique-id='adminregisterview-skeleton-with-logic-r99d68ea434914a14-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
          {/* يمكن للمصمم إضافة عنصر الشعار (Brand Logo) هنا لاحقاً */}
          <h1 data-api-unique-id='adminregisterview-skeleton-with-logic-r64c26dda5f980fef-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>إنشاء حساب مدير</h1>
          <p data-api-unique-id='adminregisterview-skeleton-with-logic-rcc91e2ea825d63fc-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>قم بإعداد حساب إداري جديد لإدارة النظام</p>
        </header>

        {errorMessage && <Alert variant="destructive" data-api-unique-id='adminregisterview-skeleton-with-logic-r10b8ca45937b9e91-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
            <AlertDescription data-api-unique-id='adminregisterview-skeleton-with-logic-r1284a50ddd2f2590-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>{errorMessage}</AlertDescription>
          </Alert>}

        <form onSubmit={handleSubmit} data-api-unique-id='adminregisterview-skeleton-with-logic-rcd8e04328a071d86-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
          <fieldset disabled={isLoading} data-api-unique-id='adminregisterview-skeleton-with-logic-r561c6569f59ec088-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
            <div data-api-unique-id='adminregisterview-skeleton-with-logic-r87f376f4c6a778f8-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
              <Label htmlFor="account_user_account" data-api-unique-id='adminregisterview-skeleton-with-logic-r8f24b94cc82218a4-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>اسم المستخدم</Label>
              <Input id="account_user_account" type="text" value={formData.account_user_account} onChange={e => handleFormFieldChange('account_user_account', e.target.value)} placeholder="أدخل اسم المستخدم" required data-api-unique-id='adminregisterview-skeleton-with-logic-r831d16453ed6a5de-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='adminregisterview-skeleton-with-logic-r8b775943f3a257d1-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
              <Label htmlFor="account_user_email" data-api-unique-id='adminregisterview-skeleton-with-logic-r695a61b423116c24-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>البريد الإلكتروني</Label>
              <Input id="account_user_email" type="email" value={formData.account_user_email} onChange={e => handleFormFieldChange('account_user_email', e.target.value)} placeholder="example@domain.com" required data-api-unique-id='adminregisterview-skeleton-with-logic-r0962358615b728b5-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic' />
            </div>

            <div data-api-unique-id='adminregisterview-skeleton-with-logic-r24b296bf773268a2-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
              <Label htmlFor="account_user_password" data-api-unique-id='adminregisterview-skeleton-with-logic-r0d6409b695621ef0-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>كلمة المرور</Label>
              <div data-api-unique-id='adminregisterview-skeleton-with-logic-rc51a781d9160edc8-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
                <Input id="account_user_password" type={showPassword ? "text" : "password"} value={formData.account_user_password} onChange={e => handleFormFieldChange('account_user_password', e.target.value)} placeholder="أدخل كلمة المرور" required data-api-unique-id='adminregisterview-skeleton-with-logic-r6586964e02c9e022-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic' />
                <Button type="button" variant="ghost" size="sm" onClick={() => setShowPassword(!showPassword)} data-api-unique-id='adminregisterview-skeleton-with-logic-r0ce2bdffaa1a0be1-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
                  {showPassword ? "إخفاء" : "إظهار"}
                </Button>
              </div>
            </div>

            <Button type="submit" disabled={isLoading} data-api-unique-id='adminregisterview-skeleton-with-logic-r651428c5b5ac73b3-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
              {isLoading ? "جاري التسجيل..." : "إنشاء الحساب"}
            </Button>
          </fieldset>
        </form>

        <footer data-api-unique-id='adminregisterview-skeleton-with-logic-r36935ac48d833cfc-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
          <p data-api-unique-id='adminregisterview-skeleton-with-logic-rf52074b2efe1ec60-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>لديك حساب بالفعل؟</p>
          <Button variant="link" onClick={() => AdminLogin.navigateTo(router)} disabled={isLoading} data-api-unique-id='adminregisterview-skeleton-with-logic-rd257e44ca3d544a7-s4102719815' data-api-unique-page-name='src/backend/components/AdminRegisterView_skeleton_with_logic'>
            تسجيل الدخول
          </Button>
        </footer>
      </section>
    </main>;
}