"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/aero-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>
    );
}