SweetHome/app/terms/page.js

'use client';

import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { FileText, Shield, CheckCircle, Languages, Loader2, AlertCircle } from 'lucide-react';
import { getARTerms, getENTerms } from '../utils/api';

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.08 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0 },
};

const FALLBACK_TERMS = {
  ar: [
    {
      title: 'مقدمة',
      description:
        'مرحباً بك في منصة SweetHome. باستخدامك للمنصة، فإنك توافق على الالتزام بشروط الاستخدام هذه. إذا كنت لا توافق على أي جزء من هذه الشروط، يرجى عدم استخدام المنصة.',
    },
    {
      title: 'استخدام المنصة',
      description:
        'يُسمح باستخدام المنصة للأغراض المشروعة فقط. يلتزم المستخدم بعدم استخدام المنصة في أي نشاط غير قانوني.',
    },
    {
      title: 'حقوق ومسؤوليات المالك',
      description:
        'يتحمل المالك مسؤولية دقة المعلومات المقدمة عن العقار بما في ذلك الصور والوصف والسعر والتوفر.',
    },
    {
      title: 'حقوق ومسؤوليات المستأجر',
      description:
        'يلتزم المستأجر باستخدام العقار بطريقة مسؤولة وعدم التسبب في أي ضرر للممتلكات.',
    },
    {
      title: 'الدفع والعمولات',
      description:
        'تتقاضى المنصة عمولة على كل حصة ناجحة وفقاً للنسبة المحددة في وقت الحجز.',
    },
    {
      title: 'خصوصية البيانات',
      description:
        'نحن نأخذ خصوصية بياناتك على محمل الجد. يتم جمع واستخدام البيانات الشخصية وفقاً لسياسة الخصوصية الخاصة بنا.',
    },
  ],
  en: [
    {
      title: 'Introduction',
      description:
        'Welcome to SweetHome. By using our platform, you agree to comply with these terms. If you do not agree, please do not use the platform.',
    },
    {
      title: 'Platform Usage',
      description:
        'The platform may only be used for lawful purposes. Users must not engage in any illegal activity.',
    },
    {
      title: 'Owner Rights & Responsibilities',
      description:
        'Owners are responsible for the accuracy of property information including images, description, price, and availability.',
    },
    {
      title: 'Tenant Rights & Responsibilities',
      description:
        'Tenants must use the property responsibly and not cause any damage to the property.',
    },
    {
      title: 'Payment & Commissions',
      description:
        'The platform charges a commission on each successful booking according to the rate specified at the time of booking.',
    },
    {
      title: 'Data Privacy',
      description:
        'We take your data privacy seriously. Personal data is collected and used in accordance with our Privacy Policy.',
    },
  ],
};

export default function TermsPage() {
  const [terms, setTerms] = useState([]);
  const [language, setLanguage] = useState('ar');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const controller = new AbortController();

    const fetchTerms = async () => {
      try {
        setLoading(true);
        setError('');

        const fetcher = language === 'ar' ? getARTerms : getENTerms;
        const data = await fetcher();

        if (!data) {
          setTerms(FALLBACK_TERMS[language]);
          return;
        }

        const raw = Array.isArray(data) ? data : data.terms || data.items || data.data || [];

        if (!Array.isArray(raw) || raw.length === 0) {
          setTerms(FALLBACK_TERMS[language]);
          return;
        }

        const mapped = raw.map((item) => ({
          title: item.title || item.name || '',
          description: item.description || item.content || item.body || item.text || '',
        }));

        setTerms(mapped);
      } catch {
        setTerms(FALLBACK_TERMS[language]);
        setError('');
      } finally {
        setLoading(false);
      }
    };

    fetchTerms();

    return () => controller.abort();
  }, [language]);

  return (
    <div
      dir={language === 'ar' ? 'rtl' : 'ltr'}
      className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white py-12"
    >
      <div className="container mx-auto px-4 max-w-4xl">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-12"
        >
          <div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-amber-100">
            <FileText className="w-10 h-10 text-amber-600" />
          </div>

          <div className="flex items-center justify-center gap-4 mb-4">
            <h1 className="text-4xl font-bold text-gray-900">
              {language === 'ar' ? 'شروط الاستخدام' : 'Terms of Use'}
            </h1>
            <button
              type="button"
              onClick={() => setLanguage(language === 'ar' ? 'en' : 'ar')}
              className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm transition hover:shadow-md"
            >
              <Languages className="h-4 w-4" />
              {language === 'ar' ? 'English' : 'العربية'}
            </button>
          </div>

          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            {language === 'ar'
              ? 'يرجى قراءة شروط الاستخدام التالية بعناية قبل استخدام المنصة'
              : 'Please read the following terms of use carefully before using the platform'}
          </p>
        </motion.div>

        {loading && (
          <div className="flex items-center justify-center gap-3 mb-8 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4 text-amber-800">
            <Loader2 className="h-5 w-5 animate-spin" />
            <span>
              {language === 'ar'
                ? 'جاري تحميل شروط الاستخدام...'
                : 'Loading terms of use...'}
            </span>
          </div>
        )}

        {error && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-8 rounded-2xl border border-red-200 bg-red-50 p-4 flex items-center gap-3 text-red-700"
          >
            <AlertCircle className="h-5 w-5 shrink-0" />
            <span>{error}</span>
          </motion.div>
        )}

        {!loading && terms.length === 0 && !error && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="text-center py-16 text-gray-500"
          >
            <FileText className="h-16 w-16 mx-auto mb-4 text-gray-300" />
            <p className="text-xl font-medium">
              {language === 'ar'
                ? 'لا توجد شروط استخدام متاحة حالياً'
                : 'No terms of use available'}
            </p>
          </motion.div>
        )}

        {terms.length > 0 && (
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            className="space-y-6"
          >
            {terms.map((term, index) => (
              <motion.div
                key={index}
                variants={itemVariants}
                className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
              >
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center shrink-0 mt-1">
                    <Shield className="w-5 h-5 text-amber-600" />
                  </div>
                  <div className="min-w-0 flex-1">
                    {term.title && (
                      <h2 className="text-xl font-bold text-gray-900 mb-3">{term.title}</h2>
                    )}
                    <p className="text-gray-600 leading-relaxed whitespace-pre-wrap">
                      {term.description}
                    </p>
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>
        )}

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.6 }}
          className="mt-8 bg-amber-50 rounded-2xl border border-amber-200 p-6 flex items-start gap-4"
        >
          <CheckCircle className="w-6 h-6 text-amber-600 shrink-0 mt-0.5" />
          <div>
            <p className="font-bold text-amber-800 mb-1">
              {language === 'ar' ? 'آخر تحديث' : 'Last Updated'}
            </p>
            <p className="text-amber-700">
              {language === 'ar'
                ? 'تم آخر تحديث لشروط الاستخدام في 1 مايو 2026. يرجى مراجعة هذه الصفحة بشكل دوري للاطلاع على أي تغييرات.'
                : 'Last updated on May 1, 2026. Please review this page periodically for any changes.'}
            </p>
          </div>
        </motion.div>
      </div>
    </div>
  );
}