"use client";

import Link from "next/link";
import { Puzzle, Timer, Sparkles, Settings } from "lucide-react";
import { useQueryClient } from "@tanstack/react-query";
import { StatusCard } from "@/components/StatusCard";
import { StatsCard } from "@/components/StatsCard";
import { SessionCard } from "@/components/SessionCard";
import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
import { useSessions } from "@/lib/hooks";
import { usePullToRefresh } from "@/lib/usePullToRefresh";

const QUICK_LINKS = [
  { href: "/skills", label: "Skills", icon: Puzzle },
  { href: "/cron", label: "Cron", icon: Timer },
  { href: "/soul", label: "Soul", icon: Sparkles },
  { href: "/config", label: "Config", icon: Settings },
] as const;

export default function PulsePage() {
  const qc = useQueryClient();
  const { data: sessionsData, isLoading } = useSessions(8);

  usePullToRefresh(() => { qc.invalidateQueries(); });

  return (
    <div className="space-y-5">
      <StatusCard />
      <StatsCard />
      <MemorySnapshotCard />

      <div className="grid grid-cols-4 gap-2">
        {QUICK_LINKS.map(({ href, label, icon: Icon }) => (
          <Link key={href} href={href}>
            <div className="card card-hover p-3 flex flex-col items-center gap-1 transition-colors">
              <Icon size={18} style={{ color: "var(--accent)" }} />
              <span className="text-[11px]" style={{ color: "var(--text-2)" }}>{label}</span>
            </div>
          </Link>
        ))}
      </div>

      <div>
        <div className="section-label mb-2">Recent</div>
        {isLoading ? (
          <div className="space-y-1">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="py-3 animate-pulse">
                <div className="h-4 rounded w-3/4 mb-1.5" style={{ background: "var(--bg-raised)" }} />
                <div className="h-3 rounded w-1/2" style={{ background: "var(--bg-raised)" }} />
              </div>
            ))}
          </div>
        ) : (
          <div>
            {sessionsData?.items?.map((s) => (
              <SessionCard key={s.id} session={s} />
            ))}
            {sessionsData?.items?.length === 0 && (
              <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
                No sessions yet
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}