"use client";

import Image from "next/image";
import { ExternalLink, Github } from "lucide-react";

interface KSuiteApp {
  id: number;
  name: string;
  shortDescription: string;
  description: string;
  url: string;
  githubUrl?: string | null;
  icon: string;
  technologies: string[];
  color: string;
}

const kSuiteApps: KSuiteApp[] = [
  {
    id: 1,
    name: "K-Notes",
    shortDescription: "Google Keep replica",
    description:
      "A full-featured note-taking app designed for speed and simplicity.",
    url: "https://knotes.gabrielkaszewski.dev/",
    githubUrl: "https://github.com/GKaszewski/k-notes",
    icon: "/images/k-notes.png",
    technologies: ["Rust", "React", "TailwindCSS", "PWA"],
    color: "from-amber-400 to-orange-500",
  },
  {
    id: 2,
    name: "Thoughts",
    shortDescription: "Microblogging platform",
    description:
      "Nostalgic social platform with Frutiger Aero style. 128-char posts, custom CSS profiles.",
    url: "https://thoughts.gabrielkaszewski.dev/",
    githubUrl: "https://git.gabrielkaszewski.dev/GKaszewski/thoughts",
    icon: "/images/thoughts.avif",
    technologies: ["Rust", "Next.js", "Axum"],
    color: "from-cyan-400 to-blue-500",
  },
  {
    id: 3,
    name: "K-Tuner",
    shortDescription: "Instrument tuner",
    description:
      "Tune guitar, ukulele, and piano with this Frutiger Aero styled PWA.",
    url: "https://tuner.gabrielkaszewski.dev/",
    githubUrl: "https://github.com/GKaszewski/k-tuner",
    icon: "/images/k-tuner.png",
    technologies: ["React", "PWA"],
    color: "from-emerald-400 to-teal-500",
  },
  {
    id: 4,
    name: "K-QR",
    shortDescription: "QR code generator",
    description:
      "High-performance QR generator. Single Rust executable serving clean HTML.",
    url: "https://qr.gabrielkaszewski.dev/",
    githubUrl: "https://github.com/GKaszewski/k-qr",
    icon: "/images/k-qr.png",
    technologies: ["Rust", "HTML"],
    color: "from-amber-400 to-orange-500",
  },
];

// Connection definitions for the organism
const connections = [
  { from: 0, to: 1 }, // K-Notes -> Thoughts
  { from: 1, to: 2 }, // Thoughts -> K-Tuner
  { from: 2, to: 3 }, // K-Tuner -> K-QR
  { from: 3, to: 0 }, // K-QR -> K-Notes
  { from: 0, to: 2 }, // K-Notes -> K-Tuner (cross)
  { from: 1, to: 3 }, // Thoughts -> K-QR (cross)
];

