"use client";

import { useEffect, useState } from "react";
import { X } from "lucide-react";
import { Button } from "yt-dlp-transcript-common/components/ui/button";

// "New since your last visit" — a calm, dismissible banner that compares the
// current transcript count against a per-site baseline stored in localStorage on
// the previous visit. Two messages, in priority order:
//   1. transcripts grew → "N new transcripts since your last visit"
//   2. first visit ever (and the power-tools hint hasn't been seen) → a nudge
//      toward the power features people tend to miss.
// All client-side: a static export can't know who visited or when, so the
// baseline lives in the browser. Versioned key so the shape can evolve safely.

const VERSION = 1;
const visitKey = (siteId: string) => `ytdlp-tb:lastVisit:${siteId}`;
const POWER_HINT_KEY = "ytdlp-tb:powerHintSeen";

type Stored = { v: number; count: number; ts: number };

function readStored(siteId: string): Stored | null {
  try {
    const raw = localStorage.getItem(visitKey(siteId));
    if (!raw) return null;
    const parsed = JSON.parse(raw) as Stored;
    if (parsed && parsed.v === VERSION && typeof parsed.count === "number") {
      return parsed;
    }
  } catch {
    /* ignore */
  }
  return null;
}

export default function NewSinceLastVisit({
  siteId,
  count,
}: {
  siteId: string;
  count: number;
}) {
  const [message, setMessage] = useState<string | null>(null);
  const [hint, setHint] = useState<string | null>(null);

  useEffect(() => {
    const prev = readStored(siteId);
    const delta = prev ? count - prev.count : 0;

    if (delta > 0) {
      setMessage(
        `${delta.toLocaleString()} new transcript${delta === 1 ? "" : "s"} since your last visit`,
      );
      setHint("Use Filters and the query builder to narrow them down.");
    } else if (!prev) {
      let seen = false;
      try {
        seen = localStorage.getItem(POWER_HINT_KEY) === "1";
      } catch {
        /* ignore */
      }
      if (!seen) {
        setMessage("Welcome to the archive");
        setHint(
          "Beyond simple search: layer queries, scope by transcript or live chat, filter by channel or date, and chart what you find.",
        );
      }
    }

    // Mark this visit as the new baseline regardless of what we showed.
    try {
      const next: Stored = { v: VERSION, count, ts: Date.now() };
      localStorage.setItem(visitKey(siteId), JSON.stringify(next));
    } catch {
      /* ignore */
    }
  }, [siteId, count]);

  if (!message) return null;

  return (
    <div
      data-testid="new-since-last-visit"
      className="flex items-start gap-3 rounded-lg border border-border bg-brand-soft/60 px-4 py-3"
    >
      <span className="mt-0.5 h-2 w-2 shrink-0 rotate-45 rounded-[2px] bg-brand" aria-hidden="true" />
      <div className="min-w-0 flex-1">
        <p className="font-display text-sm font-semibold text-foreground">{message}</p>
        {hint && <p className="mt-0.5 text-sm text-muted-foreground">{hint}</p>}
      </div>
      <Button
        variant="ghost"
        size="icon"
        className="-mr-2 -mt-1 size-7 shrink-0 text-muted-foreground"
        aria-label="Dismiss"
        onClick={() => {
          try {
            localStorage.setItem(POWER_HINT_KEY, "1");
          } catch {
            /* ignore */
          }
          setMessage(null);
        }}
      >
        <X className="size-4" aria-hidden="true" />
      </Button>
    </div>
  );
}