"use client";

import { useEffect, useState } from "react";
import { useSession } from "@/lib/store";
import { Sheet, Button } from "@/components/ui";
import { Clock } from "lucide-react";

/** Responsible-play reminder: "You've been playing for N minutes. Take a break anytime." */
export function SessionReminder() {
  const settings = useSession((s) => s.settings);
  const status = useSession((s) => s.status);
  const startedAt = useSession((s) => s.sessionStartedAt);
  const [shownFor, setShownFor] = useState<number | null>(null);
  const [open, setOpen] = useState(false);
  const interval = settings?.sessionReminderMinutes ?? 0;

  useEffect(() => {
    if (status !== "authenticated" || !interval) return;
    const t = setInterval(() => {
      const minutes = Math.floor((Date.now() - startedAt) / 60_000);
      const step = Math.floor(minutes / interval) * interval;
      if (step > 0 && step !== shownFor) {
        setShownFor(step);
        setOpen(true);
      }
    }, 15_000);
    return () => clearInterval(t);
  }, [status, interval, startedAt, shownFor]);

  return (
    <Sheet open={open} onClose={() => setOpen(false)} side="center" title="Time check">
      <div className="flex items-start gap-4">
        <div className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-accent-soft text-accent">
          <Clock className="h-6 w-6" />
        </div>
        <div>
          <p className="text-lg font-semibold tracking-tight">You&apos;ve been playing for {shownFor} minutes.</p>
          <p className="mt-1 text-sm text-fg-2">Take a break anytime. Spinza credits are fictional and your progress is always saved.</p>
        </div>
      </div>
      <div className="mt-6 flex gap-3">
        <Button variant="secondary" className="flex-1" onClick={() => setOpen(false)}>
          Keep playing
        </Button>
        <Button className="flex-1" href="/" onClick={() => setOpen(false)}>
          Back to lobby
        </Button>
      </div>
    </Sheet>
  );
}