const KSuiteOrganism = () => {
  // Calculate positions for apps in a circular pattern
  const getPosition = (index: number, total: number, radius: number) => {
    const angle = (index * 2 * Math.PI) / total - Math.PI / 2;
    return {
      x: 50 + radius * Math.cos(angle),
      y: 50 + radius * Math.sin(angle),
    };
  };

  const radius = 35;
  const positions = kSuiteApps.map((_, i) =>
    getPosition(i, kSuiteApps.length, radius)
  );

  return (
    <div className="relative w-full max-w-4xl mx-auto aspect-square">
      {/* SVG Connection Lines */}
      <svg
        className="absolute inset-0 w-full h-full pointer-events-none"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid meet"
      >
        <defs>
          <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="rgba(59, 130, 246, 0.6)" />
            <stop offset="50%" stopColor="rgba(147, 51, 234, 0.6)" />
            <stop offset="100%" stopColor="rgba(59, 130, 246, 0.6)" />
          </linearGradient>
          <filter id="glow">
            <feGaussianBlur stdDeviation="0.5" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* Connection lines */}
        {connections.map((conn, i) => {
          const from = positions[conn.from];
          const to = positions[conn.to];
          return (
            <line
              key={i}
              x1={from.x}
              y1={from.y}
              x2={to.x}
              y2={to.y}
              stroke="url(#lineGradient)"
              strokeWidth="0.3"
              filter="url(#glow)"
              className="animate-pulse"
              style={{ animationDelay: `${i * 0.2}s` }}
            />
          );
        })}

        {/* Lines from center to each app */}
        {positions.map((pos, i) => (
          <line
            key={`center-${i}`}
            x1={50}
            y1={50}
            x2={pos.x}
            y2={pos.y}
            stroke="url(#lineGradient)"
            strokeWidth="0.2"
            strokeDasharray="1 0.5"
            filter="url(#glow)"
            className="animate-pulse"
            style={{ animationDelay: `${i * 0.3}s` }}
          />
        ))}
      </svg>

      {/* App Cards */}
      {kSuiteApps.map((app, index) => {
        const pos = positions[index];
        return (
          <div
            key={app.id}
            className="absolute transform -translate-x-1/2 -translate-y-1/2 w-32 md:w-40 lg:w-48"
            style={{
              left: `${pos.x}%`,
              top: `${pos.y}%`,
            }}
          >
            <div
              className={`group relative p-3 md:p-4 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl hover:bg-white/20 hover:scale-105 transition-all duration-300 cursor-pointer`}
            >
              {/* Glow effect on hover */}
              <div
                className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${app.color} opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-xl`}
              />

              {/* Content */}
              <div className="relative z-10 flex flex-col items-center text-center">
                <div className="relative w-12 h-12 md:w-16 md:h-16 mb-2">
                  <Image
                    src={app.icon}
                    alt={app.name}
                    fill
                    className="object-contain rounded-lg"
                  />
                </div>
                <h3 className="text-sm md:text-base font-bold text-white mb-1">
                  {app.name}
                </h3>
                <p className="text-xs text-white/70 mb-2 hidden md:block">
                  {app.shortDescription}
                </p>

                {/* Links */}
                <div className="flex gap-2">
                  <a
                    href={app.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="p-1.5 rounded-full bg-white/10 hover:bg-white/30 transition-colors"
                    title="Visit"
                  >
                    <ExternalLink size={14} className="text-white" />
                  </a>
                  {app.githubUrl && (
                    <a
                      href={app.githubUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="p-1.5 rounded-full bg-white/10 hover:bg-white/30 transition-colors"
                      title="GitHub"
                    >
                      <Github size={14} className="text-white" />
                    </a>
                  )}
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const KSuiteAppCard = ({ app }: { app: KSuiteApp }) => {
  return (
    <div className="group relative p-6 rounded-3xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl hover:bg-white/15 transition-all duration-300">
      {/* Gradient glow */}
      <div
        className={`absolute inset-0 rounded-3xl bg-gradient-to-br ${app.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`}
      />

      <div className="relative z-10">
        <div className="flex items-start gap-4 mb-4">
          <div className="relative w-16 h-16 shrink-0">
            <Image
              src={app.icon}
              alt={app.name}
              fill
              className="object-contain rounded-xl"
            />
          </div>
          <div>
            <h3 className="text-xl font-bold text-white">{app.name}</h3>
            <p className="text-white/70">{app.shortDescription}</p>
          </div>
        </div>

        <p className="text-white/80 mb-4">{app.description}</p>

        <div className="flex flex-wrap gap-2 mb-4">
          {app.technologies.map((tech) => (
            <span
              key={tech}
              className="px-2 py-1 text-xs rounded-full bg-white/10 text-white/80"
            >
              {tech}
            </span>
          ))}
        </div>

        <div className="flex gap-3">
          <a
            href={app.url}
            target="_blank"
            rel="noopener noreferrer"
            className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r ${app.color} text-white font-semibold hover:opacity-90 transition-opacity`}
          >
            <ExternalLink size={16} />
            Visit
          </a>
          {app.githubUrl && (
            <a
              href={app.githubUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center px-4 py-2 rounded-xl border border-white/20 text-white hover:bg-white/10 transition-colors"
            >
              <Github size={16} />
            </a>
          )}
        </div>
      </div>
    </div>
  );
};

export default function KSuitePage() {
  return (
    <div className="min-h-screen pt-20">
      {/* Hero Section */}
      <section className="relative py-16 md:py-24 overflow-hidden">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-5xl md:text-7xl font-bold text-white mb-4 text-shadow-lg">
            K-Suite
          </h1>
          <p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-2">
            A cohesive ecosystem of open-source, self-hosted applications
            designed to restore digital sovereignty to the user.
          </p>
          <p className="text-base text-white/60 max-w-2xl mx-auto mb-12">
            A &quot;Personal Universe&quot; containing interconnected
            applications ranging from media playback to knowledge management.
          </p>

          {/* Organism Visualization */}
          <KSuiteOrganism />
        </div>
      </section>

      {/* Origin Story Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <div className="p-8 rounded-3xl bg-white/5 backdrop-blur-lg border border-white/10">
              <h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
                Origin Story
              </h2>
              <div className="space-y-4 text-white/80 leading-relaxed">
                <p>
                  The concept of K-Suite was born in{" "}
                  <span className="text-yellow-400 font-semibold">2017</span>.
                  As a middle school student, I envisioned a digital environment
                  where every tool I used was built by my own hands—a space
                  customized exactly to my needs. However, my vision at the time
                  far outpaced my technical abilities.
                </p>
                <p>
                  K-Suite is the realization of that long-standing dream. It
                  bridges the gap between the middle schooler who wanted to
                  build, and the developer who now can.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Engineering Mission Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <div className="p-8 rounded-3xl bg-gradient-to-br from-purple-500/10 to-blue-500/10 backdrop-blur-lg border border-white/10">
              <h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
                Engineering Mission
              </h2>
              <div className="space-y-4 text-white/80 leading-relaxed">
                <p>
                  This project represents my{" "}
                  <span className="text-yellow-400 font-semibold">
                    Magnum Opus
                  </span>
                  . It is the most ambitious software engineering undertaking I
                  have attempted to date. Beyond simply providing privacy and
                  utility, K-Suite serves as a rigorous testing ground for
                  advanced <span className="text-cyan-400">System Design</span>{" "}
                  and{" "}
                  <span className="text-cyan-400">Software Architecture</span>.
                </p>
              </div>

              {/* Core Goals */}
              <div className="mt-8 space-y-6">
                <h3 className="text-xl font-semibold text-white">Core Goals</h3>

                <div className="p-4 rounded-2xl bg-white/5 border border-white/10">
                  <h4 className="text-lg font-bold text-amber-400 mb-2">
                    Architectural Mastery
                  </h4>
                  <p className="text-white/70">
                    To design a distributed system where independent modules
                    (like K-Notes) function flawlessly on their own but become
                    exponentially more powerful when connected.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-white/5 border border-white/10">
                  <h4 className="text-lg font-bold text-emerald-400 mb-2">
                    Digital Sovereignty
                  </h4>
                  <p className="text-white/70">
                    To create a viable, privacy-first alternative to commercial
                    ecosystems (Google/Apple), focused entirely on open-source
                    principles and self-hosting.
                  </p>
                </div>

                <div className="p-4 rounded-2xl bg-white/5 border border-white/10">
                  <h4 className="text-lg font-bold text-blue-400 mb-2">
                    Seamless Integration
                  </h4>
                  <p className="text-white/70">
                    To solve the complex challenge of inter-app communication.
                    In K-Suite, a photo stored in K-Photos isn&apos;t just a
                    file; it&apos;s an asset that can be referenced in other
                    apps or attached to an entry in the upcoming K-Mood.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Detailed Cards Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-white text-center mb-4">
            Explore the Suite
          </h2>
          <p className="text-white/60 text-center mb-12 max-w-xl mx-auto">
            Each application is designed to work independently, but together
            they form something greater.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {kSuiteApps.map((app) => (
              <KSuiteAppCard key={app.id} app={app} />
            ))}
          </div>
        </div>
      </section>

      {/* Coming Soon Section */}
      <section className="py-16">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-2xl mx-auto p-8 rounded-3xl bg-white/5 backdrop-blur-lg border border-white/10">
            <h2 className="text-2xl font-bold text-white mb-4">
              More Apps Coming Soon
            </h2>
            <p className="text-white/70 mb-4">
              K-Suite is still growing. The ecosystem will expand with more
              interconnected applications including K-Photos, K-Mood, and more.
            </p>
            <p className="text-sm text-white/50">
              Built with Rust, React, and modern web technologies.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}