'use client';

import React, { useEffect, useState } from 'react';
import { apiRequest } from '@/lib/api';
import { ShieldCheck } from 'lucide-react';

const renderMarkdown = (text: string) => {
  return text.split('\n').map((line, i) => {
    if (line.startsWith('# ')) return <h1 key={i} className="text-3xl font-bold mt-8 mb-4 text-gray-900">{line.replace('# ', '')}</h1>;
    if (line.startsWith('## ')) return <h2 key={i} className="text-2xl sm:text-3xl font-bold mt-6 mb-4 text-gray-900 tracking-tight">{line.replace('## ', '')}</h2>;
    if (line.startsWith('### ')) return <h3 key={i} className="text-xl font-bold mt-4 mb-2 text-gray-900">{line.replace('### ', '')}</h3>;
    if (line.startsWith('- ')) return <li key={i} className="ml-6 list-disc mb-2 text-sm sm:text-base text-gray-700">{line.replace('- ', '')}</li>;
    if (line.trim() === '') return <div key={i} className="h-4" />;
    
    const parts = line.split(/(\*\*.*?\*\*)/g);
    return (
      <p key={i} className="text-sm sm:text-base leading-relaxed text-gray-800">
        {parts.map((part, j) => 
          part.startsWith('**') && part.endsWith('**') 
            ? <strong key={j} className="font-bold text-gray-900">{part.slice(2, -2)}</strong> 
            : part
        )}
      </p>
    );
  });
};

const isHtml = (text: string) => /<\/?[a-z][\s\S]*>/i.test(text);

export default function PrivacyPolicyPage() {
  const [content, setContent] = useState<string>('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const res = await apiRequest('/settings');
        if (res.success && res.settings?.legalPages?.privacyPolicy) {
          setContent(res.settings.legalPages.privacyPolicy);
        } else {
          setContent('Privacy Policy is currently being updated.');
        }
      } catch (err) {
        setContent('Failed to load privacy policy.');
      } finally {
        setLoading(false);
      }
    };
    fetchSettings();
  }, []);

  return (
    <div className="w-full min-h-screen bg-slate-50 pb-16 pt-[80px]">
      {/* Banner Section */}
      <div className="relative w-full h-64 sm:h-80 flex flex-col items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="/chalkboard-bg.webp" 
            alt="Chalkboard" 
            className="w-full h-full object-cover"
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = 'none';
            }}
          />
        </div>
        
        <div className="relative z-10 flex flex-col items-center mb-16 px-4">
          <h1 className="font-bold text-4xl sm:text-5xl md:text-6xl text-[#FECE00] tracking-wide text-center drop-shadow-md">
            Privacy Policy
          </h1>
          <p className="text-white/90 mt-4 text-sm sm:text-base md:text-lg max-w-2xl text-center font-medium drop-shadow-sm">
            How we securely handle, process, and protect your personal data.
          </p>
        </div>
      </div>

      {/* Content Section (Overlapping Card) */}
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20 -mt-24 pb-24">
        <div className="bg-white rounded-3xl shadow-xl shadow-gray-200/60 border border-gray-100 p-8 sm:p-12 md:p-16 relative overflow-hidden">
          {/* Decorative Top Accent */}
          <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-[#FECE00] via-[#FDE047] to-[#FECE00]"></div>
          
          {/* Decorative Background Icon */}
          <div className="absolute top-12 right-12 text-gray-100 pointer-events-none">
            <ShieldCheck className="w-32 h-32 transform rotate-12 opacity-50" strokeWidth={1} />
          </div>
          
          <div className="relative z-10">
        {loading ? (
          <div className="flex justify-center items-center py-32">
            <div className="animate-spin rounded-full h-12 w-12 border-b-4 border-[#FECE00]"></div>
          </div>
        ) : isHtml(content) ? (
          <div className="ck-content-display" dangerouslySetInnerHTML={{ __html: content }} />
        ) : (
          <div className="space-y-2">
            {renderMarkdown(content)}
          </div>
        )}
          </div>
        </div>
      </div>
    </div>
  );
}