import { Link } from "react-router-dom";
import { useAdminOverview } from "../hooks/useAdminOverview";

export function OperationsHomePage() {
  const { error, isLoading, overview } = useAdminOverview();

  return (
    <div className="space-y-6">
      <section className="rounded-[2rem] border border-border bg-[linear-gradient(135deg,rgba(17,24,39,0.96),rgba(24,57,76,0.88),rgba(148,88,32,0.74))] p-8 text-white shadow-[0_28px_90px_rgba(15,23,42,0.25)]">
        <p className="text-xs uppercase tracking-[0.25em] text-white/65">Operations</p>
        <h1 className="mt-3 max-w-3xl text-4xl font-semibold">
          Production command deck for privileged Supabase operations.
        </h1>
        <p className="mt-4 max-w-2xl text-sm text-white/80">
          Monitor the current state of users, access grants, and tablos before drilling into
          explorer edits, analytics, or controlled admin actions.
        </p>
      </section>

      {isLoading ? <p>Loading operations overview...</p> : null}
      {error ? <p className="text-red-600">{error}</p> : null}

      {overview ? (
        <>
          <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {overview.metrics.map((metric) => (
              <article
                className="rounded-[1.75rem] border border-border bg-card p-5"
                key={metric.id}
              >
                <p className="text-xs uppercase tracking-[0.2em] text-foreground/50">
                  {metric.label}
                </p>
                <p className="mt-3 text-3xl font-semibold">{metric.value}</p>
                <p className="mt-2 text-sm text-foreground/65">{metric.changeLabel}</p>
              </article>
            ))}
          </section>

          <section className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
            <div className="rounded-[2rem] border border-border bg-card p-6">
              <div>
                <p className="text-xs uppercase tracking-[0.2em] text-foreground/50">Alerts</p>
                <h2 className="mt-2 text-2xl font-semibold">Operational Watchlist</h2>
              </div>
              <div className="mt-6 grid gap-4">
                {overview.alerts.map((alert) => (
                  <article
                    className="rounded-[1.5rem] border border-border/80 bg-background/70 p-4"
                    key={alert.id}
                  >
                    <div className="flex items-center gap-3">
                      <span
                        className={`rounded-full px-2 py-1 text-[11px] uppercase tracking-[0.18em] ${
                          alert.severity === "critical"
                            ? "bg-red-100 text-red-700"
                            : alert.severity === "warning"
                              ? "bg-amber-100 text-amber-700"
                              : "bg-slate-200 text-slate-700"
                        }`}
                      >
                        {alert.severity}
                      </span>
                      <h3 className="text-sm font-semibold">{alert.title}</h3>
                    </div>
                    <p className="mt-3 text-sm text-foreground/70">{alert.description}</p>
                  </article>
                ))}
              </div>
            </div>

            <div className="rounded-[2rem] border border-border bg-card p-6">
              <p className="text-xs uppercase tracking-[0.2em] text-foreground/50">Shortcuts</p>
              <h2 className="mt-2 text-2xl font-semibold">Common Paths</h2>
              <div className="mt-6 flex flex-col gap-3">
                {overview.shortcuts.map((shortcut) => (
                  <Link
                    className="rounded-[1.25rem] border border-border/80 bg-background/70 px-4 py-3 text-sm font-medium"
                    key={shortcut.id}
                    to={shortcut.href}
                  >
                    {shortcut.label}
                  </Link>
                ))}
              </div>
            </div>
          </section>
        </>
      ) : null}
    </div>
  );
}
