import { useState, useEffect, useCallback } from 'react';
import { ScreenLoader } from './screen-loader';
import { ReportPdfDownloadButton } from './report-pdf-download-button';
import { createPagesReportPdf } from '@/lib/report-pdf';
import { getSiteNameForReports } from '@/lib/site-name';
import { PageDrawer } from './page-drawer';
import { Button } from '@/components/ui/button';
import { SegmentedControl } from '@/components/ui/segmented-control';
import { readPageStatsResponse } from '@/lib/utils';
import { trackPageDrawerOpened } from '@/lib/mixpanel';
import { __, sprintf, _n } from '../lib/i18n';
import { defaultBotLogo, getBotLogos } from '../lib/bot-logos';

interface PageStat {
  page_path: string;
  page_title: string;
  page_url: string;
  bot_visits: number;
  clicks: number;
  ctr: number;
  bots: string[];
  post_id: number | null;
  visibility_score?: { score: number };
  never_visited?: boolean;
  coverage_window_days?: number;
}

type CoverageFilter = 'all' | 'never_visited';

function toSafeNumber(value: unknown, fallback = 0): number {
  const num = Number(value);
  return Number.isFinite(num) ? num : fallback;
}

function normalizePageStat(raw: any): PageStat {
  const pagePath = typeof raw?.page_path === 'string' ? raw.page_path : '';
  const pageUrl = typeof raw?.page_url === 'string' ? raw.page_url : '';
  const pageTitleFromApi = typeof raw?.page_title === 'string' ? raw.page_title : '';
  const pageTitle = pageTitleFromApi || pagePath || 'Untitled page';
  const bots = Array.isArray(raw?.bots)
    ? raw.bots.filter((bot: unknown): bot is string => typeof bot === 'string' && bot.length > 0)
    : [];
  const visibilityScoreRaw = toSafeNumber(raw?.visibility_score?.score, NaN);

  return {
    page_path: pagePath,
    page_title: pageTitle,
    page_url: pageUrl,
    bot_visits: toSafeNumber(raw?.bot_visits),
    clicks: toSafeNumber(raw?.clicks),
    ctr: toSafeNumber(raw?.ctr),
    bots,
    post_id: raw?.post_id == null ? null : toSafeNumber(raw.post_id),
    visibility_score: Number.isFinite(visibilityScoreRaw) ? { score: visibilityScoreRaw } : undefined,
    never_visited: Boolean(raw?.never_visited),
    coverage_window_days: raw?.coverage_window_days == null ? undefined : toSafeNumber(raw.coverage_window_days),
  };
}

interface PagesAnalyticsProps {
  apiRoot: string;
  apiNamespace: string;
  pluginUrl: string;
}

// Number of items to show per page
const ITEMS_PER_PAGE = 30;

