import { Link } from "react-router-dom";
import { Palette, ShieldCheck, Bell, DollarSign, Users, Settings, UserCircle, ArrowRight, LayoutDashboard, LogIn, UserPlus, Layers, Activity, MessageSquare, Sparkles, MessageSquareQuote, ShoppingBag, Database, Inbox } from "lucide-react";
import CmsLayout from "./CmsLayout";
import { PageHeader } from "./ui";

const cards = [
  { to: "/admin/cms/branding", icon: Palette, title: "Branding", desc: "Logo, hero slider, colors, typography.", tone: "from-[#0b6e3e] to-[#0a8048]" },
  { to: "/admin/cms/login-page", icon: LogIn, title: "Login Page", desc: "Pick a layout and style auth pages.", tone: "from-indigo-600 to-indigo-500" },
  { to: "/admin/cms/registration", icon: UserPlus, title: "Registration", desc: "Signup rules and pending approvals.", tone: "from-teal-600 to-teal-500" },
  { to: "/admin/cms/security", icon: ShieldCheck, title: "Security", desc: "MFA, password policy, sessions, IP control.", tone: "from-red-600 to-red-500" },
  { to: "/admin/cms/notifications", icon: Bell, title: "Notifications", desc: "SMTP and event email settings.", tone: "from-blue-600 to-blue-500" },
  { to: "/admin/cms/plans", icon: Layers, title: "Plan Management", desc: "Create, edit, publish pricing plans for every service.", tone: "from-emerald-600 to-emerald-500" },
  { to: "/admin/cms/pricing", icon: DollarSign, title: "Pricing Layout", desc: "Plan showcase layout, accent and styling.", tone: "from-amber-500 to-amber-400" },
  { to: "/admin/cms/users", icon: Users, title: "Users & Roles", desc: "Accounts, roles and permissions matrix.", tone: "from-purple-600 to-purple-500" },
  { to: "/admin/cms/general", icon: Settings, title: "General", desc: "Site identity, SEO, contact, footer.", tone: "from-slate-700 to-slate-600" },
  { to: "/admin/cms/profile", icon: UserCircle, title: "Admin Profile", desc: "Your account, password, MFA.", tone: "from-emerald-600 to-emerald-500" },
  { to: "/admin/cms/whmcs-logs", icon: Activity, title: "WHMCS API Logs", desc: "Audit WHMCS API calls, errors and latency.", tone: "from-sky-600 to-sky-500" },
  { to: "/admin/cms/support", icon: MessageSquare, title: "AI Chat Support", desc: "Departments, agents, routing, KB and analytics.", tone: "from-fuchsia-600 to-pink-500" },
  { to: "/admin/cms/chat-branding", icon: Sparkles, title: "Chat Widget Branding", desc: "Avatar, colors, welcome message and launcher style.", tone: "from-rose-600 to-orange-500" },
  { to: "/admin/cms/testimonials", icon: MessageSquareQuote, title: "Testimonials", desc: "Manage the customer testimonials carousel on the Service Catalog.", tone: "from-cyan-600 to-teal-500" },
  { to: "/admin/cms/shop", icon: ShoppingBag, title: "Online Shop", desc: "Manage shop categories, products and customer orders.", tone: "from-orange-600 to-amber-500" },
  { to: "/admin/cms/cache", icon: Database, title: "Cache Management", desc: "Toggle frontend caching and clear stale assets site-wide.", tone: "from-indigo-600 to-violet-500" },
  { to: "/admin/cms/uptimerobot", icon: Activity, title: "UptimeRobot Reseller", desc: "Manage monitoring packages, client subscriptions and Team-plan usage.", tone: "from-sky-600 to-cyan-500" },
  { to: "/admin/cms/bizmail", icon: Inbox, title: "Bizmail360 Reseller", desc: "SmarterMail-powered mail plans, client subscriptions and provisioning.", tone: "from-emerald-600 to-teal-500" },
];

export default function CmsHome() {
  return (
    <CmsLayout>
      <PageHeader
        icon={<LayoutDashboard className="w-6 h-6" />}
        title="Content Management System"
        description="Configure every aspect of your DoItEasy platform from one place."
      />
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
        {cards.map((c) => {
          const Icon = c.icon;
          return (
            <Link key={c.to} to={c.to} className="group bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-xl hover:-translate-y-0.5 transition">
              <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${c.tone} text-white flex items-center justify-center mb-4 shadow`}>
                <Icon className="w-6 h-6" />
              </div>
              <div className="text-lg font-bold text-slate-900">{c.title}</div>
              <p className="text-sm text-slate-500 mt-1 mb-4">{c.desc}</p>
              <span className="text-sm font-semibold text-[#0b6e3e] inline-flex items-center gap-1 group-hover:gap-2 transition-all">
                Configure <ArrowRight className="w-4 h-4" />
              </span>
            </Link>
          );
        })}
      </div>

      <div className="mt-8 bg-gradient-to-br from-[#063019] to-[#0b6e3e] text-white rounded-2xl p-6 md:p-8 shadow-xl">
        <div className="text-xs uppercase tracking-widest font-bold text-[#f5c400]">Pro Tip</div>
        <h3 className="text-xl md:text-2xl font-bold mt-1">Start with Branding, then wire up Notifications</h3>
        <p className="text-slate-200 text-sm mt-2 max-w-2xl">
          Uploading your logo and configuring SMTP unlocks the rest of the platform — you'll be able to send test emails and preview a branded experience immediately.
        </p>
      </div>
    </CmsLayout>
  );
}