"use client";

import React from "react";
import { motion } from 'framer-motion';
import { ArrowLeft } from 'lucide-react';
import Header from "../components/Header";
import Footer from "../components/Footer";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import type { JSONContent } from "@tiptap/react";
import RichTextClient from "../components/RichTextClient";

export default function LegalNotice() {
  const locale = useLocale();
  const t = useTranslations("common");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [cmsTitle, setCmsTitle] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("legal-notice")}&locale=${encodeURIComponent(locale)}`,
        );
        const data = await res.json();
        if (data?.content?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
          setCmsTitle((data.content.title as string | null) ?? null);
        }
      } catch {}
    })();
  }, [locale]);

  return (
    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
      <Header />
      <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="mb-12"
        >
          <Link
            href={`/${locale}`}
            className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
          >
            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
            <span className="font-bold uppercase tracking-widest text-xs">{t("backToHome")}</span>
          </Link>
          
          <h1 className="text-6xl md:text-[8rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
            Legal<span className="text-liquid-mint">.</span>
          </h1>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
        >
          {cmsDoc ? (
            <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
              <RichTextClient doc={cmsDoc} />
            </div>
          ) : (
            <div className="space-y-12">
              <div className="text-stone-600 dark:text-stone-400 leading-relaxed">
                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Angaben gemäß § 5 TMG</h2>
                <div className="space-y-4 text-xl font-light">
                  <p>Dennis Konkol</p>
                  <p>Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
                  <p>E-Mail: <Link href="mailto:info@dk0.dev" className="text-stone-900 dark:text-stone-100 font-bold border-b-2 border-liquid-mint">info@dk0.dev</Link></p>
                </div>
              </div>

              <div className="text-stone-600 dark:text-stone-400">
                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Haftung für Inhalte</h2>
                <p className="text-xl font-light leading-relaxed">
                  Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.
                </p>
              </div>

              <div className="pt-8 border-t border-stone-100 dark:border-stone-800">
                <p className="text-stone-400 text-sm font-mono uppercase tracking-widest">Last updated: 12.02.2025</p>
              </div>
            </div>
          )}
        </motion.div>
      </main>
      <Footer />
    </div>
  );
}