'use client';

import { useState } from 'react';

interface App {
  name: string;
  icon: string;
  category: string;
}

const apps: App[] = [
  // Media
  { name: 'Plex', icon: '🎬', category: 'Media' },
  { name: 'Jellyfin', icon: '📽️', category: 'Media' },
  { name: 'Kaleidescape', icon: '🎞️', category: 'Media' },
  { name: 'Emby', icon: '🎥', category: 'Media' },
  { name: 'Subsonic', icon: '🎵', category: 'Media' },
  { name: 'Synology Photos', icon: '📸', category: 'Media' },

  // Downloads
  { name: 'Sonarr', icon: '📺', category: 'Downloads' },
  { name: 'Radarr', icon: '🎬', category: 'Downloads' },
  { name: 'Lidarr', icon: '🎶', category: 'Downloads' },
  { name: 'qBittorrent', icon: '⚡', category: 'Downloads' },
  { name: 'Transmission', icon: '📤', category: 'Downloads' },
  { name: 'SABnzbd', icon: '📥', category: 'Downloads' },

  // Productivity
  { name: 'Nextcloud', icon: '☁️', category: 'Productivity' },
  { name: 'Vikunja', icon: '✓', category: 'Productivity' },
  { name: 'OpenProject', icon: '📋', category: 'Productivity' },
  { name: 'Plane', icon: '🚀', category: 'Productivity' },
  { name: 'Actual Budget', icon: '💰', category: 'Productivity' },
  { name: 'HedgeDoc', icon: '📝', category: 'Productivity' },

  // Management
  { name: 'Portainer', icon: '🐋', category: 'Management' },
  { name: 'Homelabs', icon: '🏠', category: 'Management' },
  { name: 'Yacht', icon: '⛵', category: 'Management' },
  { name: 'DockSTARTer', icon: '⭐', category: 'Management' },
  { name: 'Unraid', icon: '📦', category: 'Management' },
  { name: 'TrueNAS', icon: '💾', category: 'Management' },

  // Security
  { name: 'Vaultwarden', icon: '🔐', category: 'Security' },
  { name: 'Bitwarden', icon: '🗝️', category: 'Security' },
  { name: 'Keycloak', icon: '🔑', category: 'Security' },
  { name: 'Authelia', icon: '🛡️', category: 'Security' },
  { name: 'OpenVPN', icon: '🌐', category: 'Security' },
  { name: 'WireGuard', icon: '📡', category: 'Security' },

  // Development
  { name: 'Gitea', icon: '🐙', category: 'Development' },
  { name: 'GitLab', icon: '🦊', category: 'Development' },
  { name: 'Forgejo', icon: '🔧', category: 'Development' },
  { name: 'Jenkins', icon: '🤖', category: 'Development' },
  { name: 'Drone', icon: '🚁', category: 'Development' },
  { name: 'Code Server', icon: '💻', category: 'Development' },

  // Monitoring
  { name: 'Grafana', icon: '📊', category: 'Monitoring' },
  { name: 'Prometheus', icon: '⚙️', category: 'Monitoring' },
  { name: 'Uptime Kuma', icon: '📈', category: 'Monitoring' },
  { name: 'Netdata', icon: '🔍', category: 'Monitoring' },
  { name: 'New Relic', icon: '👁️', category: 'Monitoring' },
  { name: 'Kibana', icon: '📉', category: 'Monitoring' },

  // Additional
  { name: 'Home Assistant', icon: '🏡', category: 'Smart Home' },
  { name: 'Node-RED', icon: '🔴', category: 'Smart Home' },
  { name: 'OpenHAB', icon: '⚙️', category: 'Smart Home' },
  { name: 'Immich', icon: '📷', category: 'Media' },
  { name: 'Calibre', icon: '📚', category: 'Productivity' },
  { name: 'Paperless', icon: '📄', category: 'Productivity' },
];

const categories = [
  'All',
  'Media',
  'Downloads',
  'Productivity',
  'Management',
  'Security',
  'Development',
  'Monitoring',
  'Smart Home',
];

export default function AppShowcase() {
  const [activeCategory, setActiveCategory] = useState('All');

  const filteredApps =
    activeCategory === 'All'
      ? apps
      : apps.filter((app) => app.category === activeCategory);

  return (
    <section className="relative py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-surface-950 to-surface-900">
      <div className="mx-auto max-w-7xl">
        {/* Header */}
        <div className="mb-12 text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-surface-50 mb-4">
            50+ One-Click App Templates
          </h2>
          <p className="text-lg text-surface-400 max-w-2xl mx-auto">
            Deploy your favorite apps instantly with pre-configured templates, automatic SSL certificates, and integrated DNS management.
          </p>
        </div>

        {/* Category Filter */}
        <div className="mb-10 flex flex-wrap justify-center gap-2">
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                activeCategory === category
                  ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/30'
                  : 'bg-surface-800 text-surface-300 hover:bg-surface-700 hover:text-surface-200'
              }`}
            >
              {category}
            </button>
          ))}
        </div>

        {/* App Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
          {filteredApps.map((app) => (
            <div
              key={`${app.name}-${app.category}`}
              className="group relative flex flex-col items-center justify-center rounded-lg border border-surface-700 bg-surface-800/50 backdrop-blur-sm p-4 transition-all duration-300 hover:border-brand-500/50 hover:bg-surface-800/80 hover:shadow-lg hover:shadow-brand-500/10 hover:-translate-y-1"
            >
              {/* Background gradient on hover */}
              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 rounded-lg transition-all duration-300 pointer-events-none" />

              <div className="relative z-10 flex flex-col items-center justify-center text-center">
                {/* Icon */}
                <div className="text-4xl mb-2 transition-transform duration-300 group-hover:scale-110">
                  {app.icon}
                </div>

                {/* App Name */}
                <h3 className="text-sm font-semibold text-surface-50 line-clamp-2 group-hover:text-brand-400 transition-colors">
                  {app.name}
                </h3>

                {/* Category Tag */}
                <span className="text-xs text-surface-500 mt-1 group-hover:text-brand-400/70">
                  {app.category}
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Stats */}
        <div className="mt-16 grid grid-cols-3 gap-4 sm:gap-8">
          <div className="text-center">
            <div className="text-3xl sm:text-4xl font-bold text-brand-400 mb-2">
              50+
            </div>
            <p className="text-sm text-surface-400">App Templates</p>
          </div>
          <div className="text-center">
            <div className="text-3xl sm:text-4xl font-bold text-brand-400 mb-2">
              0
            </div>
            <p className="text-sm text-surface-400">Configuration</p>
          </div>
          <div className="text-center">
            <div className="text-3xl sm:text-4xl font-bold text-brand-400 mb-2">
              1-Click
            </div>
            <p className="text-sm text-surface-400">Deploy</p>
          </div>
        </div>
      </div>
    </section>
  );
}