"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  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>
  );
}