// Visibility Score Circle Component
function VisibilityScoreCircle({ score }: { score?: number }) {
  if (score === undefined || score === null) {
    return (
      <div className="flex items-center justify-center">
        <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
          <span className="text-xs text-gray-400">-</span>
        </div>
      </div>
    );
  }

  const getColor = (value: number) => {
    if (value >= 80) return { stroke: '#10b981', text: 'text-green-600', bg: 'bg-green-50' };
    if (value >= 60) return { stroke: '#f59e0b', text: 'text-yellow-600', bg: 'bg-yellow-50' };
    return { stroke: '#ef4444', text: 'text-red-600', bg: 'bg-red-50' };
  };

  const color = getColor(score);
  const circumference = 2 * Math.PI * 16;
  const offset = circumference - (score / 100) * circumference;

  return (
    <div className="flex items-center justify-center">
      <div className={`relative w-12 h-12 ${color.bg} rounded-full flex items-center justify-center`}>
        <svg className="w-12 h-12 transform -rotate-90">
          <circle
            cx="24"
            cy="24"
            r="16"
            stroke="#e5e7eb"
            strokeWidth="3"
            fill="none"
          />
          <circle
            cx="24"
            cy="24"
            r="16"
            stroke={color.stroke}
            strokeWidth="3"
            fill="none"
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            strokeLinecap="round"
            style={{ transition: 'stroke-dashoffset 0.5s ease' }}
          />
        </svg>
        <div className={`absolute inset-0 flex items-center justify-center ${color.text} text-xs font-bold`}>
          {score}
        </div>
      </div>
    </div>
  );
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function PagesAnalytics({ apiRoot, apiNamespace, pluginUrl }: PagesAnalyticsProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [pageStats, setPageStats] = useState<PageStat[]>([]);
  const [displayCount, setDisplayCount] = useState(ITEMS_PER_PAGE);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [days, setDays] = useState(30);
  const [coverage, setCoverage] = useState<CoverageFilter>('all');
  const [totalCount, setTotalCount] = useState<number | null>(null);
  const [scanCapped, setScanCapped] = useState(false);

  // Drawer state
  const [drawerPostId, setDrawerPostId] = useState<number | null>(null);
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  // Keep ?llmagnet_drawer=<post_id> in sync so drawer views have shareable URLs
  const syncDrawerParam = (postId: number | null) => {
    const url = new URL(window.location.href);
    if (postId) {
      url.searchParams.set('llmagnet_drawer', String(postId));
    } else {
      url.searchParams.delete('llmagnet_drawer');
    }
    window.history.replaceState(window.history.state, '', url.toString());
  };

  // Drawer deep-linking: ?llmagnet_drawer=<post_id> opens that post's drawer
  // on load (adoption plan Phase 0.3). The drawer fetches its own data by id,
  // so the row doesn't need to be in the visible table page.
  useEffect(() => {
    const param = new URLSearchParams(window.location.search).get('llmagnet_drawer');
    const postId = param ? Number(param) : NaN;
    if (Number.isInteger(postId) && postId > 0) {
      setDrawerPostId(postId);
      setIsDrawerOpen(true);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const botLogos = getBotLogos();
  const defaultLogo = defaultBotLogo();

  useEffect(() => {
    setDisplayCount(ITEMS_PER_PAGE);
    fetchPageStats(true);
  }, [days, coverage]);

  const fetchPageStats = async (reset = true) => {
    try {
      setIsLoading(true);

      // Check if wpApiSettings is available
      if (!(window as any).wpApiSettings || !(window as any).wpApiSettings.root) {
        throw new Error('WordPress REST API settings not available. Please refresh the page.');
      }

      const currentOffset = reset ? 0 : pageStats.length;
      const params = new URLSearchParams({
        days: String(days),
        limit: String(ITEMS_PER_PAGE),
        offset: String(coverage === 'never_visited' ? currentOffset : 0),
        coverage,
      });
      const apiUrl = `${apiRoot}${apiNamespace}/page-stats?${params.toString()}`;

      const response = await fetch(apiUrl, {
        headers: {
          'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
        },
        credentials: 'same-origin',
      });

      if (!response.ok) {
        let errorText = '';
        try {
          errorText = await response.text();
        } catch (e) {
          // Could not read error response
        }
        throw new Error(`HTTP ${response.status}: ${errorText || 'Unknown error'}`);
      }

      const data = await response.json();

      // Handle error response from API
      if (data.error) {
        throw new Error(data.message || 'API returned an error');
      }

      const envelope = readPageStatsResponse<any>(data);
      const statsArray: PageStat[] = envelope.pages.map(normalizePageStat);

      if (coverage === 'never_visited') {
        setTotalCount(envelope.total);
        setScanCapped(Boolean((data as any)?.scan_capped));
        setPageStats(reset ? statsArray : [...pageStats, ...statsArray]);
      } else {
        setTotalCount(null);
        setScanCapped(false);
        setPageStats(statsArray);
      }
      setError(null);
    } catch (err: any) {
      console.error('Error fetching page stats:', err);
      const errorMessage = err.message || 'Please try again later.';
      setError(sprintf(__('Failed to load page statistics: %s', 'llmagnet-llm-txt-generator'), errorMessage));
    } finally {
      setIsLoading(false);
    }
  };

  const handlePageClick = (postId: number | null, pageTitle: string) => {
    if (!postId) return;
    setDrawerPostId(postId);
    setIsDrawerOpen(true);
    syncDrawerParam(postId);
    trackPageDrawerOpened(postId, pageTitle);
  };

  const handleDrawerClose = () => {
    setIsDrawerOpen(false);
    syncDrawerParam(null);
    // Clear post ID after animation completes
    setTimeout(() => {
      setDrawerPostId(null);
    }, 300);
  };

  const buildPagesPdf = useCallback(async () => {
    const rows = pageStats.map((p) => ({
      page: (p.page_title || p.page_path).slice(0, 120),
      visits: toSafeNumber(p.bot_visits).toLocaleString(),
      clicks: toSafeNumber(p.clicks).toLocaleString(),
      ctr: `${toSafeNumber(p.ctr).toFixed(1)}%`,
      models: Array.isArray(p.bots) && p.bots.length ? p.bots.join(', ') : '—',
    }));
    return createPagesReportPdf({
      pluginUrl,
      siteName: getSiteNameForReports(),
      reportTitle: 'Pages analytics',
      metaLines: [
        `Total pages in report: ${pageStats.length}`,
        `Time range: Last ${days} days`,
        'Includes all pages with recorded LLM bot traffic.',
      ],
      rows,
    });
  }, [pluginUrl, pageStats, days]);

  const isNeverVisitedMode = coverage === 'never_visited';

  if (isLoading) {
    return <ScreenLoader variant="section" />;
  }

  if (error) {
    return (
      <div className="p-4 text-red-600">
        <p>{error}</p>
        <Button onClick={() => fetchPageStats(true)} variant="default" size="sm" className="mt-2">
          {__('Try Again', 'llmagnet-llm-txt-generator')}
        </Button>
      </div>
    );
  }

  const isEmpty = pageStats.length === 0;
  const displayedPages = isNeverVisitedMode
    ? pageStats
    : pageStats.slice(0, displayCount);
  const hasMorePages = !isEmpty && (isNeverVisitedMode
    ? pageStats.length < (totalCount ?? pageStats.length)
    : pageStats.length > displayCount);

  const handleLoadMore = () => {
    if (isNeverVisitedMode) {
      setIsLoadingMore(true);
      fetchPageStats(false).finally(() => setIsLoadingMore(false));
      return;
    }
    setIsLoadingMore(true);
    setTimeout(() => {
      setDisplayCount(prev => prev + ITEMS_PER_PAGE);
      setIsLoadingMore(false);
    }, 300);
  };

  return (
    <div className="pages-analytics-container" style={{ position: 'relative', maxWidth: '1200px', margin: 'auto', padding: '0 1.5rem' }}>
      {/* Pages Table - Clean design matching pages-overview */}
      <div className="bg-white p-6" style={{ boxShadow: '0px 5.4px 10.79px 0px rgba(0, 0, 0, 0.03)' }}>
        {/* Header — title and description only; filters stay outside the frost zone */}
        <div className="mb-4">
          <h2 className="text-2xl font-bold mb-2">{__('Pages', 'llmagnet-llm-txt-generator')}</h2>
          <p className="text-gray-600">
            {isNeverVisitedMode
              ? sprintf(
                  __('Published pages with no LLM bot visits in the last %d days.', 'llmagnet-llm-txt-generator'),
                  days
                )
              : __('View which pages on your site have received traffic from LLM bots.', 'llmagnet-llm-txt-generator')}
          </p>
          {isNeverVisitedMode && totalCount != null && totalCount > 0 && (
            <p className="text-sm text-amber-700 mt-1">
              {sprintf(
                _n('%d page never visited', '%d pages never visited', totalCount, 'llmagnet-llm-txt-generator'),
                totalCount
              )}
              {scanCapped
                ? ` · ${__('Count may be incomplete on very large sites.', 'llmagnet-llm-txt-generator')}`
                : ''}
            </p>
          )}
        </div>

        <div className="mb-6 flex flex-wrap items-center justify-end gap-2">
          <SegmentedControl
            options={[
              { value: 'all', label: __('All traffic', 'llmagnet-llm-txt-generator') },
              { value: 'never_visited', label: __('Never visited', 'llmagnet-llm-txt-generator') },
            ]}
            value={coverage}
            onChange={(value) => setCoverage(value as CoverageFilter)}
            size="sm"
          />
          {pageStats.length > 0 && (
            <ReportPdfDownloadButton
              reportKind="pages"
              reportLabel="Pages Analytics"
              buildPdf={buildPagesPdf}
              className="shrink-0"
            />
          )}
          <select
            value={days}
            onChange={(e) => setDays(Number(e.target.value))}
            className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
            style={{ border: '1px solid #d1d5db' }}
          >
            <option value={7}>{__('Last 7 days', 'llmagnet-llm-txt-generator')}</option>
            <option value={30}>{__('Last 30 days', 'llmagnet-llm-txt-generator')}</option>
            <option value={90}>{__('Last 90 days', 'llmagnet-llm-txt-generator')}</option>
          </select>
        </div>

        <div className="relative w-full">
          <table className="w-full bg-white table-fixed" style={{ borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th scope="col" className="py-3 px-4 text-left text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '35%' }}>{__('Pages', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-3 px-4 text-center text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '9%' }}>{__('Score', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-3 px-4 text-right text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '12%' }}>{__('Bot Visits', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-3 px-4 text-right text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '10%' }}>{__('Clicks', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-3 px-4 text-right text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '8%' }}>{__('CTR', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-3 px-4 text-right text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '26%' }}>{__('Models', 'llmagnet-llm-txt-generator')}</th>
              </tr>
            </thead>
            <tbody>
              {isEmpty ? (
                <tr>
                  <td colSpan={6} className="py-16 text-center" style={{ borderBottom: '1px solid #F2D7F2' }}>
                    <p className="text-gray-500 text-sm">
                      {isNeverVisitedMode
                        ? sprintf(
                            __('Every tracked page received at least one LLM bot visit in the last %d days.', 'llmagnet-llm-txt-generator'),
                            days
                          )
                        : __('No bot visits', 'llmagnet-llm-txt-generator')}
                    </p>
                    {!isNeverVisitedMode && (
                      <p className="text-gray-400 text-xs mt-2">
                        {__('Bot visits will be automatically logged when LLM crawlers access your pages.', 'llmagnet-llm-txt-generator')}
                      </p>
                    )}
                  </td>
                </tr>
              ) : displayedPages.map((page, index) => (
                <tr
                  key={`${page.page_path}-${index}`}
                  className="hover:bg-gray-50 transition-colors"
                  onClick={() => handlePageClick(page.post_id, page.page_title)}
                  style={{ cursor: page.post_id ? 'pointer' : 'default' }}
                >
                  <td className="py-3 px-4" style={{ borderBottom: '1px solid #F2D7F2', width: '35%', maxWidth: 0 }}>
                    <div className="group">
                      <div className="font-medium text-gray-900 truncate" title={page.page_title || page.page_path || 'Untitled page'} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {page.page_title}
                        {page.never_visited && (
                          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-50 text-amber-800 border border-amber-200">
                            {sprintf(__('No visits · %dd', 'llmagnet-llm-txt-generator'), page.coverage_window_days ?? days)}
                          </span>
                        )}
                      </div>
                      <div className="text-xs text-gray-500 flex items-center gap-2" style={{ overflow: 'hidden' }}>
                        {page.page_path === '/' ? (
                          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
                            {__('Site Homepage', 'llmagnet-llm-txt-generator')}
                          </span>
                        ) : (
                          <span className="truncate" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 'calc(100% - 20px)' }} title={page.page_url}>{page.page_path}</span>
                        )}
                        <a
                          href={page.page_url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
                          title={__('Open in new tab', 'llmagnet-llm-txt-generator')}
                          onClick={(e) => e.stopPropagation()}
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-3 w-3 text-gray-400 hover:text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth={2}
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                            />
                          </svg>
                        </a>
                      </div>
                    </div>
                  </td>
                  <td className="py-3 px-4" style={{ borderBottom: '1px solid #F2D7F2', width: '9%' }}>
                    <VisibilityScoreCircle score={page.visibility_score?.score} />
                  </td>
                  <td className="py-3 px-4 text-right text-sm text-gray-800" style={{ borderBottom: '1px solid #F2D7F2', width: '12%' }}>
                    {toSafeNumber(page.bot_visits).toLocaleString()}
                  </td>
                  <td className="py-3 px-4 text-right text-sm text-gray-800" style={{ borderBottom: '1px solid #F2D7F2', width: '10%' }}>
                    {toSafeNumber(page.clicks).toLocaleString()}
                  </td>
                  <td className="py-3 px-4 text-right text-sm text-gray-800" style={{ borderBottom: '1px solid #F2D7F2', width: '8%' }}>
                    {toSafeNumber(page.ctr).toFixed(1)}%
                  </td>
                  <td className="py-3 px-4 text-right" style={{ borderBottom: '1px solid #F2D7F2', width: '26%' }}>
                    <div className="flex items-center justify-end">
                      {(Array.isArray(page.bots) ? page.bots : []).slice(0, 5).map((botName, botIndex) => {
                        const logoUrl = botLogos[botName] || defaultLogo;
                        return (
                          <img
                            key={`${botName}-${botIndex}`}
                            src={logoUrl}
                            alt={botName}
                            className="h-6 w-6 rounded-full object-cover cursor-pointer"
                            title={botName}
                            loading="lazy"
                            style={{
                              marginLeft: botIndex === 0 ? 0 : '-6px',
                              zIndex: botIndex,
                              transition: 'transform 0.3s ease-in-out',
                              border: '0.5px solid #e8e3de',
                            }}
                            onMouseEnter={(e) => {
                              (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
                              (e.currentTarget as HTMLElement).style.zIndex = '10';
                            }}
                            onMouseLeave={(e) => {
                              (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
                              (e.currentTarget as HTMLElement).style.zIndex = String(botIndex);
                            }}
                            onError={(e) => {
                              const target = e.target as HTMLImageElement;
                              if (target.src !== defaultLogo) {
                                target.src = defaultLogo;
                              }
                            }}
                          />
                        );
                      })}
                      {(Array.isArray(page.bots) ? page.bots.length : 0) > 5 && (
                        <div
                          className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-100 border-2 border-white text-xs font-medium text-gray-600 cursor-pointer"
                          style={{
                            marginLeft: '-6px',
                            zIndex: 5,
                            transition: 'transform 0.3s ease-in-out',
                          }}
                          onMouseEnter={(e) => {
                            (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
                            (e.currentTarget as HTMLElement).style.zIndex = '10';
                          }}
                          onMouseLeave={(e) => {
                            (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
                            (e.currentTarget as HTMLElement).style.zIndex = '5';
                          }}
                        >
                          +{(Array.isArray(page.bots) ? page.bots.length : 0) - 5}
                        </div>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* Load More Button */}
          {hasMorePages && (
            <div className="flex justify-center mt-6 pb-2">
              <Button
                onClick={handleLoadMore}
                disabled={isLoadingMore}
                variant="secondary"
                size="lg"
              >
                {isLoadingMore ? (
                  <>
                    <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    {__('Loading...', 'llmagnet-llm-txt-generator')}
                  </>
                ) : (
                    <>
                      {__('Load More', 'llmagnet-llm-txt-generator')}
                      <span className="text-sm text-gray-500">
                        ({isNeverVisitedMode
                          ? sprintf(__('%1$d of %2$d', 'llmagnet-llm-txt-generator'), pageStats.length, totalCount ?? pageStats.length)
                          : sprintf(__('%1$d of %2$d', 'llmagnet-llm-txt-generator'), displayCount, pageStats.length)})
                      </span>
                    </>
                )}
              </Button>
            </div>
          )}

          {/* Show count info when all loaded */}
          {!hasMorePages && pageStats.length > ITEMS_PER_PAGE && (
            <div className="text-center mt-4 text-sm text-gray-500">
              {sprintf(__('Showing all %d pages', 'llmagnet-llm-txt-generator'), pageStats.length)}
            </div>
          )}

        </div>
      </div>

      {/* Page Details Drawer */}
      <PageDrawer
        postId={drawerPostId}
        isOpen={isDrawerOpen}
        onClose={handleDrawerClose}
        apiRoot={apiRoot}
        apiNamespace={apiNamespace}
        rangeDays={days}
        onPageUpdated={() => fetchPageStats(true)}
      />
    </div>
  );
}