'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 } from "@/components/ui/alert";
import { User, Lock, Eye, EyeOff, AlertCircle } from 'lucide-react';
import type { AdminLoginState, AdminLoginHandlers } from '@/backend/hooks/useAdminLogin';

interface Props {
  state: AdminLoginState;
  handlers: AdminLoginHandlers;
}

export const AdminLoginView = ({ state, handlers }: Props) => {
  if (state.isCheckingSession) {
    return (
      <main>
        <div>جاري التحقق من الجلسة...</div>
      </main>
    );
  }

  return (
    <main>
      <section>
        <Card>
          <CardHeader>
            <CardTitle>مشوار - تسجيل دخول الإدارة</CardTitle>
            <CardDescription>هذه الصفحة مخصصة لمدير النظام فقط</CardDescription>
          </CardHeader>
          
          <CardContent>
            {state.systemMessage && (
              <Alert variant={state.systemMessage.type === 'error' ? 'destructive' : 'default'}>
                {state.systemMessage.type === 'error' && <AlertCircle />}
                <AlertDescription>
                  {state.systemMessage.text}
                </AlertDescription>
              </Alert>
            )}

            <form onSubmit={handlers.handleSubmit}>
              <fieldset disabled={state.isLoading}>
                
                <div>
                  <Label htmlFor="accountUser_account">
                    <User /> اسم الحساب
                  </Label>
                  <Input
                    id="accountUser_account"
                    type="text"
                    placeholder="أدخل اسم الحساب"
                    value={state.formData.accountUser_account}
                    onChange={(e) => handlers.handleFormChange('accountUser_account', e.target.value)}
                    disabled={state.isLoading}
                    autoComplete="username"
                  />
                </div>

                <div>
                  <Label htmlFor="accountUser_password">
                    <Lock /> كلمة المرور
                  </Label>
                  <div>
                    <Input
                      id="accountUser_password"
                      type={state.showPassword ? 'text' : 'password'}
                      placeholder="أدخل كلمة المرور"
                      value={state.formData.accountUser_password}
                      onChange={(e) => handlers.handleFormChange('accountUser_password', e.target.value)}
                      disabled={state.isLoading}
                      autoComplete="current-password"
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      onClick={handlers.togglePasswordVisibility}
                      disabled={state.isLoading}
                      aria-label="إظهار/إخفاء كلمة المرور"
                    >
                      {state.showPassword ? <EyeOff /> : <Eye />}
                    </Button>
                  </div>
                </div>

                <Button type="submit" disabled={state.isLoading}>
                  تسجيل الدخول
                </Button>
              </fieldset>
            </form>
          </CardContent>

          <CardFooter>
            <Button 
              type="button" 
              variant="link" 
              onClick={handlers.handleNavigateToRegister}
              disabled={state.isLoading}
            >
              تسجيل حساب مدير جديد
            </Button>
          </CardFooter>
        </Card>
      </section>
    </main>
  );
};