'use client';

import React from 'react';
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, AlertTitle } from "@/components/ui/alert";
import { User, Lock, Eye, EyeOff, AlertCircle, Loader2, ShieldCheck } from 'lucide-react';
import EditableImg from '@/@base/EditableImg';
import type { AdminLoginState, AdminLoginHandlers } from '@/backend/hooks/useAdminLogin';
interface Props {
  state: AdminLoginState;
  handlers: AdminLoginHandlers;
}

/**
 * AdminLoginView - Professional Logistics Admin Authentication Portal
 * Designed with Iraqi Meshwar Premium Brand Guidelines.
 * Features: RTL support, Futuristic glassmorphism, Strict layout discipline.
 */
export const AdminLoginView = ({
  state,
  handlers
}: Props) => {
  // Session Checking State (Pre-render guard)
  if (state.isCheckingSession) {
    return <main className="min-h-screen w-full bg-background flex flex-col items-center justify-center overflow-hidden font-body" dir="rtl">
        <div className="flex flex-col items-center gap-4 animate-pulse">
          <div className="w-20 h-20">
            <EditableImg propKey="system_loading_logo" keywords="logistics transport fleet icon" description="Meshwar Loading Logo" />
          </div>
          <p className="text-muted-foreground text-sm font-header">جاري التحقق من الجلسة الأمنية...</p>
        </div>
      </main>;
  }
  return <main className="min-h-screen w-full bg-background relative overflow-hidden font-body selection:bg-primary selection:text-primary-foreground" dir="rtl">
      {/* Dynamic Background Elements - Meshwar Brand Glow */}
      <div className="absolute inset-0 bg-[var(--gradient-hero-bg)] pointer-events-none" />
      <div className="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-primary/10 rounded-full blur-[120px] pointer-events-none" />
      <div className="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-accent/5 rounded-full blur-[120px] pointer-events-none" />

      <section data-controller-name="تسجيل دخول الإدارة" className="w-full h-screen flex items-center justify-center">
        <div className="container mx-auto px-8 flex justify-center items-center h-full">
          
          <Card className="w-full max-w-[440px] border-border bg-card shadow-lg backdrop-blur-sm relative z-10 overflow-hidden">
            {/* Branding Accent Bar */}
            <div className="h-1.5 w-full bg-gradient-to-r from-primary via-primary to-accent" />
            
            <CardHeader className="pt-8 pb-6 px-8 text-center space-y-4">
              <div className="mx-auto w-24 h-24 mb-2 drop-shadow-neon-primary">
                 <EditableImg propKey="admin_login_brand_logo" keywords="premium logistics abstract logo purple" description="Meshwar Logo" needLargeImage={true} />
              </div>
              <div className="space-y-1.5">
                <CardTitle className="text-2xl font-display font-bold text-foreground tracking-tight">
                  مشوار لإدارة اللوجستيات
                </CardTitle>
                <CardDescription className="text-muted-foreground font-header text-sm">
                  بوابة دخول مدير النظام الموحدة
                </CardDescription>
              </div>
            </CardHeader>

            <CardContent className="px-8 pb-6 space-y-6">
              {/* System Messages for Feedback */}
              {state.systemMessage && <Alert variant={state.systemMessage.type === 'error' ? 'destructive' : 'default'} className="animate-in fade-in slide-in-from-top-2">
                  {state.systemMessage.type === 'error' ? <AlertCircle className="h-4 w-4" /> : <ShieldCheck className="h-4 w-4" />}
                  <AlertTitle className="font-header font-bold mb-1">تنبيه النظام</AlertTitle>
                  <AlertDescription className="text-xs leading-relaxed opacity-90">
                    {state.systemMessage.text}
                  </AlertDescription>
                </Alert>}

              <form onSubmit={handlers.handleSubmit} className="space-y-5">
                <fieldset disabled={state.isLoading} className="space-y-5 group">
                  
                  {/* Account Field */}
                  <div className="space-y-2.5">
                    <Label htmlFor="accountUser_account" className="text-sm font-header font-medium flex items-center gap-2 text-foreground/90 group-focus-within:text-primary transition-colors">
                      <User className="w-4 h-4" />
                      اسم الحساب
                    </Label>
                    <Input data-auto="account" id="accountUser_account" type="text" className="h-12 px-4 bg-input border-border focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:shadow-neon-primary transition-all duration-300" placeholder="أدخل اسم الحساب الإداري" value={state.formData.accountUser_account} onChange={e => handlers.handleFormChange('accountUser_account', e.target.value)} autoComplete="username" />
                  </div>

                  {/* Password Field */}
                  <div className="space-y-2.5">
                    <Label htmlFor="accountUser_password" className="text-sm font-header font-medium flex items-center gap-2 text-foreground/90 group-focus-within:text-primary transition-colors">
                      <Lock className="w-4 h-4" />
                      كلمة المرور
                    </Label>
                    <div className="flex gap-2">
                      <Input data-auto="password" id="accountUser_password" type={state.showPassword ? 'text' : 'password'} className="h-12 px-4 bg-input border-border focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:shadow-neon-primary transition-all duration-300 flex-1" placeholder="••••••••" value={state.formData.accountUser_password} onChange={e => handlers.handleFormChange('accountUser_password', e.target.value)} autoComplete="current-password" />
                      <Button type="button" variant="secondary" size="icon" className="h-12 w-12 flex-shrink-0 bg-secondary hover:bg-secondary/80 text-secondary-foreground transition-all" onClick={handlers.togglePasswordVisibility} aria-label="إظهار/إخفاء كلمة المرور">
                        {state.showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                      </Button>
                    </div>
                  </div>

                  {/* Submit Action */}
                  <Button data-auto="submit" type="submit" className="w-full h-12 mt-4 bg-accent hover:bg-accent/90 text-accent-foreground font-header font-bold text-base shadow-neon-accent hover:scale-[1.01] active:scale-[0.98] transition-all duration-200" disabled={state.isLoading}>
                    {state.isLoading ? <>
                        <Loader2 className="ml-2 h-5 w-5 animate-spin" />
                        جاري التحقق...
                      </> : "تسجيل الدخول للنظام"}
                  </Button>
                </fieldset>
              </form>
            </CardContent>

            <CardFooter className="px-8 py-6 bg-muted/30 border-t border-border flex flex-col items-center gap-3">
              <p className="text-xs text-muted-foreground font-header">
                ليس لديك حساب إداري؟
              </p>
              <Button type="button" variant="link" className="text-primary hover:text-primary/80 font-header font-semibold text-sm transition-colors p-0 h-auto" onClick={handlers.handleNavigateToRegister} disabled={state.isLoading}>
                إنشاء حساب مدير جديد
              </Button>
            </CardFooter>
          </Card>
          
        </div>
      </section>

      {/* Footer Branding - Fixed Bottom */}
      <footer className="absolute bottom-6 w-full text-center px-8 pointer-events-none">
        <p className="text-[10px] text-muted-foreground/40 uppercase tracking-[0.2em] font-body">
          Meshwar Logistics Enterprise System &copy; {new Date().getFullYear()} • Secure Access Point
        </p>
      </footer>
    </main>;
};