import React from "react";
import { Activity, ArrowRight, Boxes, Database, Gauge, Package, Rocket, Server, Settings, Users } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/app/providers";

const primaryActions = [
  {
    title: "Launch Instance",
    description: "Browse Helm charts and deploy a new inference service.",
    path: "/artifact/registries",
    icon: Rocket,
    accent: "bg-blue-600 text-white",
  },
  {
    title: "Instances",
    description: "Check release status, entries, upgrades, and deletion.",
    path: "/artifact/instances",
    icon: Package,
    accent: "bg-emerald-600 text-white",
  },
  {
    title: "Cluster Monitoring",
    description: "Inspect cluster health and node resource pressure.",
    path: "/monitoring/clusters",
    icon: Activity,
    accent: "bg-slate-900 text-white",
  },
];

const setupActions = [
  {
    title: "Clusters",
    description: "Kubeconfig and namespace policy",
    path: "/configuration/clusters",
    icon: Server,
  },
  {
    title: "Registries",
    description: "Harbor robot account and chart access",
    path: "/configuration/registries",
    icon: Database,
  },
  {
    title: "Users",
    description: "Admin-only account management",
    path: "/configuration/users",
    icon: Users,
    adminOnly: true,
  },
];

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const { user } = useAuth();
  const isAdmin = user?.role === "admin";

  return (
    <div className="min-h-full bg-slate-50 px-4 py-6 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl space-y-6">
        <section className="grid gap-5 lg:grid-cols-[1.4fr_0.8fr]">
          <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-soft sm:p-8">
            <div className="mb-8 flex items-center gap-3">
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-600 text-white">
                <Boxes className="h-6 w-6" />
              </div>
              <div>
                <p className="text-sm font-medium uppercase tracking-wide text-blue-700">One Click Deployment Platform</p>
                <h1 className="text-3xl font-semibold text-slate-950 sm:text-4xl">Operations Workbench</h1>
              </div>
            </div>

            <div className="grid gap-4 md:grid-cols-3">
              {primaryActions.map((action) => (
                <button
                  key={action.path}
                  type="button"
                  onClick={() => navigate(action.path)}
                  className="group flex min-h-[190px] flex-col justify-between rounded-lg border border-slate-200 bg-slate-50 p-5 text-left transition hover:-translate-y-0.5 hover:border-blue-300 hover:bg-white hover:shadow-md"
                >
                  <div>
                    <div className={`mb-4 flex h-11 w-11 items-center justify-center rounded-lg ${action.accent}`}>
                      <action.icon className="h-5 w-5" />
                    </div>
                    <h2 className="text-lg font-semibold text-slate-950">{action.title}</h2>
                    <p className="mt-2 text-sm leading-6 text-slate-600">{action.description}</p>
                  </div>
                  <div className="mt-5 flex items-center gap-2 text-sm font-medium text-blue-700">
                    Open <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
                  </div>
                </button>
              ))}
            </div>
          </div>

          <aside className="rounded-lg border border-slate-200 bg-white p-5 shadow-soft">
            <div className="mb-4 flex items-center justify-between">
              <div>
                <h2 className="text-base font-semibold text-slate-950">Runtime Focus</h2>
                <p className="text-sm text-slate-500">High-frequency checks</p>
              </div>
              <Gauge className="h-5 w-5 text-slate-400" />
            </div>
            <div className="space-y-3">
              <button
                type="button"
                onClick={() => navigate("/artifact/instances")}
                className="flex w-full items-center justify-between rounded-lg border border-slate-200 px-4 py-3 text-left hover:border-emerald-300 hover:bg-emerald-50"
              >
                <span>
                  <span className="block text-sm font-semibold text-slate-900">Release status</span>
                  <span className="text-xs text-slate-500">Installed, failed, deleting</span>
                </span>
                <ArrowRight className="h-4 w-4 text-slate-400" />
              </button>
              <button
                type="button"
                onClick={() => navigate("/monitoring/clusters")}
                className="flex w-full items-center justify-between rounded-lg border border-slate-200 px-4 py-3 text-left hover:border-blue-300 hover:bg-blue-50"
              >
                <span>
                  <span className="block text-sm font-semibold text-slate-900">Cluster health</span>
                  <span className="text-xs text-slate-500">Nodes, pods, CPU, memory</span>
                </span>
                <ArrowRight className="h-4 w-4 text-slate-400" />
              </button>
            </div>
          </aside>
        </section>

        <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-soft">
          <div className="mb-4 flex items-center gap-2">
            <Settings className="h-5 w-5 text-slate-500" />
            <h2 className="text-base font-semibold text-slate-950">Setup</h2>
            <span className="text-sm text-slate-500">Less frequent administrative tasks</span>
          </div>
          <div className="grid gap-3 md:grid-cols-3">
            {setupActions
              .filter((action) => !action.adminOnly || isAdmin)
              .map((action) => (
                <button
                  key={action.path}
                  type="button"
                  onClick={() => navigate(action.path)}
                  className="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-left transition hover:border-slate-300 hover:bg-white"
                >
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white text-slate-600 shadow-sm">
                    <action.icon className="h-5 w-5" />
                  </div>
                  <span className="min-w-0">
                    <span className="block text-sm font-semibold text-slate-900">{action.title}</span>
                    <span className="block truncate text-xs text-slate-500">{action.description}</span>
                  </span>
                </button>
              ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default HomePage;
