'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 type { AdminRegisterState, AdminRegisterHandlers } from '@/backend/hooks/useAdminRegister';

interface Props {
  state: AdminRegisterState;
  handlers: AdminRegisterHandlers;
}

export const AdminRegisterView = ({ state, handlers }: Props) => {
  return (
    <main>
      <section>
        <header>
          {/* يمكن للمصمم إضافة عنصر الشعار (Brand Logo) هنا لاحقاً */}
          <h1>إنشاء حساب مدير</h1>
          <p>قم بإعداد حساب إداري جديد لإدارة النظام</p>
        </header>

        {state.errorMessage && (
          <Alert variant="destructive">
            <AlertDescription>{state.errorMessage}</AlertDescription>
          </Alert>
        )}

        <form onSubmit={handlers.handleSubmit}>
          <fieldset disabled={state.isLoading}>
            <div>
              <Label htmlFor="account_user_account">اسم المستخدم</Label>
              <Input
                id="account_user_account"
                type="text"
                value={state.formData.account_user_account}
                onChange={(e) => handlers.handleFormFieldChange('account_user_account', e.target.value)}
                placeholder="أدخل اسم المستخدم"
                required
              />
            </div>

            <div>
              <Label htmlFor="account_user_email">البريد الإلكتروني</Label>
              <Input
                id="account_user_email"
                type="email"
                value={state.formData.account_user_email}
                onChange={(e) => handlers.handleFormFieldChange('account_user_email', e.target.value)}
                placeholder="example@domain.com"
                required
              />
            </div>

            <div>
              <Label htmlFor="account_user_password">كلمة المرور</Label>
              <div>
                <Input
                  id="account_user_password"
                  type={state.showPassword ? "text" : "password"}
                  value={state.formData.account_user_password}
                  onChange={(e) => handlers.handleFormFieldChange('account_user_password', e.target.value)}
                  placeholder="أدخل كلمة المرور"
                  required
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={handlers.toggleShowPassword}
                >
                  {state.showPassword ? "إخفاء" : "إظهار"}
                </Button>
              </div>
            </div>

            <Button type="submit" disabled={state.isLoading}>
              {state.isLoading ? "جاري التسجيل..." : "إنشاء الحساب"}
            </Button>
          </fieldset>
        </form>

        <footer>
          <p>لديك حساب بالفعل؟</p>
          <Button 
            variant="link" 
            onClick={handlers.handleNavigateToLogin}
            disabled={state.isLoading}
          >
            تسجيل الدخول
          </Button>
        </footer>
      </section>
    </main>
  );
};