import { useState, useCallback } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import TiptapLink from '@tiptap/extension-link';
import { gdprApi } from '../../services/api';
import Button from '../../components/ui/Button';
import Card from '../../components/ui/Card';
import { ArrowLeft, Save, Eye, Bold, Italic, List, ListOrdered, Heading1, Heading2, Heading3, Link as LinkIcon, Undo, Redo, Type } from 'lucide-react';
import { Link as RouterLink } from 'react-router-dom';

const DEFAULT_POLICY = `<h1>Datenschutzerklärung</h1>

<h2>1. Datenschutz auf einen Blick</h2>

<h3>Allgemeine Hinweise</h3>
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie dieses Kundenportal nutzen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.</p>

<h3>Datenerfassung in diesem Portal</h3>
<p><strong>Wer ist verantwortlich für die Datenerfassung?</strong><br>
Die Datenverarbeitung erfolgt durch den Betreiber des Portals. Dessen Kontaktdaten können Sie dem Impressum entnehmen.</p>

<p><strong>Wie erfassen wir Ihre Daten?</strong><br>
Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.B. um Daten handeln, die Sie in ein Kontaktformular eingeben. Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch des Portals durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z.B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).</p>

<p><strong>Wofür nutzen wir Ihre Daten?</strong><br>
Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung des Portals zu gewährleisten. Andere Daten können zur Analyse Ihres Nutzerverhaltens verwendet werden. Hauptsächlich dienen Ihre Daten der Vertragsverwaltung und Kundenbetreuung.</p>

<h2>2. Verantwortliche Stelle</h2>

<p>Die verantwortliche Stelle für die Datenverarbeitung ist:</p>

<p>Hacker-Net Telekommunikation<br>
Stefan Hacker<br>
Am Wunderburgpark 5b<br>
26135 Oldenburg<br>
E-Mail: info@hacker-net.de</p>

<p>Verantwortliche Stelle ist die natürliche oder juristische Person, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten entscheidet.</p>

<h2>3. Datenerfassung im Portal</h2>

<h3>Cookies</h3>
<p>Dieses Portal verwendet Cookies ausschließlich für die Authentifizierung (Login) und Sitzungsverwaltung. Es werden keine Tracking- oder Marketing-Cookies eingesetzt.</p>

<h3>Server-Log-Dateien</h3>
<p>Der Provider des Portals erhebt und speichert automatisch Informationen in sogenannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:</p>
<ul>
  <li>Browsertyp und Browserversion</li>
  <li>Verwendetes Betriebssystem</li>
  <li>Referrer URL</li>
  <li>Hostname des zugreifenden Rechners</li>
  <li>Uhrzeit der Serveranfrage</li>
  <li>IP-Adresse</li>
</ul>
<p>Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen. Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.</p>

<h3>Registrierung und Anmeldung</h3>
<p>Sie können sich in diesem Portal mit den Ihnen mitgeteilten Zugangsdaten anmelden. Die bei der Anmeldung abgefragten Daten werden für die Bereitstellung des Portals und die Vertragsverwaltung verwendet. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO (Vertragserfüllung).</p>

<h2>4. Ihre Rechte</h2>

<p>Sie haben jederzeit das Recht:</p>
<ul>
  <li><strong>Auskunft</strong> über Ihre bei uns gespeicherten personenbezogenen Daten zu erhalten (Art. 15 DSGVO)</li>
  <li><strong>Berichtigung</strong> unrichtiger Daten zu verlangen (Art. 16 DSGVO)</li>
  <li><strong>Löschung</strong> Ihrer Daten zu verlangen (Art. 17 DSGVO)</li>
  <li><strong>Einschränkung</strong> der Verarbeitung zu verlangen (Art. 18 DSGVO)</li>
  <li><strong>Datenübertragbarkeit</strong> zu verlangen (Art. 20 DSGVO)</li>
  <li>Eine erteilte <strong>Einwilligung zu widerrufen</strong> (Art. 7 Abs. 3 DSGVO)</li>
  <li>Sich bei einer <strong>Aufsichtsbehörde zu beschweren</strong> (Art. 77 DSGVO)</li>
</ul>

<p>Zuständige Aufsichtsbehörde:<br>
Die Landesbeauftragte für den Datenschutz Niedersachsen<br>
Prinzenstraße 5, 30159 Hannover<br>
<a href="https://www.lfd.niedersachsen.de" target="_blank">www.lfd.niedersachsen.de</a></p>

<h2>5. Datensicherheit</h2>

<p>Dieses Portal nutzt aus Sicherheitsgründen und zum Schutz der Übertragung vertraulicher Inhalte eine SSL-/TLS-Verschlüsselung. Eine verschlüsselte Verbindung erkennen Sie daran, dass die Adresszeile des Browsers von "http://" auf "https://" wechselt und an dem Schloss-Symbol in Ihrer Browserzeile.</p>

<p style="color: #9ca3af; font-size: 12px; margin-top: 32px;">Stand: März 2026</p>`;

