'use client';

import Link from 'next/link';
import { useEffect, useMemo, useRef, useState } from 'react';
import { usePathname } from 'next/navigation';
import { History, X } from 'lucide-react';
import { apiFetch } from '@/lib/api';
import { useLocale } from '@/lib/stores/locale-store';

interface ChangeSummaryPayload {
  unreadCount: number;
}

export default function ChangesBanner() {
  const [unreadCount, setUnreadCount] = useState(0);
  const [dismissedAtCount, setDismissedAtCount] = useState<number | null>(null);
  const [autoDismissed, setAutoDismissed] = useState(false);
  const prevUnreadRef = useRef(0);
  const [isRendered, setIsRendered] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const pathname = usePathname();
  const { t } = useLocale();

  useEffect(() => {
    let active = true;
    const fetchSummary = async () => {
      try {
        const summary = await apiFetch<ChangeSummaryPayload>('/api/changes?op=summary');
        if (active) setUnreadCount(summary.unreadCount);
      } catch {
        if (active) setUnreadCount(0);
      }
    };
    void fetchSummary();
    const timer = setInterval(() => void fetchSummary(), 15_000);
    return () => {
      active = false;
      clearInterval(timer);
    };
  }, []);

  // Re-show banner when new changes arrive after auto-dismiss
  useEffect(() => {
    if (unreadCount > prevUnreadRef.current && autoDismissed) {
      setAutoDismissed(false);
    }
    prevUnreadRef.current = unreadCount;
  }, [unreadCount, autoDismissed]);

  const shouldShow = useMemo(() => {
    if (unreadCount <= 0) return false;
    if (pathname?.startsWith('/changes') || pathname?.startsWith('/changelog')) return false;
    if (dismissedAtCount !== null && unreadCount <= dismissedAtCount) return false;
    if (autoDismissed) return false;
    return true;
  }, [dismissedAtCount, pathname, unreadCount, autoDismissed]);

  // Auto-dismiss after 10 seconds
  useEffect(() => {
    if (!shouldShow) return;
    const timer = setTimeout(() => setAutoDismissed(true), 10_000);
    return () => clearTimeout(timer);
  }, [shouldShow]);

  useEffect(() => {
    const durationMs = 160;
    if (shouldShow) {
      setIsRendered(true);
      const raf = requestAnimationFrame(() => setIsVisible(true));
      return () => cancelAnimationFrame(raf);
    }
    setIsVisible(false);
    const timer = setTimeout(() => setIsRendered(false), durationMs);
    return () => clearTimeout(timer);
  }, [shouldShow]);

  async function handleMarkAllRead() {
    try {
      await apiFetch('/api/changes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ op: 'mark_seen' }),
      });
    } catch {
      // Keep UI resilient; polling will recover server state.
    } finally {
      setUnreadCount(0);
      setDismissedAtCount(0);
    }
  }

  if (!isRendered) return null;

  return (
    <div
      className={`fixed right-3 top-[60px] md:right-6 md:top-4 z-30 transition-all duration-150 ease-out ${
        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-2 scale-[0.98] pointer-events-none'
      }`}
    >
      <div
        className="rounded-2xl border bg-card/95 backdrop-blur px-3 py-2.5 shadow-lg min-w-[260px] max-w-[350px]"
        style={{
          borderColor: 'color-mix(in srgb, var(--amber) 45%, var(--border))',
          boxShadow: '0 12px 28px color-mix(in srgb, var(--amber) 14%, rgba(0,0,0,.24))',
        }}
      >
        <div className="flex items-start gap-2.5">
          <span
            className="inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--amber)] bg-[var(--amber-subtle)]"
          >
            <History size={14} />
          </span>
          <div className="min-w-0 flex-1">
            <p className="text-xs text-foreground font-medium whitespace-nowrap">
              {t.changes.unreadBanner(unreadCount)}
            </p>
            <div className="mt-1 flex items-center gap-1.5">
              <Link
                href="/changelog"
                className="hit-target-box inline-flex items-center px-2.5 py-1 text-xs font-medium text-[var(--amber-foreground)] focus-visible:ring-2 focus-visible:ring-ring hover:opacity-90 [--hit-target-bg:var(--amber)] [--hit-target-hover-bg:var(--amber)] [--hit-target-radius:var(--radius-md)]"
              >
                {t.changes.reviewNow}
              </Link>
              <button
                type="button"
                onClick={() => void handleMarkAllRead()}
                className="hit-target-box inline-flex items-center px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring [--hit-target-bg:var(--muted)] [--hit-target-hover-bg:var(--muted)] [--hit-target-radius:var(--radius-md)]"
              >
                {t.changes.markAllRead}
              </button>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setDismissedAtCount(unreadCount)}
            aria-label={t.changes.dismiss}
            className="hit-target-box inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring [--hit-target-hover-bg:color-mix(in_srgb,var(--muted)_60%,transparent)] [--hit-target-radius:var(--radius-md)]"
          >
            <X size={14} />
          </button>
        </div>
      </div>
    </div>
  );
}
