import { useState, Suspense } from 'react';
import { useScrollLock } from '../hooks/use-scroll-lock';
import { TopPagesProducts } from './top-pages-products';
import { MentionsOverview } from './mentions-overview';
import { LoadingSpinner } from './screen-loader';
import { FirstWeekEmptyState } from './first-week-empty-state';
import { LazyBotTrafficChart } from '@/lib/load-bot-traffic-chart';
import { ChevronRight, ChevronDown, Radar, Circle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { VisibilityTimeline } from './visibility-timeline';
import { trackVisibilityScoreRefreshed, setUserProperty } from '../lib/mixpanel';
import type { AnalyticsData } from '../lib/mixpanel';
import { __, sprintf, _n } from '../lib/i18n';
import { OverviewEngagementCards } from './overview-engagement-cards';
import { VisibilityScoreRadar } from './visibility-score-radar';
import { VisibilityScoreBreakdownModal } from './visibility-score-breakdown-modal';

type RecommendationPriority = 'critical' | 'warning' | 'tip';

interface RecommendationItem {
  id: string;
  title: string;
  description: string;
  priority: RecommendationPriority;
  actionLabel?: string;
  actionType?: 'button' | 'link';
  actionHandler?: () => void;
  actionUrl?: string;
}

interface VisibilityScoreBreakdown {
  score: number;
  weight: number;
  weighted_contribution: number;
  details: string;
}

interface VisibilityScoreData {
  score: number;
  frequency_score: number;
  visit_type_score: number;
  visit_count_score: number;
  page_status_score: number;
  url_type_score: number;
  total_visits: number;
  unique_pages: number;
  range_days: number;
  breakdown: {
    frequency: VisibilityScoreBreakdown;
    visit_type: VisibilityScoreBreakdown;
    visit_count: VisibilityScoreBreakdown;
    page_status: VisibilityScoreBreakdown;
    url_type: VisibilityScoreBreakdown;
  };
}

interface DashboardData {
  rootPath: string;
  lastGenerated: string | null;
  llmsTxtExists: boolean;
  llmsTxtUrl: string;
  llmsTxtSize?: string;
  postsCount: number;
  markdownCount: number;
  itemsInLlms: number;
  totalAllPostTypes: number;
  botVisits30Days: number;
  botClicks30Days: number;
  visibilityScore?: VisibilityScoreData;
  imageCount: number;
  imagesWithoutAlt: Array<{
    id: number;
    url: string;
    type: string;
    post_id: number;
    post_title: string;
    preview_url: string;
  }>;
  postTypeBreakdown?: Array<{
    name: string;
    label: string;
    total: number;
    selected: number;
    in_llms?: number;
  }>;
  settings: {
    post_types: string[];
    full_content: boolean;
    days_to_include: number;
    delete_on_uninstall: boolean;
    include_images?: boolean;
    llm_response_images?: Array<{
      id: number;
      position: 'before' | 'after';
    }>;
    // Keep old fields for backward compatibility
    llm_response_image_id?: number;
    llm_response_image_position?: 'before' | 'after';
  };
  postTypes: Array<{
    name: string;
    label: string;
  }>;
  imageData?: {
    id: number;
    url: string;
    preview_url: string;
    width?: number;
    height?: number;
  } | null;
  woocommerce?: {
    active: boolean;
    version: string | null;
    product_count: number;
    currency: string;
    currency_symbol: string;
  };
  llmsFullInfo?: {
    exists: boolean;
    size: number;
    size_formatted: string;
    post_count: number;
    warning: number | null;
  };
  pluginVersion: string;
  wordpressVersion: string;
  robotsTxtStatus?: {
    has_physical_file: boolean;
    has_llms_reference: boolean;
    injection_method: 'filter' | 'file' | 'none';
    robots_txt_url: string;
  };
  onboarding?: {
    steps: {
      first_llm_visit: boolean;
      llms_txt: boolean;
      email_reports: boolean;
      robots_txt: boolean;
    };
    completed: boolean;
    dismissed: boolean;
    step_links: {
      first_llm_visit: string;
      llms_txt: string;
      email_reports: string;
      robots_txt: string;
    };
    step_prompts: {
      first_llm_visit_primary: string;
      first_llm_visit_secondary: string;
    };
    site_url: string;
  };
  overviewStarRating?: number;
  analyticsData?: AnalyticsData;
}

interface OverviewProps {
  data: DashboardData;
  onGenerateNow: () => Promise<{ success: boolean; message: string; timestamp?: string }>;
  onboardingDismissed?: boolean;
  onboardingSteps?: {
    first_llm_visit: boolean;
    llms_txt: boolean;
    email_reports: boolean;
    robots_txt: boolean;
  };
  onReopenOnboarding?: () => void;
}

export function Overview({ data, onGenerateNow, onboardingDismissed, onReopenOnboarding }: OverviewProps) {
  // Generate functionality - kept for potential future use in the redesigned page
  const [generateMessage, setGenerateMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [isGeneratingNow, setIsGeneratingNow] = useState(false);
  const [currentLlmsTxtExists, setCurrentLlmsTxtExists] = useState(data.llmsTxtExists);
  
  // Get visibility score from backend data or fallback to simple calculation
  const getVisibilityScore = (): number => {
    // Return test score if test mode is enabled
    if (localStorage.getItem('llmagnet_test') === 'true') {
      return 80;
    }
    
    // Use the refreshed score if available
    if (currentVisibilityScore && typeof currentVisibilityScore.score === 'number') {
      return currentVisibilityScore.score;
    }
    
    // Fallback to old simple calculation if new data not available
    if (data.totalAllPostTypes === 0) return 0;
    return Math.round((data.itemsInLlms / Math.max(data.totalAllPostTypes, 1)) * 100);
  };
  
  // State for showing score breakdown tooltip
  const [showScoreBreakdown, setShowScoreBreakdown] = useState(false);
  const [scoreChartView, setScoreChartView] = useState<'circle' | 'radar'>('circle');
  useScrollLock(showScoreBreakdown);
  
  // State for visibility score refresh
  const [isRefreshingScore, setIsRefreshingScore] = useState(false);
  const [currentVisibilityScore, setCurrentVisibilityScore] = useState<VisibilityScoreData | null>(data.visibilityScore || null);
  
  // Function to refresh visibility score
  const refreshVisibilityScore = async () => {
    trackVisibilityScoreRefreshed();
    setIsRefreshingScore(true);
    try {
      const apiRoot = (window as any).wpApiSettings?.root || '';
      const nonce = (window as any).wpApiSettings?.nonce || '';
      
      const response = await fetch(`${apiRoot}llm-analytics/v1/visibility-score/calculate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': nonce,
        },
        body: JSON.stringify({ range_days: 30 }),
      });
      
      if (response.ok) {
        const result = await response.json();
        if (result.score_data) {
          setCurrentVisibilityScore(result.score_data);
          setUserProperty({ visibility_score: result.score_data.total_score ?? result.score_data.score });
        }
      }
    } catch (error) {
      console.error('Failed to refresh visibility score:', error);
    } finally {
      setIsRefreshingScore(false);
    }
  };
  
  const refreshLlmsTxtExists = async (): Promise<boolean> => {
    try {
      const response = await fetch(`/llms.txt?t=${Date.now()}`, { cache: 'no-store' });
      if (!response.ok) {
        setCurrentLlmsTxtExists(false);
        return false;
      }

      const content = await response.text();
      const exists = content.trim().length > 0;
      setCurrentLlmsTxtExists(exists);
      return exists;
    } catch (error) {
      console.error('Failed to verify llms.txt after generation:', error);
      setCurrentLlmsTxtExists(false);
      return false;
    }
  };

  const handleGenerateNow = async () => {
    try {
      const result = await onGenerateNow();
      setGenerateMessage({
        type: result.success ? 'success' : 'error',
        text: result.message
      });
      
      // Clear message after 5 seconds
      setTimeout(() => setGenerateMessage(null), 5000);
    } catch (error) {
      setGenerateMessage({
        type: 'error',
        text: __('An error occurred while generating files.', 'llmagnet-llm-txt-generator')
      });
    }
  };

  const handleGenerateRecommendation = async () => {
    setIsGeneratingNow(true);
    try {
      await handleGenerateNow();
      await new Promise((resolve) => setTimeout(resolve, 600));
      await refreshLlmsTxtExists();
    } finally {
      setIsGeneratingNow(false);
    }
  };


  
  // State for global success message
  const [globalSuccessMessage, setGlobalSuccessMessage] = useState('');

  // Robots.txt status
  const [robotsStatus, setRobotsStatus] = useState(data.robotsTxtStatus);
  const [isFixingRobots, setIsFixingRobots] = useState(false);

  const handleFixRobotsTxt = async () => {
    setIsFixingRobots(true);
    try {
      const apiRoot = (window as any).wpApiSettings?.root || '';
      const nonce = (window as any).wpApiSettings?.nonce || '';
      const response = await fetch(`${apiRoot}llm-analytics/v1/robots-inject`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': nonce },
      });
      if (response.ok) {
        const result = await response.json();
        if (result.status) {
          setRobotsStatus(result.status);
        }
        if (result.success) {
          setGlobalSuccessMessage(__('robots.txt now includes the llms.txt reference.', 'llmagnet-llm-txt-generator'));
        } else if (result.status?.has_physical_file) {
          setGlobalSuccessMessage(__('A physical robots.txt is on this site. Copy the llms.txt block into that file.', 'llmagnet-llm-txt-generator'));
        }
        setTimeout(() => setGlobalSuccessMessage(''), 5000);
      }
    } catch (err) {
      console.error('Failed to fix robots.txt:', err);
    } finally {
      setIsFixingRobots(false);
    }
  };
  
  const visibilityScore = getVisibilityScore();
  const scoreBreakdown = currentVisibilityScore?.breakdown || data.visibilityScore?.breakdown;
  const contentSettingsUrl = '/wp-admin/admin.php?page=llmagnet-ai-seo-content-settings';
  const agentReadyUrl = '/wp-admin/admin.php?page=llmagnet-ai-seo-agent-ready';

  const recommendations: RecommendationItem[] = [
    ...(!currentLlmsTxtExists
      ? [
          {
            id: 'R01',
            title: __('Generate llms.txt', 'llmagnet-llm-txt-generator'),
            description:
              __('Your llms.txt file is not available yet, so AI crawlers may miss your content.', 'llmagnet-llm-txt-generator'),
            priority: 'critical' as const,
            actionLabel: __('Generate Now', 'llmagnet-llm-txt-generator'),
            actionType: 'button' as const,
            actionHandler: handleGenerateRecommendation,
          },
        ]
      : []),
    ...(robotsStatus && !robotsStatus.has_llms_reference
      ? [
          {
            id: 'R04',
            title: __('Add llms.txt to robots.txt', 'llmagnet-llm-txt-generator'),
            description:
              __('Some crawlers use robots.txt to discover llms.txt. Add the reference to improve discovery.', 'llmagnet-llm-txt-generator'),
            priority: 'warning' as const,
            actionLabel: __('Fix Now', 'llmagnet-llm-txt-generator'),
            actionType: 'button' as const,
            actionHandler: handleFixRobotsTxt,
          },
        ]
      : []),
    ...(data.botVisits30Days <= 0
      ? [
          {
            id: 'R03',
            title: __('No AI bot traffic in 30 days', 'llmagnet-llm-txt-generator'),
            description:
              __('We have not detected AI bot visits yet. Publish more crawlable content and regenerate llms.txt.', 'llmagnet-llm-txt-generator'),
            priority: 'warning' as const,
            actionLabel: __('Open Content Settings', 'llmagnet-llm-txt-generator'),
            actionType: 'link' as const,
            actionUrl: contentSettingsUrl,
          },
        ]
      : []),
    ...(!data.settings.full_content
      ? [
          {
            id: 'R05',
            title: __('Full content export is off', 'llmagnet-llm-txt-generator'),
            description:
              __('Turn on Full Content to provide richer context to AI crawlers in your exported content.', 'llmagnet-llm-txt-generator'),
            priority: 'warning' as const,
            actionLabel: __('Enable in Settings', 'llmagnet-llm-txt-generator'),
            actionType: 'link' as const,
            actionUrl: contentSettingsUrl,
          },
        ]
      : []),
  ]
    .sort((a, b) => {
      const priorityOrder: Record<RecommendationPriority, number> = {
        critical: 0,
        warning: 1,
        tip: 2,
      };
      return priorityOrder[a.priority] - priorityOrder[b.priority];
    })
    .slice(0, 3);

  const getVisibilityStatusInfo = (score: number) => {
    if (score >= 90) {
      return {
        label: __('Excellent', 'llmagnet-llm-txt-generator'),
        message: __("Great job! Your site is well optimized for AI Search Engines.", 'llmagnet-llm-txt-generator'),
        indicatorColor: 'bg-green-500',
      };
    }
    if (score >= 75) {
      return {
        label: __('Good', 'llmagnet-llm-txt-generator'),
        message: __("You're doing well, but there's room for improvement.", 'llmagnet-llm-txt-generator'),
        indicatorColor: 'bg-lime-500',
      };
    }
    if (score >= 50) {
      return {
        label: __('Needs Improvement', 'llmagnet-llm-txt-generator'),
        message: __("You're missing opportunities to reach users through AI Search Engines.", 'llmagnet-llm-txt-generator'),
        indicatorColor: 'bg-[#D93025]',
      };
    }
    return {
      label: __('Needs Attention', 'llmagnet-llm-txt-generator'),
      message: __("You're missing opportunities to reach users through AI Search Engines.", 'llmagnet-llm-txt-generator'),
      indicatorColor: 'bg-red-500',
    };
  };

  const visibilityStatus = getVisibilityStatusInfo(visibilityScore);

  /** Priority is conveyed by a small square indicator (same motif as the visibility status card). */
  const getRecommendationStyles = (priority: RecommendationPriority) => {
    if (priority === 'critical') {
      return { indicator: 'bg-rose-500' };
    }
    if (priority === 'warning') {
      return { indicator: 'bg-amber-500' };
    }
    return { indicator: 'bg-[#7c3aed]' };
  };

  const recommendationPriorityLabel: Record<RecommendationPriority, string> = {
    critical: __('High priority', 'llmagnet-llm-txt-generator'),
    warning: __('Recommended', 'llmagnet-llm-txt-generator'),
    tip: __('Suggestion', 'llmagnet-llm-txt-generator'),
  };

  /** Single open accordion panel; all collapsed on load for a compact column. */
  const [openRecommendationId, setOpenRecommendationId] = useState<string | null>(null);

  const toggleRecommendation = (id: string) => {
    setOpenRecommendationId((prev) => (prev === id ? null : id));
  };

  return (
    <div className="space-y-6" style={{ maxWidth: '1200px', margin: 'auto', padding: '25px', height: '100%', width: '100%' }}>
      {/* Global success message */}
      <FirstWeekEmptyState
        llmsTxtExists={currentLlmsTxtExists}
        robotsHasLlmsReference={robotsStatus?.has_llms_reference ?? false}
        botVisits30Days={data.botVisits30Days}
        contentSettingsUrl={contentSettingsUrl}
        agentReadyUrl={agentReadyUrl}
      />

      {globalSuccessMessage && (
        <div className="bg-green-50 border border-green-200 text-green-700 p-4 rounded-md mb-4 flex items-center justify-between">
          <div className="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
            </svg>
            <span>{globalSuccessMessage}</span>
          </div>
          <button 
            onClick={() => setGlobalSuccessMessage('')}
            className="text-green-700 hover:text-green-800"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
            </svg>
          </button>
        </div>
      )}
      
      {/* Setup Guide Banner - shown when onboarding was dismissed but not completed */}
      {onboardingDismissed && data.onboarding && (() => {
        const stepLabels = [
          'llms.txt',
          'robots.txt',
          __('LLM visit', 'llmagnet-llm-txt-generator'),
        ];
        const stepKeys = ['llms_txt', 'robots_txt', 'first_llm_visit'] as const;
        const doneCount = stepKeys.filter((key) => data.onboarding!.steps[key]).length;
        return (
          <div
            style={{
              background: 'linear-gradient(135deg, #1B0C27 0%, #2D1245 100%)',
              borderRadius: 16,
              padding: '14px 18px',
              border: '1px solid rgba(213,136,252,0.18)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: 12,
              boxShadow: '0 4px 24px rgba(0,0,0,0.18)',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
              {/* Icon */}
              <div
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 10,
                  background: 'rgba(213,136,252,0.15)',
                  border: '1px solid rgba(213,136,252,0.25)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 11l3 3L22 4" stroke="#D588FC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" stroke="#D588FC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>

              {/* Text + steps */}
              <div style={{ minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ color: '#FFFFFF', fontSize: 13, fontWeight: 600, fontFamily: '"General Sans", sans-serif', whiteSpace: 'nowrap' }}>
                    {doneCount === 0
                      ? __("You haven't started setup yet", 'llmagnet-llm-txt-generator')
                      : sprintf(__('Setup %1$d/3 complete', 'llmagnet-llm-txt-generator'), doneCount)}
                  </span>
                  {/* Step dots */}
                  <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                    {stepKeys.map((key) => (
                      <div
                        key={key}
                        title={stepLabels[stepKeys.indexOf(key)]}
                        style={{
                          width: 8,
                          height: 8,
                          borderRadius: '50%',
                          background: data.onboarding!.steps[key] ? '#D588FC' : 'rgba(255,255,255,0.18)',
                          transition: 'background 200ms',
                        }}
                      />
                    ))}
                  </div>
                </div>
                <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 12, margin: 0, fontFamily: '"General Sans", sans-serif' }}>
                  {__('Finish setup to get discovered by AI assistants', 'llmagnet-llm-txt-generator')}
                </p>
              </div>
            </div>

            {/* CTA */}
            <button
              type="button"
              onClick={onReopenOnboarding}
              style={{
                flexShrink: 0,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
                padding: '8px 16px',
                borderRadius: 10,
                background: 'linear-gradient(140deg, #fff 21%, #D588FC 68%, #FF49D4 100%)',
                border: 'none',
                cursor: 'pointer',
                color: '#1B0C27',
                fontSize: 13,
                fontWeight: 600,
                fontFamily: '"General Sans", sans-serif',
                boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
                transition: 'opacity 150ms',
                whiteSpace: 'nowrap',
              }}
              onMouseEnter={e => (e.currentTarget.style.opacity = '0.88')}
              onMouseLeave={e => (e.currentTarget.style.opacity = '1')}
            >
              {doneCount === 0 ? __('Start setup', 'llmagnet-llm-txt-generator') : __('Continue setup', 'llmagnet-llm-txt-generator')}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>
        );
      })()}

      {/* Generate Message Section */}
      {generateMessage && (
        <div className="mb-4">
          <div className={`px-4 py-3 rounded-md text-sm ${
            generateMessage.type === 'success' 
              ? 'bg-green-50 text-green-800 border border-green-200'
              : 'bg-red-50 text-red-800 border border-red-200'
          }`}>
            {generateMessage.text}
          </div>
        </div>
      )}

      {/* Mentions Overview */}
      <MentionsOverview
        apiRoot={(window as any).wpApiSettings?.root || ''}
        apiNamespace="llm-analytics/v1"
      />

      {/* Row 1: Visibility Score + Visibility Score Over Time */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[465px]">
        {/* Visibility Score - 1/3 */}
        <div 
          className={`lg:col-span-1 border border-gray-200 shadow-sm p-6 min-h-[396px] h-full relative ${scoreChartView === 'radar' ? 'overflow-visible' : 'overflow-hidden'}`}
          style={{
            backgroundImage: `url(${(window as any).llmagnetDashboardData?.pluginUrl || ''}assets/visibility_score_background.jpg)`,
            backgroundSize: 'cover',
            backgroundPosition: 'center'
          }}
        >
          <div className="absolute top-3 right-3 z-10 flex items-center gap-1">
            {scoreBreakdown && (
              <button
                type="button"
                onClick={() => setScoreChartView((view) => (view === 'circle' ? 'radar' : 'circle'))}
                className="bg-transparent text-gray-400 transition-colors hover:text-gray-600"
                title={
                  scoreChartView === 'circle'
                    ? __('View breakdown chart', 'llmagnet-llm-txt-generator')
                    : __('View score', 'llmagnet-llm-txt-generator')
                }
                aria-label={
                  scoreChartView === 'circle'
                    ? __('View breakdown chart', 'llmagnet-llm-txt-generator')
                    : __('View score', 'llmagnet-llm-txt-generator')
                }
                aria-pressed={scoreChartView === 'radar'}
              >
                {scoreChartView === 'circle' ? (
                  <Radar className="h-5 w-5" strokeWidth={1.75} />
                ) : (
                  <Circle className="h-5 w-5" strokeWidth={1.75} />
                )}
              </button>
            )}
            <button
              onClick={() => setShowScoreBreakdown(!showScoreBreakdown)}
              className="bg-transparent text-gray-400 transition-colors hover:text-gray-600"
              title={__('View score breakdown', 'llmagnet-llm-txt-generator')}
              aria-label={__('View score breakdown', 'llmagnet-llm-txt-generator')}
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
              </svg>
            </button>
            <button
              onClick={refreshVisibilityScore}
              disabled={isRefreshingScore}
              className={`bg-transparent text-gray-400 transition-colors hover:text-gray-600 ${isRefreshingScore ? 'animate-spin' : ''}`}
              title={__('Recalculate score', 'llmagnet-llm-txt-generator')}
              aria-label={__('Recalculate score', 'llmagnet-llm-txt-generator')}
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
              </svg>
            </button>
          </div>
          <div className="flex items-center justify-center mb-6">
            <h3 className="text-xl font-semibold text-gray-900 text-center">{__('Visibility Score', 'llmagnet-llm-txt-generator')}</h3>
          </div>
          
          
          {scoreChartView === 'radar' && scoreBreakdown ? (
            <div className="h-[340px] w-full">
              <VisibilityScoreRadar breakdown={scoreBreakdown} />
            </div>
          ) : (
            <>
              <div className="flex justify-center">
                <div className="relative">
                  <svg className="w-48 h-48" viewBox="0 0 200 200">
                    <circle
                      cx="100"
                      cy="100"
                      r="85"
                      fill="none"
                      stroke="#e5e7eb"
                      strokeWidth="10"
                    />
                    <circle
                      cx="100"
                      cy="100"
                      r="85"
                      fill="none"
                      stroke={
                        visibilityScore >= 90 ? '#22c55e' :
                        visibilityScore >= 75 ? '#84cc16' :
                        visibilityScore >= 50 ? '#eab308' :
                        '#ef4444'
                      }
                      strokeWidth="10"
                      strokeDasharray={isRefreshingScore ? '40 534' : `${(visibilityScore / 100) * 534} 534`}
                      strokeLinecap="round"
                      style={{
                        transform: 'rotate(-90deg)',
                        transformOrigin: '50% 50%',
                        transition: 'stroke-dasharray 0.5s ease-out',
                        animation: isRefreshingScore ? 'spin 1s linear infinite' : 'none',
                      }}
                    />
                    <circle
                      cx="100"
                      cy="100"
                      r="70"
                      fill="white"
                      filter="url(#innerShadow)"
                    />
                    <defs>
                      <filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
                        <feDropShadow dx="0" dy="2" stdDeviation="4" floodColor="#00000015"/>
                      </filter>
                    </defs>
                    <text
                      x="100"
                      y="92"
                      textAnchor="middle"
                      dominantBaseline="central"
                      fontSize="52"
                      fontWeight="bold"
                      fill="#1f2937"
                      className={isRefreshingScore ? 'animate-pulse' : ''}
                      style={{ opacity: isRefreshingScore ? 0.5 : 1 }}
                    >
                      {isRefreshingScore ? '...' : visibilityScore}
                    </text>
                    <text
                      x="100"
                      y="130"
                      textAnchor="middle"
                      dominantBaseline="central"
                      fontSize="16"
                      fill="#4b5563"
                    >
                      {__('Of 100', 'llmagnet-llm-txt-generator')}
                    </text>
                  </svg>
                </div>
              </div>

              <div className="rounded-2xl border border-[#EDE9F4] bg-[#F9F7FC] px-5 py-[5px] shadow-sm">
                <div className="flex h-[34px] items-center gap-2.5">
                  <span
                    className={`h-3 w-3 shrink-0 ${visibilityStatus.indicatorColor}`}
                    aria-hidden="true"
                  />
                  <h4 className="text-lg font-semibold text-[#1A0B2E]">{visibilityStatus.label}</h4>
                </div>
                <p className="mt-2 text-[13px] leading-relaxed text-[#1A0B2E]">{visibilityStatus.message}</p>
              </div>
            </>
          )}
        </div>

        {/* Visibility Score Over Time - 2/3 */}
        <div className="flex h-full min-h-0 flex-col lg:col-span-2 border border-gray-200 bg-white px-6 py-[18px] shadow-sm">
          <VisibilityTimeline
            apiRoot={(window as any).wpApiSettings?.root || ''}
            apiNamespace="llm-analytics/v1"
          />
        </div>
      </div>

      {/* Row 2: Top Pages/Products + Recommendations placeholder */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Top Pages/Products - 2/3 */}
        <div className="lg:col-span-2">
          <TopPagesProducts 
            apiRoot={(window as any).wpApiSettings?.root || ''}
            apiNamespace="llm-analytics/v1"
            pluginUrl={(window as any).llmagnetDashboardData?.pluginUrl || ''}
            woocommerce={data.woocommerce}
          />
        </div>

        {/* Recommendations - 1/3 */}
        <div className="flex flex-col border border-gray-200 bg-white px-6 py-[18px] shadow-sm lg:col-span-1">
          <h3 className="mb-0 mt-0 text-xl font-semibold text-gray-900">{__('Recommendations actions', 'llmagnet-llm-txt-generator')}</h3>

          {recommendations.length > 0 ? (
            <div className="mt-3 space-y-2" role="list">
              {recommendations.map((item) => {
                const styles = getRecommendationStyles(item.priority);
                const isExpanded = openRecommendationId === item.id;
                const panelId = `rec-panel-${item.id}`;
                const headerId = `rec-header-${item.id}`;
                return (
                  <div
                    key={item.id}
                    className="overflow-hidden border border-gray-200 bg-white shadow-sm transition-[box-shadow,border-color] duration-150 hover:border-gray-300 hover:shadow"
                    role="listitem"
                  >
                    <button
                      type="button"
                      id={headerId}
                      aria-expanded={isExpanded}
                      aria-controls={panelId}
                      onClick={() => toggleRecommendation(item.id)}
                      className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-gray-50/80"
                    >
                      <span
                        className={`h-3 w-3 flex-shrink-0 ${styles.indicator}`}
                        aria-hidden
                      />
                      <div className="min-w-0 flex-1">
                        <span className="line-clamp-2 text-[13px] font-semibold leading-tight text-gray-900">
                          {item.title}
                        </span>
                        <span className="mt-0.5 block text-[11px] font-medium text-gray-500">
                          {recommendationPriorityLabel[item.priority]}
                        </span>
                      </div>
                      <ChevronDown
                        className={`h-4 w-4 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-out ${
                          isExpanded ? 'rotate-180' : ''
                        }`}
                        aria-hidden
                      />
                    </button>
                    <div
                      id={panelId}
                      role="region"
                      aria-labelledby={headerId}
                      className={`grid transition-[grid-template-rows] duration-200 ease-out ${
                        isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
                      }`}
                    >
                      <div
                        className="min-h-0 overflow-hidden"
                        {...(!isExpanded ? { inert: true as const } : {})}
                        aria-hidden={!isExpanded}
                      >
                        <div className="border-t border-gray-100 px-3 pb-3 pt-2">
                          <p className="text-[11px] leading-relaxed text-gray-600">{item.description}</p>
                          {item.actionLabel && item.actionType === 'button' && item.actionHandler && (
                            <Button
                              type="button"
                              variant="default"
                              size="xs"
                              onClick={item.actionHandler}
                              disabled={(item.id === 'R04' && isFixingRobots) || (item.id === 'R01' && isGeneratingNow)}
                              className="mt-2 gap-1"
                            >
                              {item.id === 'R04' && isFixingRobots
                                ? __('Fixing...', 'llmagnet-llm-txt-generator')
                                : item.id === 'R01' && isGeneratingNow
                                  ? __('Generating...', 'llmagnet-llm-txt-generator')
                                  : item.actionLabel}
                              <ChevronRight className="h-3 w-3 opacity-90" aria-hidden />
                            </Button>
                          )}
                          {item.actionLabel && item.actionType === 'link' && item.actionUrl && (
                            <Button asChild variant="default" size="xs" className="mt-2 gap-1">
                              <a href={item.actionUrl}>
                                {item.actionLabel}
                                <ChevronRight className="h-3 w-3 opacity-90" aria-hidden />
                              </a>
                            </Button>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="flex-1 flex flex-col items-center justify-center gap-3 py-6">
              <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
              </div>
              <p className="text-xs text-gray-500 text-center max-w-[200px]">
                {__('All set. No actionable recommendations right now.', 'llmagnet-llm-txt-generator')}
              </p>
            </div>
          )}
        </div>
      </div>

      {/* Bot Traffic */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Bot Traffic Chart - 2/3 */}
        <div className="border border-gray-200 bg-white px-6 py-[18px] shadow-sm lg:col-span-2">
          <Suspense fallback={<div className="min-h-[320px] flex items-center justify-center"><LoadingSpinner /></div>}>
            <LazyBotTrafficChart
              apiRoot={(window as any).wpApiSettings?.root || ''}
              apiNamespace="llm-analytics/v1"
              filterBots={['ChatGPT', 'Claude', 'Perplexity', 'Gemini', 'Grok']}
              renderHeader={({ botFilterIcons }) => (
                <>
                  <div className="mb-4 flex h-[38px] items-center justify-between">
                    <div className="flex h-full items-center gap-3">
                      <h3 className="text-xl font-semibold text-gray-900">{__('Bot Traffic', 'llmagnet-llm-txt-generator')}</h3>
                      <a
                        href="/wp-admin/admin.php?page=llmagnet-ai-seo-bot-analytics"
                        className="text-sm text-gray-600 hover:text-gray-800 font-medium underline"
                      >
                        {__('View all', 'llmagnet-llm-txt-generator')}
                      </a>
                    </div>
                    {botFilterIcons}
                  </div>
                  <p className="text-sm text-gray-500 mb-4">{__('Traffic in the last 30 days', 'llmagnet-llm-txt-generator')}</p>
                </>
              )}
            />
          </Suspense>
        </div>
        
        <div className="lg:col-span-1 min-h-[460px]">
          <OverviewEngagementCards
            initialStarRating={data.overviewStarRating ?? 0}
            telemetryOptIn={data.analyticsData?.telemetryOptIn === true}
            analyticsData={data.analyticsData}
          />
        </div>
      </div>





      {/* Analytics Summary
      <div className="mb-6">
        {/* Bot Analytics 
        <div className="bg-white border border-gray-200 shadow-sm p-6 rounded-md">
          <DashboardAnalytics 
            pluginUrl={(window as any).llmagnetDashboardData?.pluginUrl || ''}
            apiRoot={(window as any).wpApiSettings?.root || ''}
            apiNamespace="llm-analytics/v1"
            filterBots={['ChatGPT', 'Claude', 'Perplexity', 'Gemini', 'Grok']}
            showFullStatsLink={true}
          />
        </div>
      </div> */}

     
      
      {/* Alt Text Modal */}

      {showScoreBreakdown && scoreBreakdown && (
        <VisibilityScoreBreakdownModal
          breakdown={scoreBreakdown}
          totalScore={visibilityScore}
          totalVisits={currentVisibilityScore?.total_visits ?? data.visibilityScore?.total_visits}
          uniquePages={currentVisibilityScore?.unique_pages ?? data.visibilityScore?.unique_pages}
          rangeDays={currentVisibilityScore?.range_days ?? data.visibilityScore?.range_days}
          onClose={() => setShowScoreBreakdown(false)}
        />
      )}

    </div>
  );
}