import React from "react";
import {
  FileText,
  MessageSquare,
  ChevronRight,
  Users,
  Server,
  Book,
  Settings,
  Clock,
  AlertCircle,
  Coffee,
  Shield,
} from "lucide-react";
import { Helmet } from "react-helmet";

const popularArticles = [
  // {
  //   title: "How to Install Minecraft Mods",
  //   category: "Gaming",
  //   views: "2.4k",
  //   path: "https://example.com",
  // },
  // {
  //   title: "Setting Up DDoS Protection",
  //   category: "Security",
  //   views: "1.8k",
  //   path: "https://example.com",
  // },
  // {
  //   title: "Server Performance Optimization",
  //   category: "Technical",
  //   views: "1.5k",
  //   path: "https://example.com",
  // },
  // {
  //   title: "Billing & Payment FAQs",
  //   category: "Billing",
  //   views: "1.2k",
  //   path: "https://example.com",
  // },
];

const categories = [
  // {
  //   icon: Server,
  //   title: "Game Servers",
  //   description: "Setup and configuration guides for game servers",
  //   articles: 145,
  //   path: "https://example.com",
  // },
  // {
  //   icon: Shield,
  //   title: "Security",
  //   description: "Security best practices and protection guides",
  //   articles: 89,
  //   path: "https://example.com",
  // },
  // {
  //   icon: Settings,
  //   title: "Technical",
  //   description: "Technical documentation and troubleshooting",
  //   articles: 234,
  //   path: "https://example.com",
  // },
  // {
  //   icon: Users,
  //   title: "Account",
  //   description: "Account management and billing support",
  //   articles: 67,
  //   path: "https://example.com",
  // },
];

const quickActions = [
  {
    title: "Create Ticket",
    description: "Get help from our support team",
    icon: MessageSquare,
    href: "https://billing.skylinkhosting.com/contact.php",
  },
  {
    title: "Knowledge Base (WIP)",
    description: "Browse help articles",
    icon: Book,
    href: "https://kb.skylinkhosting.com",
  },
  {
    title: "System Status",
    description: "Check service status",
    icon: AlertCircle,
    href: "https://status.skylinkhosting.com",
  },
];

const stats = [
  { icon: Clock, value: "15m - 1h", label: "Average Response Time" },
  { icon: Users, value: "24/7", label: "Support Coverage" },
  { icon: FileText, value: "0", label: "Knowledge Base Articles (WIP)" },
  { icon: Coffee, value: "99%", label: "Customer Satisfaction" },
];

const QuickActionCard = ({ title, description, icon: Icon, href }) => (
  <a
    href={href}
    className="bg-slate-900 border border-gray-900 p-5 rounded-md transition-all duration-200 group cursor-pointer"
  >
    <div className="flex items-center gap-4">
      <div className="bg-slate-950 p-3 rounded-md border border-gray-900 transition-all duration-200">
        <Icon className="w-6 h-6 text-blue-500" />
      </div>
      <div>
        <h3 className="text-lg font-semibold text-white mb-1">{title}</h3>
        <p className="text-gray-400">{description}</p>
      </div>
    </div>
  </a>
);

const PopularArticleCard = ({ title, category, views, path }) => (
  <a href={path} className="bg-slate-950 border border-gray-900 p-5 rounded-md">
    <div className="flex justify-between items-start">
      <div>
        <span className="text-sm text-blue-500 mb-2 block">{category}</span>
        <h3 className="text-lg font-semibold text-white mb-1">{title}</h3>
        <span className="text-sm text-gray-400">{views}+ views</span>
      </div>
      <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-blue-500 transition-colors duration-200" />
    </div>
  </a>
);

const CategoryCard = ({ icon: Icon, title, description, articles, path }) => (
  <a
    href={path}
    className="bg-slate-900 border border-gray-900 p-5 rounded-md transition-all duration-200 group"
  >
    <div className="bg-slate-950 p-3 rounded-md border border-gray-900 transition-all duration-200 w-fit mb-4">
      <Icon className="w-6 h-6 text-blue-500" />
    </div>
    <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
    <p className="text-gray-400 text-sm mb-4">{description}</p>
    <span className="text-sm text-blue-500">{articles}+ articles</span>
  </a>
);

const StatCard = ({ icon: Icon, value, label }) => (
  <div className="bg-slate-950 p-5 rounded-md">
    <div className="relative mb-1">
      <Icon className="relative w-8 h-8 text-blue-500 mx-auto" />
    </div>
    <div className="text-2xl font-bold text-white text-center mb-1">
      {value}
    </div>
    <p className="text-gray-400 text-sm text-center">{label}</p>
  </div>
);

export const SupportPortal = () => {
  return (
    <div className="min-h-screen bg-slate-900">
      {/* Hero  */}
      <Helmet>
        <title>Support | GameZone</title>
      </Helmet>
      <section className="py-12 md:py-24 relative overflow-hidden">
        <div className="container mx-auto px-4 max-w-screen-xl relative">
          <div className="text-center max-w-2xl mx-auto">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              How can we help you?
            </h1>
            <p className="text-xl text-gray-300">
              Explore our knowledge base or create a support ticket
            </p>
          </div>
        </div>
      </section>

      {/* Quick Actions */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-8">
            {quickActions.map((action, index) => (
              <QuickActionCard key={index} {...action} />
            ))}
          </div>
        </div>
      </section>

      {/* Popular Articles */}
      <section className="py-12 md:py-24 bg-slate-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Popular Articles
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
            {popularArticles.map((article, index) => (
              <PopularArticleCard key={index} {...article} />
            ))}
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Browse by Category
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {categories.map((category, index) => (
              <CategoryCard key={index} {...category} />
            ))}
          </div>
        </div>
      </section>

      {/* Support Stats */}
      <section className="py-12 md:py-24 bg-slate-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-2 md:gap-8">
            {stats.map((stat, index) => (
              <StatCard key={index} {...stat} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default SupportPortal;
