"use client";

import { useEffect, useState } from "react";
import { useSession, useToasts } from "@/lib/store";
import type { PublicUser, UserSettings, WalletView } from "@spinza/shared";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { SessionReminder } from "./session-reminder";

export function Providers({ children, session }: { children: React.ReactNode; session: { user: PublicUser; wallet: WalletView; settings: UserSettings } | null }) {
  const hydrate = useSession((s) => s.hydrate);
  // Hydrate synchronously on first render so the first paint already knows the session.
  useState(() => {
    hydrate(session);
    return true;
  });
  useEffect(() => {
    hydrate(session);
  }, [session, hydrate]);
  return (
    <>
      {children}
      <Toaster />
      <SessionReminder />
    </>
  );
}

function Toaster() {
  const toasts = useToasts((s) => s.toasts);
  const dismiss = useToasts((s) => s.dismiss);
  return (
    <div className="pointer-events-none fixed inset-x-0 top-0 flex flex-col items-center gap-2 px-4" style={{ zIndex: "var(--z-toast)", paddingTop: "calc(var(--safe-top) + 12px)" }}>
      <AnimatePresence>
        {toasts.map((t) => (
          <motion.button
            key={t.id}
            layout
            initial={{ opacity: 0, y: -16, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -10, scale: 0.96 }}
            onClick={() => dismiss(t.id)}
            className={cn(
              "pointer-events-auto glass w-full max-w-sm rounded-md px-4 py-3 text-left shadow-2xl",
              t.tone === "success" && "border-success/40",
              t.tone === "danger" && "border-danger/40",
              t.tone === "credit" && "border-accent/40",
            )}
          >
            <div className={cn("text-sm font-semibold", t.tone === "credit" && "text-credit", t.tone === "danger" && "text-danger", t.tone === "success" && "text-success")}>{t.title}</div>
            {t.description ? <div className="mt-0.5 text-[13px] text-fg-2">{t.description}</div> : null}
          </motion.button>
        ))}
      </AnimatePresence>
    </div>
  );
}