"use client";

import { motion, Variants } from "framer-motion";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import type { JSONContent } from "@tiptap/react";
import RichTextClient from "./RichTextClient";
import CurrentlyReading from "./CurrentlyReading";

// Type definitions for CMS data
interface TechStackItem {
  id: string;
  name: string | number | null | undefined;
  url?: string;
  icon_url?: string;
  sort: number;
}

interface TechStackCategory {
  id: string;
  key: string;
  icon: string;
  sort: number;
  name: string;
  items: TechStackItem[];
}

interface Hobby {
  id: string;
  key: string;
  icon: string;
  title: string | number | null | undefined;
  description?: string;
}

const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.2,
    },
  },
};

const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
};

const About = () => {
  const locale = useLocale();
  const t = useTranslations("home.about");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [techStackFromCMS, setTechStackFromCMS] = useState<TechStackCategory[] | null>(null);
  const [hobbiesFromCMS, setHobbiesFromCMS] = useState<Hobby[] | null>(null);

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(
          `/api/content/page?key=${encodeURIComponent("home-about")}&locale=${encodeURIComponent(locale)}`,
        );
        const data = await res.json();
        // Only use CMS content if it exists for the active locale.
        if (data?.content?.content && data?.content?.locale === locale) {
          setCmsDoc(data.content.content as JSONContent);
        } else {
          setCmsDoc(null);
        }
      } catch {
        // ignore; fallback to static
        setCmsDoc(null);
      }
    })();
  }, [locale]);

  // Load Tech Stack from Directus
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(`/api/tech-stack?locale=${encodeURIComponent(locale)}`);
        if (res.ok) {
          const data = await res.json();
          if (data?.techStack && data.techStack.length > 0) {
            setTechStackFromCMS(data.techStack);
          }
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
          console.log('Tech Stack from Directus not available, using fallback');
        }
      }
    })();
  }, [locale]);

  // Load Hobbies from Directus
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(`/api/hobbies?locale=${encodeURIComponent(locale)}`);
        if (res.ok) {
          const data = await res.json();
          if (data?.hobbies && data.hobbies.length > 0) {
            setHobbiesFromCMS(data.hobbies);
          }
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
          console.log('Hobbies from Directus not available, using fallback');
        }
      }
    })();
  }, [locale]);

  // Fallback Tech Stack (from messages/en.json, messages/de.json)
  const techStackFallback = [
    {
      key: 'frontend',
      category: t("techStack.categories.frontendMobile"),
      icon: Globe,
      items: ["Next.js", "Tailwind CSS", "Flutter"],
    },
    {
      key: 'backend',
      category: t("techStack.categories.backendDevops"),
      icon: Server,
      items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
    },
    {
      key: 'tools',
      category: t("techStack.categories.toolsAutomation"),
      icon: Wrench,
      items: ["Git", "CI/CD", "n8n", t("techStack.items.selfHostedServices")],
    },
    {
      key: 'security',
      category: t("techStack.categories.securityAdmin"),
      icon: Shield,
      items: ["CrowdSec", "Suricata", "Mailcow"],
    },
  ];

  // Map icon names from Directus to Lucide components
  const iconMap: Record<string, any> = {
    Globe,
    Server,
    Code,
    Wrench,
    Shield,
    Activity,
    Lightbulb,
    Gamepad2
  };

  // Fallback Hobbies
  const hobbiesFallback: Array<{ icon: typeof Code; text: string }> = [
    { icon: Code, text: t("hobbies.selfHosting") },
    { icon: Gamepad2, text: t("hobbies.gaming") },
    { icon: Server, text: t("hobbies.gameServers") },
    { icon: Activity, text: t("hobbies.jogging") },
  ];

  // Use CMS Hobbies if available, otherwise fallback
  const hobbies = hobbiesFromCMS 
    ? hobbiesFromCMS
        .map((hobby: Hobby) => {
          // Convert to string, handling NaN/null/undefined
          const text = hobby.title == null || (typeof hobby.title === 'number' && isNaN(hobby.title))
            ? ''
            : String(hobby.title);
          return {
            icon: iconMap[hobby.icon] || Code,
            text
          };
        })
        .filter(h => {
          const isValid = h.text.trim().length > 0;
          if (!isValid && process.env.NODE_ENV === 'development') {
            console.log('[About] Filtered out invalid hobby:', h);
          }
          return isValid;
        })
    : hobbiesFallback;

  // Use CMS Tech Stack if available, otherwise fallback
  const techStack = techStackFromCMS 
    ? techStackFromCMS.map((cat: TechStackCategory) => {
        const items = cat.items
          .map((item: TechStackItem) => {
            // Convert to string, handling NaN/null/undefined
            if (item.name == null || (typeof item.name === 'number' && isNaN(item.name))) {
              if (process.env.NODE_ENV === 'development') {
                console.log('[About] Invalid item.name in category', cat.key, ':', item);
              }
              return '';
            }
            return String(item.name);
          })
          .filter(name => {
            const isValid = name.trim().length > 0;
            if (!isValid && process.env.NODE_ENV === 'development') {
              console.log('[About] Filtered out empty item name in category', cat.key);
            }
            return isValid;
          });

        if (items.length === 0 && process.env.NODE_ENV === 'development') {
          console.warn('[About] Category has no valid items after filtering:', cat.key);
        }

        return {
          key: cat.key,
          category: cat.name,
          icon: iconMap[cat.icon] || Code,
          items
        };
      })
    : techStackFallback;

  return (
    <section
      id="about"
      className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
    >
      <div className="max-w-6xl mx-auto relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
          {/* Text Content */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={staggerContainer}
            className="space-y-8"
          >
            <motion.h2
              variants={fadeInUp}
              className="text-4xl md:text-5xl font-bold text-stone-900"
            >
              {t("title")}
            </motion.h2>
            <motion.div
              variants={fadeInUp}
              className="prose prose-stone prose-lg text-stone-700 space-y-4"
            >
              {cmsDoc ? (
                <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
              ) : (
                <>
                  <p>{t("p1")}</p>
                  <p>{t("p2")}</p>
                  <p>{t("p3")}</p>
                </>
              )}
              <motion.div
                variants={fadeInUp}
                className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
              >
                <div className="flex items-start gap-3">
                  <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="text-sm font-semibold text-stone-800 mb-1">
                      {t("funFactTitle")}
                    </p>
                    <p className="text-sm text-stone-700 leading-relaxed">
                      {t("funFactBody")}
                    </p>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          </motion.div>

          {/* Tech Stack & Hobbies */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={staggerContainer}
            className="space-y-8"
          >
            <div>
              <motion.h3
                variants={fadeInUp}
                className="text-2xl font-bold text-stone-900 mb-6"
              >
                {t("techStackTitle")}
              </motion.h3>
              <div className="grid grid-cols-1 gap-4">
                {techStack.map((stack, idx) => (
                  <motion.div
                    key={`${stack.category}-${idx}`}
                    variants={fadeInUp}
                    whileHover={{
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                      idx === 0
                        ? "bg-gradient-to-br from-liquid-sky/25 to-liquid-mint/25 border-liquid-sky/50 hover:border-liquid-sky/70 hover:from-liquid-sky/35 hover:to-liquid-mint/35"
                        : idx === 1
                          ? "bg-gradient-to-br from-liquid-peach/25 to-liquid-coral/25 border-liquid-peach/50 hover:border-liquid-peach/70 hover:from-liquid-peach/35 hover:to-liquid-coral/35"
                          : idx === 2
                            ? "bg-gradient-to-br from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
                            : "bg-gradient-to-br from-liquid-teal/25 to-liquid-lime/25 border-liquid-teal/50 hover:border-liquid-teal/70 hover:from-liquid-teal/35 hover:to-liquid-lime/35"
                    }`}
                  >
                    <div className="flex items-center gap-3 mb-3">
                      <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
                        <stack.icon size={18} />
                      </div>
                      <h4 className="font-semibold text-stone-800">
                        {stack.category}
                      </h4>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {stack.items.map((item, itemIdx) => (
                        <span
                          key={`${stack.category}-${item}-${itemIdx}`}
                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-800 font-semibold transition-all duration-400 ease-out backdrop-blur-sm ${
                            itemIdx % 4 === 0
                              ? "bg-liquid-mint/25 border-liquid-mint/50 hover:bg-liquid-mint/35 hover:border-liquid-mint/70"
                              : itemIdx % 4 === 1
                                ? "bg-liquid-lavender/25 border-liquid-lavender/50 hover:bg-liquid-lavender/35 hover:border-liquid-lavender/70"
                                : itemIdx % 4 === 2
                                  ? "bg-liquid-rose/25 border-liquid-rose/50 hover:bg-liquid-rose/35 hover:border-liquid-rose/70"
                                  : "bg-liquid-sky/25 border-liquid-sky/50 hover:bg-liquid-sky/35 hover:border-liquid-sky/70"
                          }`}
                        >
                          {String(item)}
                        </span>
                      ))}
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Hobbies */}
            <div>
              <motion.h3
                variants={fadeInUp}
                className="text-xl font-bold text-stone-900 mb-4"
              >
                {t("hobbiesTitle")}
              </motion.h3>
              <div className="space-y-3">
                {hobbies.map((hobby, idx) => (
                  <motion.div
                    key={`hobby-${hobby.text}-${idx}`}
                    variants={fadeInUp}
                    whileHover={{
                      x: 8,
                      scale: 1.02,
                      transition: { duration: 0.4, ease: "easeOut" },
                    }}
                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                      idx === 0
                        ? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70 hover:from-liquid-mint/35 hover:to-liquid-sky/35"
                        : idx === 1
                          ? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70 hover:from-liquid-coral/35 hover:to-liquid-peach/35"
                          : idx === 2
                            ? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
                            : "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70 hover:from-liquid-lime/35 hover:to-liquid-teal/35"
                    }`}
                  >
                    <hobby.icon size={20} className="text-stone-700" />
                    <span className="text-stone-800 font-semibold">
                      {String(hobby.text)}
                    </span>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Currently Reading */}
            <motion.div
              variants={fadeInUp}
              className="mt-8"
            >
              <CurrentlyReading />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default About;