"use client";

import { useState, useEffect } from "react";
import { BentoGrid, BentoGridItem } from "./ui/BentoGrid";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, MapPin, User, BookOpen, ExternalLink } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import type { JSONContent } from "@tiptap/react";
import RichTextClient from "./RichTextClient";
import CurrentlyReading from "./CurrentlyReading";
import ReadBooks from "./ReadBooks";
import { motion } from "framer-motion";
import { TechStackCategory, Hobby } from "@/lib/directus";
import Image from "next/image";

const iconMap: Record<string, any> = {
  Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2
};

const About = () => {
  const locale = useLocale();
  const t = useTranslations("home.about");
  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
  const [techStack, setTechStack] = useState<TechStackCategory[]>([]);
  const [hobbies, setHobbies] = useState<Hobby[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [cmsRes, techRes, hobbiesRes] = await Promise.all([
          fetch(`/api/content/page?key=home-about&locale=${locale}`),
          fetch(`/api/tech-stack?locale=${locale}`),
          fetch(`/api/hobbies?locale=${locale}`)
        ]);
        const cmsData = await cmsRes.json();
        if (cmsData?.content?.content) setCmsDoc(cmsData.content.content as JSONContent);
        const techData = await techRes.json();
        if (techData?.techStack) setTechStack(techData.techStack);
        const hobbiesData = await hobbiesRes.json();
        if (hobbiesData?.hobbies) setHobbies(hobbiesData.hobbies);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [locale]);

  return (
    <section id="about" className="py-24 px-4 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 md:grid-rows-2">
          
          {/* 1. Main Bio & Photo - The big anchor */}
          <div className="md:col-span-3 md:row-span-1 bg-white dark:bg-stone-900 rounded-[2.5rem] p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col md:flex-row gap-8 items-center">
            <div className="relative w-48 h-48 md:w-64 md:h-64 shrink-0">
              <div className="absolute inset-0 bg-liquid-mint rounded-3xl rotate-3 scale-95 opacity-20 animate-pulse"></div>
              <div className="relative w-full h-full rounded-3xl overflow-hidden border-4 border-white dark:border-stone-800 shadow-xl">
                <Image 
                  src="/images/me.jpg" 
                  alt="Dennis Konkol" 
                  fill 
                  className="object-cover"
                  priority
                />
              </div>
            </div>
            <div className="flex-1 space-y-4">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-liquid-mint/10 text-liquid-mint text-[10px] font-black uppercase tracking-widest">
                <User size={12} /> Who am I
              </div>
              <h2 className="text-3xl md:text-5xl font-black text-stone-900 dark:text-stone-50 tracking-tighter">
                Hi, I&apos;m <span className="text-liquid-mint">Dennis</span>.
              </h2>
              <div className="prose prose-stone dark:prose-invert max-w-none text-stone-600 dark:text-stone-400 text-base leading-relaxed line-clamp-4 md:line-clamp-none">
                {cmsDoc ? <RichTextClient doc={cmsDoc} /> : <p>{t("p1")} {t("p2")}</p>}
              </div>
            </div>
          </div>

          {/* 2. Status & Location */}
          <div className="md:col-span-1 md:row-span-1 bg-liquid-sky/5 dark:bg-stone-900 rounded-[2.5rem] p-8 border border-liquid-sky/20 dark:border-stone-800/60 flex flex-col justify-between group">
            <div className="w-12 h-12 rounded-2xl bg-white dark:bg-stone-800 flex items-center justify-center shadow-sm mb-4">
              <MapPin className="text-liquid-sky" size={24} />
            </div>
            <div>
              <h3 className="font-black text-xl text-stone-900 dark:text-stone-50 mb-1">Osnabrück</h3>
              <p className="text-sm text-stone-500 dark:text-stone-400">Germany, UTC+1</p>
            </div>
            <div className="mt-6 flex items-center gap-2 bg-white/50 dark:bg-black/20 p-3 rounded-2xl border border-white dark:border-stone-800">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-ping" />
              <span className="text-xs font-bold uppercase tracking-widest opacity-70">Available Now</span>
            </div>
          </div>

          {/* 3. Tech Stack - Bento wide */}
          <div className="md:col-span-2 md:row-span-1 bg-white dark:bg-stone-900 rounded-[2.5rem] p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm overflow-hidden flex flex-col">
            <div className="flex items-center justify-between mb-6">
              <h3 className="font-black text-xl text-stone-900 dark:text-stone-50 flex items-center gap-2">
                <Code className="text-liquid-mint" size={20} /> {t("techStackTitle")}
              </h3>
            </div>
            <div className="flex flex-wrap gap-2 overflow-y-auto pr-2 scrollbar-hide">
              {techStack.length > 0 ? (
                techStack.flatMap(cat => cat.items?.map((item: any) => (
                  <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700 text-stone-700 dark:text-stone-300">
                    {item.name}
                  </span>
                )))
              ) : (
                <div className="h-20 w-full bg-stone-50 dark:bg-stone-800 animate-pulse rounded-xl" />
              )}
            </div>
          </div>

          {/* 4. Reading Log - Compact but visual */}
          <div className="md:col-span-1 md:row-span-1 bg-white dark:bg-stone-900 rounded-[2.5rem] p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col group overflow-hidden">
            <div className="flex items-center gap-2 mb-6">
              <BookOpen className="text-liquid-purple" size={20} />
              <h3 className="font-black text-xl text-stone-900 dark:text-stone-50 uppercase tracking-tighter">Reading</h3>
            </div>
            <div className="flex-1 overflow-y-auto scrollbar-hide space-y-4">
              <CurrentlyReading />
              <ReadBooks />
            </div>
          </div>

          {/* 5. Hobbies - Small box */}
          <div className="md:col-span-1 md:row-span-1 bg-liquid-rose/5 dark:bg-stone-900 rounded-[2.5rem] p-8 border border-liquid-rose/20 dark:border-stone-800/60 flex flex-col justify-between">
            <div className="flex flex-wrap gap-3">
              {hobbies.slice(0, 4).map((hobby) => {
                const Icon = iconMap[hobby.icon] || Lightbulb;
                return (
                  <div key={hobby.id} className="p-2 rounded-lg bg-white dark:bg-stone-800 shadow-sm">
                    <Icon size={18} className="text-liquid-rose" />
                  </div>
                )
              })}
            </div>
            <div className="mt-4">
              <h3 className="font-black text-lg text-stone-900 dark:text-stone-50 mb-1">{t("hobbiesTitle")}</h3>
              <p className="text-xs text-stone-500 line-clamp-2">Exploration & Fun</p>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

export default About;