'use client';

import { useEffect, useState } from 'react';
import AuthService from '@/app/services/AuthService';
import Link from 'next/link';

export default function AddAdminPage() {
  const [isAdmin, setIsAdmin] = useState(false);
  const [checked, setChecked] = useState(false);
  const [formState, setFormState] = useState({ fullName: '', email: '', password: '' });
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    setIsAdmin(AuthService.isAuthenticated() && AuthService.isAdmin());
    setChecked(true);
  }, []);

  const handleChange = (field) => (event) => {
    setFormState((prev) => ({ ...prev, [field]: event.target.value }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setSaved(true);
    console.log('Add admin payload', formState);
  };

  if (!checked) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="w-14 h-14 border-4 border-amber-500 border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!isAdmin) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div className="max-w-md text-center bg-white rounded-3xl shadow-lg border border-gray-200 p-8">
          <Link href="/" className="inline-flex items-center justify-center px-6 py-3 rounded-full bg-amber-500 text-white hover:bg-amber-600 transition-colors">
            العودة للرئيسية
          </Link>
        </div>
      </div>
    );
  }

  return (
    <main className="min-h-screen bg-slate-50 p-6 md:p-10">
      <div className="max-w-4xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div>
            <p className="text-sm text-amber-600 uppercase tracking-[0.2em]">لوحة المدير</p>
            <h1 className="text-3xl font-bold text-slate-900 mt-3">إضافة مدير جديد</h1>
            <p className="text-slate-500 mt-2">انشئ حساب مسؤول جديد مع صلاحيات الإدارة.</p>
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-[1.5fr_0.8fr]">
          <section className="rounded-[28px] bg-white p-8 shadow-sm border border-slate-200">
            <h2 className="text-xl font-semibold mb-6">بيانات المدير</h2>
            <form onSubmit={handleSubmit} className="space-y-5">
              <label className="block">
                <span className="text-sm font-medium text-slate-700">الاسم الكامل</span>
                <input
                  type="text"
                  value={formState.fullName}
                  onChange={handleChange('fullName')}
                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                  placeholder="مثال: محمد الأحمد"
                  required
                />
              </label>

              <label className="block">
                <span className="text-sm font-medium text-slate-700">البريد الإلكتروني</span>
                <input
                  type="email"
                  value={formState.email}
                  onChange={handleChange('email')}
                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                  placeholder="admin@example.com"
                  required
                />
              </label>

              <label className="block">
                <span className="text-sm font-medium text-slate-700">كلمة المرور</span>
                <input
                  type="password"
                  value={formState.password}
                  onChange={handleChange('password')}
                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
                  placeholder="••••••••"
                  required
                />
              </label>

              <button type="submit" className="inline-flex items-center justify-center rounded-2xl bg-amber-600 px-6 py-3 text-white font-semibold shadow-lg shadow-amber-100 transition hover:bg-amber-700">
                حفظ المدير الجديد
              </button>
            </form>
            {saved && (
              <div className="mt-6 rounded-3xl bg-emerald-50 border border-emerald-200 p-4 text-emerald-700">
                تم حفظ بيانات المدير بنجاح
              </div>
            )}
          </section>
        </div>
      </div>
    </main>
  );
}