import { useCallback, useEffect, useRef, useState } from 'react';
import { Bell } from 'lucide-react';
import { FullLogo } from './full-logo';
import { IconButton } from '@/components/ui/icon-button';
import { Button } from '@/components/ui/button';
import { NewsDrawer, getLastSeenFeedVersion, type NewsItem } from './news-drawer';
import { useFocusTrap } from '../hooks/use-focus-trap';
import { useScrollLock } from '../hooks/use-scroll-lock';
import { __ } from '../lib/i18n';
import {
  NEWS_FEED_CONSENT_EVENT,
  persistNewsFeedConsent,
  readNewsFeedConsent,
  updatePrivacySettings,
} from '../lib/privacy-settings';

interface TopBarProps {
  pluginUrl?: string;
}

interface NewsApiResponse {
  success: boolean;
  configured?: boolean;
  consent_required?: boolean;
  feedVersion?: string;
  lastUpdated?: string;
  items?: NewsItem[];
  error?: string;
  message?: string;
}

function getRestConfig(): { root: string; nonce: string } | null {
  const w = window as { wpApiSettings?: { root: string; nonce: string } };
  if (w.wpApiSettings?.root && w.wpApiSettings?.nonce) {
    return { root: w.wpApiSettings.root.replace(/\/$/, ''), nonce: w.wpApiSettings.nonce };
  }
  return null;
}

function readTopBarBadge(): { label: string; href: string } | null {
  const badge = window.llmagnetTopBarBadge;
  if (!badge || typeof badge.label !== 'string' || badge.label.trim() === '') {
    return null;
  }
  if (typeof badge.href !== 'string') {
    return null;
  }
  return { label: badge.label, href: badge.href };
}

