'use client';

import React from 'react';
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 { Card, CardContent, CardHeader, CardFooter } from "@/components/ui/card";
import { AlertCircle, User, Mail, Lock, Eye, EyeOff, ShieldCheck } from "lucide-react";
import EditableImg from '@/@base/EditableImg';
import type { AdminRegisterState, AdminRegisterHandlers } from '@/backend/hooks/useAdminRegister';
interface Props {
  state: AdminRegisterState;
  handlers: AdminRegisterHandlers;
}

/**
 * AdminRegisterView - تصميم متطور لنظام "مشوار" اللوجستي
 * يلتزم بمعايير التصميم المستقبلية الداكنة (Dark UI) مع توزيع بصري متوازن (RTL)
 */
export const AdminRegisterView = ({
  state,
  handlers
}: Props) => {
  return <main className="min-h-screen w-full bg-background relative flex flex-col items-center justify-center overflow-hidden" dir="rtl" data-api-unique-id="adminregisterview-r94dd24749ffd5052-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
      {/* Background Grid Pattern */}
      <div className="absolute inset-0 z-[-1] opacity-20 [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" data-api-unique-id="adminregisterview-r00e1ef4639d0e0db-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
        <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg" data-api-unique-id="adminregisterview-rfdf7ee0bdbac88cb-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
          <defs data-api-unique-id="adminregisterview-r4892a20209334106-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse" data-api-unique-id="adminregisterview-ra1a1a511126296a1-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1" data-api-unique-id="adminregisterview-rc6d1c5ac2354eddc-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" data-api-unique-id="adminregisterview-rd2b2a81bb3b0d478-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
        </svg>
      </div>
      {/* تأثيرات الإضاءة المحيطية */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[120px] -z-10" data-api-unique-id="adminregisterview-rb790f28f8c4f57aa-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent/5 rounded-full blur-[120px] -z-10" data-api-unique-id="adminregisterview-rb279127fa8b3425a-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />

      <section data-controller-name="تسجيل مدير جديد" className="w-full flex items-center justify-center" data-api-unique-id="adminregisterview-r888ed030d6d1c313-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
        <div className="container mx-auto px-8 flex flex-col items-center justify-center" data-api-unique-id="adminregisterview-rfe975f8ad0cb7389-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
          
          <Card className="w-full max-w-[480px] bg-card/80 backdrop-blur-xl border-border shadow-md overflow-hidden animate-in fade-in zoom-in duration-500" data-api-unique-id="adminregisterview-r4b7ddd1ac8b8eb23-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
            <CardHeader className="pt-8 pb-4 flex flex-col items-center space-y-4" data-api-unique-id="adminregisterview-r4d6c912285605202-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
              <div className="w-20 h-20 rounded-2xl bg-secondary flex items-center justify-center p-4 border border-border shadow-neon-primary" data-api-unique-id="adminregisterview-rbd4bf157635fff6c-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                <EditableImg propKey="admin_register_logo" keywords="logistics technology logo purple" description="System management logo" className="w-full h-full object-contain" data-api-unique-id="adminregisterview-r8b445fdd23f11b8c-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
              </div>
              <div className="text-center space-y-1.5" data-api-unique-id="adminregisterview-r4fc08c59b54c09ac-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                <h1 className="text-2xl font-display font-bold text-foreground tracking-tight" data-api-unique-id="adminregisterview-r2a846d655c5258cf-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                  إنشاء حساب مدير
                </h1>
                <p className="text-sm text-muted-foreground font-body" data-api-unique-id="adminregisterview-r7a8e74710bb4cd14-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                  قم بإعداد حساب إداري جديد لإدارة نظام مشوار
                </p>
              </div>
            </CardHeader>

            <CardContent className="px-8 py-4 space-y-6" data-api-unique-id="adminregisterview-r904dd77c11148ef4-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
              {/* منطقة التنبيهات */}
              {state.errorMessage && <Alert variant="destructive" className="bg-destructive/10 border-destructive/20 animate-in slide-in-from-top-2 duration-300" data-api-unique-id="adminregisterview-r7a5b67b658d6a8ad-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                  <AlertCircle className="h-4 w-4" data-api-unique-id="adminregisterview-r1415706c552e5338-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                  <AlertDescription className="font-body text-xs font-medium mr-2" data-api-unique-id="adminregisterview-rfcd33918471195a3-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                    {state.errorMessage}
                  </AlertDescription>
                </Alert>}

              <form onSubmit={handlers.handleSubmit} className="space-y-5" data-api-unique-id="adminregisterview-rb948ec17308c9393-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                <fieldset disabled={state.isLoading} className="space-y-5 group" data-api-unique-id="adminregisterview-rebdc7d3f731b2203-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                  
                  {/* حقل اسم المستخدم */}
                  <div className="space-y-2.5" data-api-unique-id="adminregisterview-r0a8ffd7032493290-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                    <Label htmlFor="account_user_account" className="text-xs font-header font-semibold text-muted-foreground flex items-center gap-2" data-api-unique-id="adminregisterview-rf6943eb751254aff-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                      <User className="w-3.5 h-3.5" data-api-unique-id="adminregisterview-r94792eaf9e3bf005-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                      اسم المستخدم
                    </Label>
                    <Input id="account_user_account" type="text" className="h-12 bg-input/50 border-border focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all font-body text-sm" value={state.formData.account_user_account} onChange={e => handlers.handleFormFieldChange('account_user_account', e.target.value)} placeholder="أدخل اسم المستخدم للنظام" required data-api-unique-id="adminregisterview-r400bc16d1510ce14-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                  </div>

                  {/* حقل البريد الإلكتروني */}
                  <div className="space-y-2.5" data-api-unique-id="adminregisterview-r7969da12cc3908c1-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                    <Label htmlFor="account_user_email" className="text-xs font-header font-semibold text-muted-foreground flex items-center gap-2" data-api-unique-id="adminregisterview-r70aece619dc9f346-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                      <Mail className="w-3.5 h-3.5" data-api-unique-id="adminregisterview-r56342df6e67e40b3-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                      البريد الإلكتروني
                    </Label>
                    <Input id="account_user_email" type="email" className="h-12 bg-input/50 border-border focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all font-body text-sm" value={state.formData.account_user_email} onChange={e => handlers.handleFormFieldChange('account_user_email', e.target.value)} placeholder="example@domain.com" required data-api-unique-id="adminregisterview-rdbeae5cbd4f8bea6-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                  </div>

                  {/* حقل كلمة المرور */}
                  <div className="space-y-2.5" data-api-unique-id="adminregisterview-rd2870f9f86288a70-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                    <div className="flex justify-between items-center" data-api-unique-id="adminregisterview-r296ab8d5207afce0-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                      <Label htmlFor="account_user_password" className="text-xs font-header font-semibold text-muted-foreground flex items-center gap-2" data-api-unique-id="adminregisterview-ra7ec1f85d98ca78b-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                        <Lock className="w-3.5 h-3.5" data-api-unique-id="adminregisterview-ra1f7ab8663233e2a-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                        كلمة المرور
                      </Label>
                      <Button type="button" variant="ghost" size="sm" className="h-auto p-0 text-[10px] text-primary hover:text-primary/80 hover:bg-transparent" onClick={handlers.toggleShowPassword} data-api-unique-id="adminregisterview-r427161dbbfb1570f-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                        {state.showPassword ? <span className="flex items-center gap-1" data-api-unique-id="adminregisterview-r11aedabd820def6d-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView"><EyeOff className="w-3 h-3" data-api-unique-id="adminregisterview-r61ae382786f1264a-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" /> إخفاء</span> : <span className="flex items-center gap-1" data-api-unique-id="adminregisterview-r9f7b83d05eaa74af-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView"><Eye className="w-3 h-3" data-api-unique-id="adminregisterview-r474616998ebe9bf7-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" /> إظهار</span>}
                      </Button>
                    </div>
                    <Input id="account_user_password" type={state.showPassword ? "text" : "password"} className="h-12 bg-input/50 border-border focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all font-body text-sm" value={state.formData.account_user_password} onChange={e => handlers.handleFormFieldChange('account_user_password', e.target.value)} placeholder="أدخل كلمة مرور قوية" required data-api-unique-id="adminregisterview-r16d9350d61aaac44-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                  </div>

                  {/* زر الإجراء الرئيسي */}
                  <Button type="submit" disabled={state.isLoading} className="w-full h-12 bg-meshwar-orange hover:bg-meshwar-orange/90 text-white font-header font-bold shadow-neon-accent transition-all duration-300 relative group overflow-hidden" data-api-unique-id="adminregisterview-r1ad3c36c8b5b5ec6-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                    <span className="relative z-10 flex items-center justify-center gap-2" data-api-unique-id="adminregisterview-r67c9635caf46bc1c-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                      {state.isLoading ? <>
                          <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" data-api-unique-id="adminregisterview-r8a26db71e8d03d9e-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                          جاري التسجيل...
                        </> : <>
                          <ShieldCheck className="w-5 h-5" data-api-unique-id="adminregisterview-r6bdecca69bb1d584-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                          إنشاء الحساب الإداري
                        </>}
                    </span>
                    <div className="absolute inset-0 bg-white/10 translate-y-12 group-hover:translate-y-0 transition-transform duration-300" data-api-unique-id="adminregisterview-re4bcb8820b161a04-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
                  </Button>
                </fieldset>
              </form>
            </CardContent>

            <CardFooter className="px-8 pb-8 pt-2 flex flex-col space-y-4" data-api-unique-id="adminregisterview-r9e60eda90415a35c-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
              <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent" data-api-unique-id="adminregisterview-re451ed3f7f83c530-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
              <div className="flex items-center justify-center gap-2 text-sm" data-api-unique-id="adminregisterview-r10426d274eb650f8-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                <span className="text-muted-foreground font-body text-xs" data-api-unique-id="adminregisterview-r85353290f0dfc877-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">لديك حساب بالفعل؟</span>
                <Button variant="link" onClick={handlers.handleNavigateToLogin} disabled={state.isLoading} className="p-0 h-auto text-primary font-header font-bold text-xs hover:no-underline hover:text-ring transition-colors" data-api-unique-id="adminregisterview-r1eec98cff54c6316-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
                  تسجيل الدخول الآن
                </Button>
              </div>
            </CardFooter>
          </Card>

          {/* تذييل الصفحة الخارجي */}
          <div className="mt-8 text-[10px] text-muted-foreground/40 font-body tracking-widest uppercase flex items-center gap-4" data-api-unique-id="adminregisterview-re52c4ec3aa872c0f-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">
            <span data-api-unique-id="adminregisterview-r73c87bcce4faf712-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">Meshwar Logistics</span>
            <div className="w-1 h-1 bg-muted-foreground/20 rounded-full" data-api-unique-id="adminregisterview-r69cdf9e5338d47b6-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
            <span data-api-unique-id="adminregisterview-rcd9637fa67af1e38-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">Secure Admin Portal</span>
            <div className="w-1 h-1 bg-muted-foreground/20 rounded-full" data-api-unique-id="adminregisterview-rd5c2cc324623af95-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView" />
            <span data-api-unique-id="adminregisterview-r8c471ecf30086a59-s3898144319" data-api-unique-page-name="src/backend/components/AdminRegisterView">v2.0.4</span>
          </div>
        </div>
      </section>
    </main>;
};