"use client";

import Link from "next/link";
import { Puzzle, Timer, Sparkles, Settings } from "lucide-react";
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";

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

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

  return (
    <div className="space-y-4">
      <h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
        Pulse
      </h1>

      <StatusCard />
      <StatsCard />
      <MemorySnapshotCard />

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

      <div>
        <h2 className="text-sm font-medium text-zinc-400 mb-2">
          Recent Sessions
        </h2>
        {isLoading ? (
          <div className="space-y-3">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="glass p-4 animate-pulse">
                <div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
                <div className="h-3 bg-white/[0.06] rounded w-1/2" />
              </div>
            ))}
          </div>
        ) : (
          <div className="space-y-2">
            {sessionsData?.items?.map((s) => (
              <SessionCard key={s.id} session={s} />
            ))}
            {sessionsData?.items?.length === 0 && (
              <div className="glass p-6 text-center text-sm text-zinc-500">
                No sessions yet
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}