function MenuBar({ editor }: { editor: ReturnType<typeof useEditor> }) {
  if (!editor) return null;
  const setLink = useCallback(() => {
    const previousUrl = editor.getAttributes('link').href;
    const url = window.prompt('URL eingeben:', previousUrl);
    if (url === null) return;
    if (url === '') { editor.chain().focus().extendMarkRange('link').unsetLink().run(); return; }
    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
  }, [editor]);
  const btnClass = (active: boolean) => `p-1.5 rounded hover:bg-gray-200 transition-colors ${active ? 'bg-gray-200 text-blue-600' : 'text-gray-600'}`;
  return (
    <div className="flex flex-wrap items-center gap-1 p-2 border-b bg-gray-50">
      <button type="button" onClick={() => editor.chain().focus().toggleBold().run()} className={btnClass(editor.isActive('bold'))} title="Fett"><Bold className="w-4 h-4" /></button>
      <button type="button" onClick={() => editor.chain().focus().toggleItalic().run()} className={btnClass(editor.isActive('italic'))} title="Kursiv"><Italic className="w-4 h-4" /></button>
      <div className="w-px h-5 bg-gray-300 mx-1" />
      <button type="button" onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={btnClass(editor.isActive('heading', { level: 1 }))} title="Überschrift 1"><Heading1 className="w-4 h-4" /></button>
      <button type="button" onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={btnClass(editor.isActive('heading', { level: 2 }))} title="Überschrift 2"><Heading2 className="w-4 h-4" /></button>
      <button type="button" onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={btnClass(editor.isActive('heading', { level: 3 }))} title="Überschrift 3"><Heading3 className="w-4 h-4" /></button>
      <button type="button" onClick={() => editor.chain().focus().setParagraph().run()} className={btnClass(editor.isActive('paragraph'))} title="Absatz"><Type className="w-4 h-4" /></button>
      <div className="w-px h-5 bg-gray-300 mx-1" />
      <button type="button" onClick={() => editor.chain().focus().toggleBulletList().run()} className={btnClass(editor.isActive('bulletList'))} title="Aufzählung"><List className="w-4 h-4" /></button>
      <button type="button" onClick={() => editor.chain().focus().toggleOrderedList().run()} className={btnClass(editor.isActive('orderedList'))} title="Nummerierung"><ListOrdered className="w-4 h-4" /></button>
      <div className="w-px h-5 bg-gray-300 mx-1" />
      <button type="button" onClick={setLink} className={btnClass(editor.isActive('link'))} title="Link"><LinkIcon className="w-4 h-4" /></button>
      <div className="w-px h-5 bg-gray-300 mx-1" />
      <button type="button" onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()} className="p-1.5 rounded hover:bg-gray-200 text-gray-600 disabled:opacity-30" title="Rückgängig"><Undo className="w-4 h-4" /></button>
      <button type="button" onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()} className="p-1.5 rounded hover:bg-gray-200 text-gray-600 disabled:opacity-30" title="Wiederherstellen"><Redo className="w-4 h-4" /></button>
    </div>
  );
}

export default function WebsitePrivacyPolicyEditor() {
  const queryClient = useQueryClient();
  const [showPreview, setShowPreview] = useState(false);
  const [saved, setSaved] = useState(false);

  const { data, isLoading } = useQuery({
    queryKey: ['website-privacy-policy'],
    queryFn: () => gdprApi.getWebsitePrivacyPolicy(),
  });

  const saveMutation = useMutation({
    mutationFn: (html: string) => gdprApi.updateWebsitePrivacyPolicy(html),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['website-privacy-policy'] }); setSaved(true); setTimeout(() => setSaved(false), 2000); },
  });

  const initialContent = data?.data?.html || DEFAULT_POLICY;
  const editor = useEditor({
    extensions: [StarterKit, TiptapLink.configure({ openOnClick: false, HTMLAttributes: { target: '_blank', rel: 'noopener noreferrer' } })],
    content: initialContent,
    editorProps: { attributes: { class: 'prose prose-sm max-w-none p-4 min-h-[400px] focus:outline-none' } },
  }, [initialContent]);

  const handleSave = () => { if (editor) saveMutation.mutate(editor.getHTML()); };
  const handleReset = () => { if (confirm('Auf Standardtext zurücksetzen?')) editor?.commands.setContent(DEFAULT_POLICY); };

  if (isLoading) return <div className="text-center py-8 text-gray-500">Laden...</div>;

  return (
    <div>
      <div className="flex items-center gap-4 mb-6">
        <RouterLink to="/settings"><Button variant="ghost" size="sm"><ArrowLeft className="w-4 h-4" /></Button></RouterLink>
        <h1 className="text-2xl font-bold flex-1">Website-Datenschutzerklärung bearbeiten</h1>
        <Button variant="ghost" size="sm" onClick={handleReset}>Standardtext laden</Button>
        <Button variant="secondary" onClick={() => setShowPreview(!showPreview)}><Eye className="w-4 h-4 mr-2" />{showPreview ? 'Editor' : 'Vorschau'}</Button>
        <Button onClick={handleSave} disabled={saveMutation.isPending}><Save className="w-4 h-4 mr-2" />{saved ? 'Gespeichert!' : saveMutation.isPending ? 'Speichern...' : 'Speichern'}</Button>
      </div>
      {showPreview ? (
        <Card><div className="prose prose-sm max-w-none p-4" dangerouslySetInnerHTML={{ __html: editor?.getHTML() || '' }} /></Card>
      ) : (
        <div className="border rounded-lg bg-white overflow-hidden">
          <MenuBar editor={editor} />
          <EditorContent editor={editor} />
        </div>
      )}
      {saveMutation.isError && <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">Fehler beim Speichern.</div>}
    </div>
  );
}