"use client";

import { useState } from "react";
import { projects, Project } from "@/data/projects";

const categoryColors = {
  security: {
    border: "border-[#ff3333]",
    text: "text-[#ff3333]",
    glow: "hover:shadow-[0_0_15px_#ff333340]",
    tag: "bg-[#ff333320] text-[#ff3333]",
  },
  development: {
    border: "border-[#00d4ff]",
    text: "text-[#00d4ff]",
    glow: "hover:shadow-[0_0_15px_#00d4ff40]",
    tag: "bg-[#00d4ff20] text-[#00d4ff]",
  },
  art: {
    border: "border-[#ff00ff]",
    text: "text-[#ff00ff]",
    glow: "hover:shadow-[0_0_15px_#ff00ff40]",
    tag: "bg-[#ff00ff20] text-[#ff00ff]",
  },
  other: {
    border: "border-[#ffff00]",
    text: "text-[#ffff00]",
    glow: "hover:shadow-[0_0_15px_#ffff0040]",
    tag: "bg-[#ffff0020] text-[#ffff00]",
  },
};

export default function ProjectsSection() {
  const [isExpanded, setIsExpanded] = useState(false);

  const featuredProjects = projects.filter((project) => project.featured);
  const additionalProjects = projects.filter((project) => !project.featured);

  return (
    <section id="projects">
      <div className="terminal-window rounded-lg overflow-hidden">
        <div className="terminal-header px-4 py-2 flex items-center gap-2">
          <span className="text-[#00ff41] text-sm opacity-60">projects.sh</span>
        </div>
        <div className="p-6">
          <div className="text-[#00ff4160] text-sm mb-6">
            $ ls -la ~/projects/ --featured
          </div>

          <div className="grid md:grid-cols-2 gap-6 mb-6">
            {featuredProjects.map((project, index) => (
              <ProjectCard key={project.id} project={project} index={index} />
            ))}
          </div>

          <div
            className={`overflow-hidden transition-all duration-500 ease-in-out ${
              isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
            }`}
          >
            {additionalProjects.length > 0 && (
              <div className="text-[#00ff4160] text-sm mb-4 mt-4">
                $ ls -la ~/projects/ --all
              </div>
            )}
            <div className="grid md:grid-cols-2 gap-6">
              {additionalProjects.map((project, index) => (
                <ProjectCard
                  key={project.id}
                  project={project}
                  index={index + featuredProjects.length}
                />
              ))}
            </div>
          </div>

          {additionalProjects.length > 0 && (
            <div className="text-center mt-8">
              <button
                onClick={() => setIsExpanded(!isExpanded)}
                className="hacker-btn px-8 py-3 font-bold"
              >
                <span className="text-[#00ff4160] mr-2">$</span>
                {isExpanded ? "COLLAPSE" : "SHOW_ALL"}
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ project, index }: { project: Project; index: number }) {
  const colors = categoryColors[project.category];

  return (
    <div
      className={`hacker-card p-5 transition-all duration-300 ${colors.border} border ${colors.glow}`}
    >
      {/* Project header */}
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-2">
          <span className="text-[#00ff4160] text-xs font-mono">
            [{String(index).padStart(2, "0")}]
          </span>
          <span className={`text-xs px-2 py-0.5 ${colors.tag} font-mono`}>
            {project.category}
          </span>
        </div>
        {project.featured && (
          <span className="text-[#ffff00] text-xs animate-pulse">*</span>
        )}
      </div>

      {/* Project title */}
      <h3 className={`text-lg font-bold mb-2 ${colors.text}`}>
        <span className="text-[#00ff4160]">./</span>
        {project.title}
      </h3>

      {/* Description */}
      <p className="text-[#00ff41cc] text-sm mb-4 leading-relaxed">
        <span className="text-[#00ff4160]"># </span>
        {project.description}
      </p>

      {/* Link */}
      {project.link && (
        <a
          href={project.link}
          target="_blank"
          rel="noopener noreferrer"
          className={`inline-flex items-center gap-2 text-sm font-mono ${colors.text} hover:underline group`}
        >
          <span className="text-[#00ff4160]">&gt;</span>
          <span>VIEW_PROJECT</span>
          <svg
            className="w-4 h-4 transform group-hover:translate-x-1 transition-transform"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 7l5 5m0 0l-5 5m5-5H6"
            />
          </svg>
        </a>
      )}
    </div>
  );
}
