import { useQuery } from '@tanstack/react-query';
import { gdprApi } from '../../services/api';
import Card from '../../components/ui/Card';
import { Shield } from 'lucide-react';
import DOMPurify from 'dompurify';

const SANITIZE_OPTIONS = {
  FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form', 'input', 'button'],
  FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'formaction'],
};

export default function PortalWebsitePrivacy() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['website-privacy-policy'],
    queryFn: () => gdprApi.getWebsitePrivacyPolicy(),
    retry: 1,
  });

  if (isLoading) return <div className="text-center py-8 text-gray-500">Laden...</div>;
  if (isError) return <div className="text-center py-8 text-red-500">Datenschutzerklärung konnte nicht geladen werden. Bitte Server neu starten.</div>;

  const html = data?.data?.html || '<p class="text-gray-500">Noch keine Datenschutzerklärung hinterlegt.</p>';

  return (
    <div>
      <div className="flex items-center gap-3 mb-6">
        <Shield className="w-6 h-6 text-blue-600" />
        <h1 className="text-2xl font-bold">Datenschutzerklärung</h1>
      </div>
      <Card>
        <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html, SANITIZE_OPTIONS) }} />
      </Card>
    </div>
  );
}
