import React, { useMemo } from "react";
import { Security, Shield, VerifiedUser } from "@mui/icons-material";
import { useSearchParams } from "react-router-dom";
import { motion } from "framer-motion";
import { useTermsAndPolicies } from "../hooks/useTermsAndPolicies";
import { Skeleton, SkeletonText } from "../components/common/Skeleton";

export default function PoliciesPage() {
  const [searchParams] = useSearchParams();
  const type = searchParams.get("type") || "privacy";
  const { data, isLoading, isError } = useTermsAndPolicies(type);

  const content = useMemo(() => {
    return data?.data?.message || "";
  }, [data]);

  const title = useMemo(() => {
    return data?.data?.name || "Privacy Policy";
  }, [data]);

  return (
    <div className="min-h-screen relative z-20">
      {/* Green Luxury Header */}
      <motion.header
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        className="my-8 rounded-[10px] relative bg-gradient-to-r from-[#034E08] via-[#034E08] to-[#034E08] text-white shadow-2xl relative overflow-hidden"
      >
        <div className="absolute inset-0 bg-black/10" />
        <div className="relative flex items-center justify-between px-6 py-8 safe-area-top">
          <div className="text-center flex-1">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.3 }}
              className="inline-block p-4 bg-white/20 rounded-2xl mb-3"
            >
              <Shield className="text-4xl text-[#A70710]" />
            </motion.div>
            <h1 className="text-3xl font-bold tracking-wider">{title}</h1>
            <p className="text-green-100 text-sm mt-1">
              Your Safety Is Our First Priority
            </p>
          </div>
          <div className="w-12" />
        </div>
      </motion.header>

      <main className="md:px-4 py-10 max-w-[1400px] mx-auto space-y-8">
        <motion.div
          whileHover={{ scale: 1.01 }}
          className="bg-white/90 backdrop-blur rounded-3xl p-8 shadow-xl border border-green-100 mx-auto max-w-[1100px] overflow-hidden"
        >
          <div>
            {/* <div className="p-4 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl shadow-lg">
              <Security className="text-white text-3xl" />
            </div> */}
            <div>
              {/* <h3 className="text-xl font-bold text-green-900 mb-3">{title}</h3> */}
              {isLoading && (
                <div className="space-y-4">
                  <Skeleton height={22} width="45%" />
                  <SkeletonText lines={6} height={14} />
                  <SkeletonText lines={4} height={14} />
                </div>
              )}
              {isError && (
                <p className="text-red-600 text-lg leading-8 font-light tracking-wide">
                  Failed to load policy.
                </p>
              )}
              {!isLoading && !isError && (
                <div
                  className="text-gray-800 text-[16px] leading-7"
                  dangerouslySetInnerHTML={{ __html: content }}
                />
              )}
            </div>
          </div>
        </motion.div>

        <motion.div
          initial={{ scale: 0.9 }}
          animate={{ scale: 1 }}
          className="bg-[#f5fbff] text-black rounded-3xl p-10 text-center shadow-2xl"
        >
          <h2 className="text-2xl font-bold mb-3">Protected With Love & Care</h2>
          <p className="text-black text-lg">
            Every profile, every chat, every dream â€” safeguarded 24Ã—7.
          </p>
          <div className="flex justify-center gap-3 mt-6">
            <VerifiedUser className="text-4xl animate-ping text-[#A70710]" />
            <Shield className="text-5xl text-[#A70710]" />
            <VerifiedUser className="text-4xl animate-ping text-[#A70710]" />
          </div>
        </motion.div>
        <div className="h-32" />
      </main>
    </div>
  );
}
