import type { MetaFunction } from "@remix-run/node";
import { useEffect, useState } from "react";
import { json } from "@remix-run/node";
import { useLoaderData, Link } from "@remix-run/react";

export const meta: MetaFunction = () => {
  return [
    { title: "Paul W." },
    { name: "description", content: "This is my Profile!" },
    {
      name: "keywords",
      content: "Paul W, Paul W Portfolio, Paul W Profile, Paul W Remix",
    },
  ];
};


export default function Index() {
  const [status, setStatus] = useState("");
  const [border_status, setBorderStatus] = useState("border-gray-700");

  useEffect(() => {
    if (status === "online") {
      setBorderStatus("border-green-500");
    } else if (status === "offline") {
      setBorderStatus("border-gray-500");
    } else if (status === "dnd") {
      setBorderStatus("border-red-600");
    } else if (status === "idle") {
      setBorderStatus("border-yellow-500");
    } else {
      setBorderStatus("border-gray-700");
    }
  }, [status]);

  useEffect(() => {
    fetch(
      "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
    )
      .then((res) => res.json())
      .then((data) => {
        setStatus(data.status);
      })
      .catch((err) => {
        console.error(err);
        setStatus("offline");
      });
  }, []);

  return (
    <div className="relative flex min-h-screen flex-col items-center justify-center p-8 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <div className="h-full w-full bg-black">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "linear-gradient(#ffffff15 1px, transparent 1px), linear-gradient(90deg, #ffffff15 1px, transparent 1px)",
              backgroundSize: "20px 20px",
            }}
          />
        </div>
      </div>

      <div className="relative z-10 flex flex-col items-center gap-8 mt-12 max-w-6xl w-full">
        {/* Hero */}
        <div className="text-center space-y-6">
          <div className="space-y-2">
            <h1
              className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
              style={{ lineHeight: "normal" }}
            >
              Hey, I'm Paul!
            </h1>
            <h2 className="text-3xl md:text-4xl text-gray-400">
              also known as{" "}
              <span className="font-semibold text-gray-200">Space</span>
            </h2>
          </div>
          <div
            className={`w-48 h-48 mx-auto overflow-hidden rounded-full border-4 transition-colors duration-300 ${border_status}`}
          >
            <img
              src="https://cdn.reversed.dev/pictures/20250405_120402.png"
              alt="Paul W"
              className="object-cover rounded-full shadow-lg scale-125"
            />
          </div>
          <div>
            <p className="text-2xl text-gray-300">A Self-proclaimed Developer</p>
          </div>
        </div>

        {/* About Section */}
        <section className="w-full">
          <h2 className="text-3xl font-bold mb-8 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
            About Me
          </h2>
          <div
            className="p-8 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg
              flex flex-col md:flex-row gap-8 items-center"
          >
			<div className="flex-1 space-y-6">
			  <p className="text-gray-300 text-lg leading-relaxed">
				Hi! I'm <span className="underline font-bold">Paul</span>, a
				passionate developer from <span className="font-bold">Germany</span> 🇩🇪.
				<span className="block mt-4">
				  I specialize in JavaScript/TypeScript development, building fun backend systems, experimenting with frontend, and occasionally breaking TypeScript.
				</span>
				<span className="block mt-4">
				  I'm a big fan of open-source projects and I hope I can make a small but meaningful impact through my work.
				</span>
			  </p>
			</div>
          </div>
        </section>

        {/* Projects Section */}
        <section className="w-full">
          <h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
            Projects
          </h2>
          <p className="text-gray-300 text-lg mb-4 text-center">
            Here are some of my favorite projects. Some are open-source, some are not.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center">
            {projects.map((project, index) => (
              <div
                key={index}
                className="p-6 rounded-xl border border-gray-700 bg-gray-800 
              transform transition-all duration-300 hover:scale-105 hover:shadow-xl
              backdrop-blur-sm hover:bg-opacity-90"
              >
                {project.image && (
                  <div className="mb-6 items-center justify-center flex flex-col">
                    <img
                      src={project.image}
                      alt={project.name}
                      className="h-40 w-40 object-cover rounded-full shadow-lg 
                  outline outline-gray-600 outline-2 hover:outline-blue-500 
                  transition-all duration-300"
                    />
                  </div>
                )}
                <h3 className="text-xl font-bold mb-3  text-gray-100">
                  {project.name}
                </h3>
                <p className=" text-gray-400 text-base mb-4">
                  {project.description}
                </p>
                <div className="flex flex-wrap justify-center gap-3 mt-4">
                  <a
                    href={
                      project.link +
                      "?utm_source=portfolio&utm_medium=referral&ref=space"
                    }
                    target="_blank"
                    className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 
										text-white rounded-lg font-medium transition-all duration-300 
										hover:from-blue-600 hover:to-purple-600 hover:shadow-lg hover:scale-105"
                  >
                    <span>Visit Project</span>
                    <svg
                      className="w-4 h-4 ml-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                      />
                    </svg>
                  </a>

                  {project.open_source && (
                    <a
                      href={project.open_source.link}
                      target="_blank"
                      className="inline-flex items-center px-4 py-2 bg-gray-800 
											text-gray-200 rounded-lg font-medium transition-all duration-300 
											hover:bg-gray-700 hover:shadow-lg hover:scale-105 border border-gray-600"
                    >
                      <svg
                        className="w-4 h-4 mr-2"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                      </svg>
                      <span>Source Code</span>
                    </a>
                  )}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Contact */}
        <section className="w-full">
          <h2 className="text-3xl font-bold mb-2 text-center text-gray-100 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
            Contact
          </h2>
          <div
            className="p-6 rounded-xl border border-gray-700 bg-white/5 backdrop-blur-lg 
              transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
          >
			<p className="text-gray-300 text-lg text-center">
			  Feel free to reach out to me via Discord or Email. I usually respond quicker to emails.
			</p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center mt-6">
              <a
                href="mailto:space@reversed.dev"
                className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500
                text-white rounded-full font-medium transition-all duration-300
                hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
              >
                Email
              </a>
              <a
                href="https://discord.com/users/456443941169004545"
                target="_blank"
                className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500
                text-white rounded-full font-medium transition-all duration-300
                hover:from-blue-600 hover:to-purple-600 hover:shadow-lg"
              >
                Discord
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

const projects: {
  name: string;
  description: string;
  image?: string;
  open_source: { link: string } | false;
  link: string;
}[] = [
  {
    name: "BetterNews",
    description:
      "A news feed where you submit the news.",
    image: "https://betternews.app/assets/icon.png",
    open_source: false,
    link: "https://betternews.app",
  },
  {
    name: "SHSF",
    description:
      "Self-hostable \"Cloud Functions\" for your own hardware.",
    link: "https://github.com/Space-Banane/shsf",
    open_source: { link: "https://github.com/Space-Banane/shsf" },
    image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png",
  },
  {
    name: "3D Print Card",
    description: "Showcase Your 3D Prints Beautifully",
    link:"card.peakprinting.top",
    image: "https://card.peakprinting.top/icon.png",
    open_source: { link: "https://github.com/Space-Banane/imsoprintingit" },
  },
  {
    name: "Lil Cats",
    link: "https://cats.reversed.dev",
    description: "Follow cats around and feed them. (Made with GPT-4.1 because I wanted to test it)",
    image: "https://cats.reversed.dev/lil-cats.png",
    open_source: { link: "https://github.com/Space-Banane/lil-cats" },
  },
  {
    name: "Whatsapp-Chat-Analyzer",
    description:
      "Analyze your Whatsapp chats with ease. Get insights, stats and more.",
    image: "https://cdn.reversed.dev/pictures/wca.png",
    open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" },
    link: "https://whatstat.reversed.dev",
  },
  {
    name: "Free QrCode Generator",
    description:
      "I love QR codes that DO NOT NEED A REGISTER!!!! (or ones that expire)",
    image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
    open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
    link: "https://qr.reversed.dev",
  },
  {
    // Is Twitch streamer live, "Is-live", https://shsf-api.reversed.dev/api/exec/6/22b5d292-ccf1-473b-8838-4db550d6a1e6
    name: "Is-Live",
    description:
      "Is a Twitch streamer live? I don't know, find out!",
    image: "https://cdn.reversed.dev/pictures/islive.png",
    open_source: { link: "https://github.com/Space-Banane/is-live" },
    link: "https://is-live.reversed.dev",
  },
];