export function TopBar({ pluginUrl }: TopBarProps) {
  const topBarBadge = readTopBarBadge();

  const finalPluginUrl =
    pluginUrl ||
    (window as any).llmagnetDashboardData?.pluginUrl ||
    (window as any).llmagnetBotAnalyticsData?.pluginUrl ||
    (window as any).llmagnetPagesData?.pluginUrl ||
    (window as any).llmagnetReportsData?.pluginUrl ||
    (window as any).llmagnetAnalyticsData?.pluginUrl ||
    '';

  const [newsOpen, setNewsOpen] = useState(false);
  const [consentOpen, setConsentOpen] = useState(false);
  const [consentSaving, setConsentSaving] = useState(false);
  const [hasConsent, setHasConsent] = useState(readNewsFeedConsent);
  const [newsLoading, setNewsLoading] = useState(false);
  const [newsError, setNewsError] = useState<string | null>(null);
  const [newsItems, setNewsItems] = useState<NewsItem[]>([]);
  const [feedVersion, setFeedVersion] = useState('');
  const [lastUpdated, setLastUpdated] = useState('');
  const [configured, setConfigured] = useState(false);
  const [hasUnread, setHasUnread] = useState(false);

  const fetchNews = useCallback(async () => {
    const cfg = getRestConfig();
    if (!cfg) {
      setNewsError(null);
      setConfigured(false);
      setNewsItems([]);
      setFeedVersion('');
      setLastUpdated('');
      setHasUnread(false);
      return;
    }
    setNewsLoading(true);
    setNewsError(null);
    try {
      const url = `${cfg.root}/llm-analytics/v1/news`;
      const res = await fetch(url, {
        headers: { 'X-WP-Nonce': cfg.nonce },
        credentials: 'same-origin',
      });
      const data = (await res.json()) as NewsApiResponse;
      if (data.consent_required) {
        setHasConsent(false);
        persistNewsFeedConsent(false);
        setNewsItems([]);
        setHasUnread(false);
        return;
      }
      if (!data.success) {
        setNewsError(data.error || __('Failed to load news', 'llmagnet-llm-txt-generator'));
        setNewsItems([]);
        setFeedVersion('');
        setLastUpdated('');
        setHasUnread(false);
        return;
      }
      setConfigured(!!data.configured);
      const fv = data.feedVersion || '';
      const items = data.items || [];
      setFeedVersion(fv);
      setLastUpdated(data.lastUpdated || '');
      setNewsItems(items);
      const last = getLastSeenFeedVersion();
      setHasUnread(!!fv && fv !== last && items.length > 0);
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : __('Network error', 'llmagnet-llm-txt-generator');
      setNewsError(msg);
      setHasUnread(false);
    } finally {
      setNewsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (hasConsent) {
      fetchNews();
    }
  }, [hasConsent, fetchNews]);

  useEffect(() => {
    const onConsent = (event: Event) => {
      const enabled = Boolean((event as CustomEvent<{ enabled?: boolean }>).detail?.enabled);
      setHasConsent(enabled);
      if (!enabled) {
        setNewsItems([]);
        setHasUnread(false);
      }
    };
    window.addEventListener(NEWS_FEED_CONSENT_EVENT, onConsent);
    return () => window.removeEventListener(NEWS_FEED_CONSENT_EVENT, onConsent);
  }, []);

  const handleMarkSeen = useCallback(() => {
    setHasUnread(false);
  }, []);

  const handleBellClick = useCallback(() => {
    if (!hasConsent) {
      setConsentOpen(true);
      return;
    }
    setNewsOpen(true);
  }, [hasConsent]);

  const handleApproveFeed = useCallback(async () => {
    setConsentSaving(true);
    try {
      const result = await updatePrivacySettings({ news_feed_enabled: true });
      const enabled = Boolean(result.news_feed_enabled);
      setHasConsent(enabled);
      persistNewsFeedConsent(enabled);
      setConsentOpen(false);
      if (enabled) {
        setNewsOpen(true);
      }
    } catch {
      setNewsError(__('Could not save your choice. Please try again.', 'llmagnet-llm-txt-generator'));
    } finally {
      setConsentSaving(false);
    }
  }, []);

  return (
    <div
      className="absolute top-0 right-0 left-0 w-full h-[58px] bg-white shadow-[0px_5.4px_10.79px_rgba(0,_0,_0,_0.03)] z-50"
      style={{ margin: 0, padding: 0 }}
    >
      <div className="flex items-center justify-between h-full px-5">
        <FullLogo pluginUrl={finalPluginUrl} />

        <div className="flex items-center gap-3">
          <div className="relative">
            <IconButton
              type="button"
              onClick={handleBellClick}
              size="icon"
              className="relative rounded-full text-gray-600 hover:bg-gray-100 hover:text-gray-900"
              aria-label={
                hasUnread
                  ? __('News and updates (unread items)', 'llmagnet-llm-txt-generator')
                  : __('News and updates', 'llmagnet-llm-txt-generator')
              }
            >
              <Bell className="w-5 h-5" strokeWidth={2} aria-hidden="true" />
              {hasUnread && (
                <span
                  className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500 ring-2 ring-white"
                  aria-hidden
                />
              )}
            </IconButton>
          </div>
          {topBarBadge && (
            topBarBadge.href ? (
              <a
                href={topBarBadge.href}
                className="rounded-full border border-gray-200 bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 no-underline hover:bg-gray-200"
              >
                {topBarBadge.label}
              </a>
            ) : (
              <span className="rounded-full border border-gray-200 bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700">
                {topBarBadge.label}
              </span>
            )
          )}
        </div>
      </div>

      <NewsFeedConsentDialog
        open={consentOpen}
        busy={consentSaving}
        onApprove={handleApproveFeed}
        onCancel={() => setConsentOpen(false)}
      />

      <NewsDrawer
        isOpen={newsOpen}
        onClose={() => setNewsOpen(false)}
        items={newsItems}
        loading={newsLoading}
        error={newsError}
        feedVersion={feedVersion}
        lastUpdated={lastUpdated}
        configured={configured}
        onMarkSeen={handleMarkSeen}
      />
    </div>
  );
}

function NewsFeedConsentDialog({
  open,
  busy,
  onApprove,
  onCancel,
}: {
  open: boolean;
  busy: boolean;
  onApprove: () => void;
  onCancel: () => void;
}) {
  const dialogRef = useRef<HTMLDivElement>(null);
  useFocusTrap(dialogRef, { active: open, onEscape: onCancel });
  useScrollLock(open);

  if (!open) {
    return null;
  }

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="llmagnet-news-consent-title"
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 100000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 16,
        background: 'rgba(15, 23, 42, 0.45)',
      }}
      onMouseDown={(e) => {
        if (e.target === e.currentTarget && !busy) {
          onCancel();
        }
      }}
    >
      <div
        ref={dialogRef}
        className="w-full max-w-md overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl"
        onMouseDown={(e) => e.stopPropagation()}
      >
        <div className="border-b border-gray-100 px-5 py-4">
          <h2 id="llmagnet-news-consent-title" className="text-base font-semibold text-gray-900">
            {__('Load news from an external source?', 'llmagnet-llm-txt-generator')}
          </h2>
        </div>
        <div className="space-y-3 px-5 py-4 text-sm leading-relaxed text-gray-600">
          <p>
            {__(
              'We load product news and notifications from an external LLMagnet feed. This is a server-side request from your WordPress site. No site URL or admin email is sent.',
              'llmagnet-llm-txt-generator',
            )}
          </p>
          <p>
            {__(
              'Approve to load these updates. We will remember this choice and will not ask again.',
              'llmagnet-llm-txt-generator',
            )}
          </p>
        </div>
        <div className="flex justify-end gap-2 border-t border-gray-100 px-5 py-4">
          <Button type="button" variant="outline" size="sm" onClick={onCancel} disabled={busy}>
            {__('Not now', 'llmagnet-llm-txt-generator')}
          </Button>
          <Button type="button" variant="default" size="sm" onClick={onApprove} disabled={busy}>
            {busy
              ? __('Saving…', 'llmagnet-llm-txt-generator')
              : __('Allow and load', 'llmagnet-llm-txt-generator')}
          </Button>
        </div>
      </div>
    </div>
  );
}