'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">
      {/* Background Grid Pattern */}
      <div className="absolute inset-0 z-[-1] opacity-20 [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]">
        <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>
      </div>
      {/* تأثيرات الإضاءة المحيطية */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[120px] -z-10" />
      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent/5 rounded-full blur-[120px] -z-10" />

      <section data-controller-name="تسجيل مدير جديد" className="w-full flex items-center justify-center">
        <div className="container mx-auto px-8 flex flex-col items-center justify-center">
          
          <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">
            <CardHeader className="pt-8 pb-4 flex flex-col items-center space-y-4">
              <div className="w-20 h-20 rounded-2xl bg-secondary flex items-center justify-center p-4 border border-border shadow-neon-primary">
                <EditableImg 
                  propKey="admin_register_logo" 
                  keywords="logistics technology logo purple" 
                  description="System management logo"
                  className="w-full h-full object-contain"
                />
              </div>
              <div className="text-center space-y-1.5">
                <h1 className="text-2xl font-display font-bold text-foreground tracking-tight">
                  إنشاء حساب مدير
                </h1>
                <p className="text-sm text-muted-foreground font-body">
                  قم بإعداد حساب إداري جديد لإدارة نظام مشوار
                </p>
              </div>
            </CardHeader>

            <CardContent className="px-8 py-4 space-y-6">
              {/* منطقة التنبيهات */}
              {state.errorMessage && (
                <Alert variant="destructive" className="bg-destructive/10 border-destructive/20 animate-in slide-in-from-top-2 duration-300">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription className="font-body text-xs font-medium mr-2">
                    {state.errorMessage}
                  </AlertDescription>
                </Alert>
              )}

              <form onSubmit={handlers.handleSubmit} className="space-y-5">
                <fieldset disabled={state.isLoading} className="space-y-5 group">
                  
                  {/* حقل اسم المستخدم */}
                  <div className="space-y-2.5">
                    <Label 
                      htmlFor="account_user_account" 
                      className="text-xs font-header font-semibold text-muted-foreground flex items-center gap-2"
                    >
                      <User className="w-3.5 h-3.5" />
                      اسم المستخدم
                    </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
                    />
                  </div>

                  {/* حقل البريد الإلكتروني */}
                  <div className="space-y-2.5">
                    <Label 
                      htmlFor="account_user_email" 
                      className="text-xs font-header font-semibold text-muted-foreground flex items-center gap-2"
                    >
                      <Mail className="w-3.5 h-3.5" />
                      البريد الإلكتروني
                    </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
                    />
                  </div>

                  {/* حقل كلمة المرور */}
                  <div className="space-y-2.5">
                    <div className="flex justify-between items-center">
                      <Label 
                        htmlFor="account_user_password" 
                        className="text-xs font-header font-semibold text-muted-foreground flex items-center gap-2"
                      >
                        <Lock className="w-3.5 h-3.5" />
                        كلمة المرور
                      </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}
                      >
                        {state.showPassword ? (
                          <span className="flex items-center gap-1"><EyeOff className="w-3 h-3" /> إخفاء</span>
                        ) : (
                          <span className="flex items-center gap-1"><Eye className="w-3 h-3" /> إظهار</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
                    />
                  </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"
                  >
                    <span className="relative z-10 flex items-center justify-center gap-2">
                      {state.isLoading ? (
                        <>
                          <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                          جاري التسجيل...
                        </>
                      ) : (
                        <>
                          <ShieldCheck className="w-5 h-5" />
                          إنشاء الحساب الإداري
                        </>
                      )}
                    </span>
                    <div className="absolute inset-0 bg-white/10 translate-y-12 group-hover:translate-y-0 transition-transform duration-300" />
                  </Button>
                </fieldset>
              </form>
            </CardContent>

            <CardFooter className="px-8 pb-8 pt-2 flex flex-col space-y-4">
              <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent" />
              <div className="flex items-center justify-center gap-2 text-sm">
                <span className="text-muted-foreground font-body text-xs">لديك حساب بالفعل؟</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"
                >
                  تسجيل الدخول الآن
                </Button>
              </div>
            </CardFooter>
          </Card>

          {/* تذييل الصفحة الخارجي */}
          <div className="mt-8 text-[10px] text-muted-foreground/40 font-body tracking-widest uppercase flex items-center gap-4">
            <span>Meshwar Logistics</span>
            <div className="w-1 h-1 bg-muted-foreground/20 rounded-full" />
            <span>Secure Admin Portal</span>
            <div className="w-1 h-1 bg-muted-foreground/20 rounded-full" />
            <span>v2.0.4</span>
          </div>
        </div>
      </section>
    </main>
  );
};