'use client';

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

const initialPolicy = `1. نحترم خصوصيتك ونلتزم بحماية بياناتك الشخصية.
2. يتم استخدام المعلومات لتحسين تجربة المستخدم وتأمين الخدمة.
3. لا نشارك البيانات مع أطراف خارجية بدون موافقتك.
4. يمكنك طلب حذف بياناتك من النظام في أي وقت.`;

export default function PrivacyPolicyAdminPage() {
  const [isAdmin, setIsAdmin] = useState(false);
  const [checked, setChecked] = useState(false);
  const [policyText, setPolicyText] = useState(initialPolicy);
  const [saved, setSaved] = useState(false);

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

  const handleSave = (event) => {
    event.preventDefault();
    setSaved(true);
    console.log('Privacy policy updated:', policyText);
  };

  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">
          <p className="text-gray-600 mb-6">هذه الصفحة لتحرير سياسة الخصوصية ولا يمكن الوصول إليها إلا للمدير.</p>
          <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="mb-8 rounded-[28px] bg-white p-8 shadow-sm border border-slate-200">
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
              <p className="text-sm text-amber-600 uppercase tracking-[0.2em]">لوحة المدير</p>
              <p className="text-slate-500 mt-2">قم بتحديث نص سياسة الخصوصية</p>
            </div>
            <Link href="/admin/add-admin" className="inline-flex items-center justify-center rounded-2xl bg-slate-800 px-5 py-3 text-sm font-semibold text-white hover:bg-slate-900 transition-colors">
              إضافة أدمن جديد
            </Link>
          </div>
        </div>

        <form onSubmit={handleSave} className="space-y-6 rounded-[28px] bg-white p-8 shadow-sm border border-slate-200">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-3">نص سياسة الخصوصية</label>
            <textarea
              value={policyText}
              onChange={(e) => setPolicyText(e.target.value)}
              rows={12}
              className="w-full rounded-3xl border border-slate-200 bg-slate-50 px-5 py-4 text-slate-700 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
            />
          </div>
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <button type="submit" className="rounded-2xl bg-amber-600 px-6 py-3 text-white font-semibold shadow-lg shadow-amber-100 transition hover:bg-amber-700">
              حفظ السياسة
            </button>
          </div>
          {saved && (
            <div className="rounded-3xl bg-emerald-50 border border-emerald-200 p-4 text-emerald-700">
              تمت حفظ سياسة الخصوصية بنجاح
            </div>
          )}
        </form>
      </div>
    </main>
  );
}