import { useState, useEffect, type ReactNode } from 'react';
import { LlmsUiverseSwitch } from './llms-uiverse-switch';
import { IconButton } from '@/components/ui/icon-button';
import { __, sprintf, _n } from '../lib/i18n';

const TD = 'llmagnet-llm-txt-generator';

interface LlmsFullInfo {
  exists: boolean;
  size: number;
  size_formatted: string;
  post_count: number;
  warning: number | null;
}

interface RobotsTxtStatus {
  has_physical_file: boolean;
  has_llms_reference: boolean;
  injection_method: 'filter' | 'file' | 'none';
  robots_txt_url: string;
}

interface ContentSettingsProps {
  settings: {
    post_types: string[];
    full_content: boolean;
    days_to_include: number;
    delete_on_uninstall: boolean;
    include_images?: boolean;
    llms_txt_custom_intro?: string;
    llms_txt_show_excerpts?: boolean;
    llms_txt_excerpt_length?: number;
    llms_txt_max_per_section?: number;
    llms_txt_show_prices?: boolean;
    llms_txt_group_by_type?: boolean;
    llms_txt_show_author?: boolean;
    generate_full?: boolean;
    llms_full_max_posts?: number;
  };
  postTypes: Array<{
    name: string;
    label: string;
  }>;
  wooCommerceActive?: boolean;
  llmsFullInfo?: LlmsFullInfo;
  robotsTxtStatus?: RobotsTxtStatus;
  onSettingsChange: (settings: any) => void;
}

export function ContentSettings({
  settings,
  postTypes,
  wooCommerceActive = false,
  llmsFullInfo,
  robotsTxtStatus,
  onSettingsChange,
}: ContentSettingsProps) {
  const exportImages = Boolean(window.llmagnetContentSettingsExtras?.exportImages);
  const [formState, setFormState] = useState({
    post_types: settings.post_types,
    full_content: settings.full_content,
    days_to_include: settings.days_to_include,
    delete_on_uninstall: settings.delete_on_uninstall,
    include_images: settings.include_images || false,
    llms_txt_custom_intro: settings.llms_txt_custom_intro || '',
    llms_txt_show_excerpts: settings.llms_txt_show_excerpts !== false,
    llms_txt_max_per_section: settings.llms_txt_max_per_section || 50,
    llms_txt_show_prices: settings.llms_txt_show_prices !== false,
    llms_txt_group_by_type: settings.llms_txt_group_by_type !== false,
    llms_txt_show_author: settings.llms_txt_show_author !== false,
    generate_full: settings.generate_full === true,
    llms_full_max_posts: settings.llms_full_max_posts || 200,
  });

  const robotsStatus = robotsTxtStatus;

  const [llmsTxtContent, setLlmsTxtContent] = useState<string>('');
  const [llmsFullTxtContent, setLlmsFullTxtContent] = useState<string>('');
  const [isLoadingPreview, setIsLoadingPreview] = useState(true);
  const [isRefreshing, setIsRefreshing] = useState(false);

  // Fetch llms.txt content for preview
  const fetchLlmsTxtContent = async () => {
    try {
      setIsLoadingPreview(true);
      // Add cache-busting query parameter
      const response = await fetch('/llms.txt?t=' + Date.now());
      if (response.ok) {
        const content = await response.text();
        setLlmsTxtContent(content);
      } else {
        // Show sample content if file doesn't exist yet
        setLlmsTxtContent(getSampleContent());
      }

      const fullResponse = await fetch('/llms-full.txt?t=' + Date.now());
      if (fullResponse.ok) {
        setLlmsFullTxtContent(await fullResponse.text());
      } else {
        setLlmsFullTxtContent('');
      }
    } catch (err) {
      console.error('Error fetching llms.txt:', err);
      setLlmsTxtContent(getSampleContent());
      setLlmsFullTxtContent('');
    } finally {
      setIsLoadingPreview(false);
      setIsRefreshing(false);
    }
  };

  // Initial fetch on mount
  useEffect(() => {
    fetchLlmsTxtContent();
  }, []);

  // Regenerate llms.txt and refresh preview
  const regenerateAndRefresh = async () => {
    try {
      setIsRefreshing(true);
      
      // Get WordPress data from window
      const wpData = (window as any).llmagnetContentSettingsData || (window as any).llmagnetDashboardData;
      
      if (wpData?.ajaxUrl && wpData?.nonce) {
        // Call the regenerate AJAX action
        const formData = new FormData();
        formData.append('action', 'llmagnet_ai_seo_generate_now');
        formData.append('nonce', wpData.nonce);
        
        const response = await fetch(wpData.ajaxUrl, {
          method: 'POST',
          body: formData,
          credentials: 'same-origin'
        });
        
        const result = await response.json();
        
        if (result.success) {
          // Wait a bit for the file to be written
          await new Promise(resolve => setTimeout(resolve, 500));
        }
      }
      
      // Refresh the preview
      await fetchLlmsTxtContent();
    } catch (err) {
      console.error('Error regenerating llms.txt:', err);
      setIsRefreshing(false);
    }
  };

  // Handle refresh button click
  const handleRefreshPreview = () => {
    regenerateAndRefresh();
  };

  // Sample content for preview when file doesn't exist
  const getSampleContent = () => {
    return `# About Our Company

Company Name: TechFlow Solutions
Website: https://www.techflow.example.com
Industry: Software Development & Consulting
Founded: 2018
Location: Tel Aviv, Israel

## Company Overview

TechFlow Solutions is a leading software development company specializing in custom web applications, mobile apps, and cloud solutions. We help businesses transform their digital presence through innovative technology solutions.

## Our Services

### Web Development
We create responsive, scalable web applications using modern frameworks like React, Vue.js, and Next.js. Our team specializes in both front-end and back-end development.

### Mobile Development
Native and cross-platform mobile applications for iOS and Android. We use React Native, Flutter, and Swift/Kotlin to deliver high-performance mobile experiences.

### Cloud Solutions
AWS, Azure, and Google Cloud infrastructure setup and management. We handle everything from migration to ongoing DevOps support.`;
  };

  const handlePostTypeChange = async (postType: string, checked: boolean) => {
    const newFormState = {
      ...formState,
      post_types: checked 
        ? [...formState.post_types, postType]
        : formState.post_types.filter(pt => pt !== postType)
    };
    setFormState(newFormState);
    onSettingsChange(newFormState);
    
    // Regenerate llms.txt and refresh preview after a short delay to allow settings to save
    setTimeout(() => {
      regenerateAndRefresh();
    }, 500);
  };

  const handleCheckboxChange = async (name: 'full_content' | 'delete_on_uninstall' | 'include_images' | 'llms_txt_show_excerpts' | 'llms_txt_show_prices' | 'llms_txt_group_by_type' | 'llms_txt_show_author' | 'generate_full', checked: boolean) => {
    const newFormState = {
      ...formState,
      [name]: checked
    };
    setFormState(newFormState);
    onSettingsChange(newFormState);
    
    // Only regenerate for content-related changes (not delete_on_uninstall)
    if (name !== 'delete_on_uninstall') {
      setTimeout(() => {
        regenerateAndRefresh();
      }, 500);
    }
  };

  const handleTextChange = async (name: 'llms_txt_custom_intro', value: string) => {
    const newFormState = {
      ...formState,
      [name]: value
    };
    setFormState(newFormState);
    onSettingsChange(newFormState);
  };

  const handleNumberChange = async (name: 'llms_txt_max_per_section' | 'llms_full_max_posts', value: number) => {
    const newFormState = {
      ...formState,
      [name]: value
    };
    setFormState(newFormState);
    onSettingsChange(newFormState);
  };

  const handleCustomIntroBlur = () => {
    setTimeout(() => {
      regenerateAndRefresh();
    }, 300);
  };

  const handleMaxPerSectionBlur = () => {
    setTimeout(() => {
      regenerateAndRefresh();
    }, 300);
  };

  /** Inline **bold** and [label](url) for code-style preview */
  const renderInlineMarkdown = (text: string): ReactNode => {
    if (!text) return '\u00a0';
    const parts = text.split(/(\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g);
    return parts.map((part, i) => {
      if (!part) return null;
      if (part.startsWith('**') && part.endsWith('**')) {
        return (
          <strong key={i} className="font-semibold text-slate-100">
            {part.slice(2, -2)}
          </strong>
        );
      }
      const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
      if (linkMatch) {
        return (
          <a
            key={i}
            href={linkMatch[2]}
            className="text-sky-400 underline decoration-sky-500/50 underline-offset-2 hover:text-sky-300"
            target="_blank"
            rel="noopener noreferrer"
          >
            {linkMatch[1]}
          </a>
        );
      }
      return <span key={i}>{part}</span>;
    });
  };

  /** Dark code panel: line numbers + monospace; headings differ by color only (same size). */
  const renderMarkdownPreview = (content: string) => {
    const lines = content.split('\n');
    const textRow = 'font-mono text-[12px] leading-[1.55] tabular-nums';

    return (
      <div className={`${textRow} text-slate-300`}>
        {lines.map((line, index) => {
          const n = index + 1;
          const numCell = (
            <span
              className={`inline-flex min-h-[1.55em] min-w-[2.75rem] shrink-0 select-none items-start justify-end border-r border-slate-700/90 bg-[#0a0e14] py-0.5 pl-2 pr-3 font-mono text-[11px] text-slate-500 tabular-nums`}
            >
              {n}
            </span>
          );

          if (line.trim() === '') {
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px] text-slate-600">&nbsp;</span>
              </div>
            );
          }

          // Headings: longest prefix first — same font size, color only (syntax-highlight style)
          if (line.startsWith('#### ')) {
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px] font-medium text-violet-300">
                  <span className="text-slate-500">#### </span>
                  {renderInlineMarkdown(line.slice(5))}
                </span>
              </div>
            );
          }
          if (line.startsWith('### ')) {
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px] font-medium text-emerald-300">
                  <span className="text-slate-500">### </span>
                  {renderInlineMarkdown(line.slice(4))}
                </span>
              </div>
            );
          }
          if (line.startsWith('## ')) {
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px] font-medium text-sky-300">
                  <span className="text-slate-500">## </span>
                  {renderInlineMarkdown(line.slice(3))}
                </span>
              </div>
            );
          }
          if (line.startsWith('# ')) {
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px] font-medium text-amber-300">
                  <span className="text-slate-500"># </span>
                  {renderInlineMarkdown(line.slice(2))}
                </span>
              </div>
            );
          }

          // Horizontal rule
          if (/^---+$/.test(line.trim())) {
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px] text-slate-500">{'---'}</span>
              </div>
            );
          }

          // Key: value (not headings)
          if (line.includes(': ') && !line.trim().startsWith('#')) {
            const colon = line.indexOf(': ');
            const key = line.slice(0, colon);
            const value = line.slice(colon + 2);
            return (
              <div key={index} className="flex hover:bg-white/[0.02]">
                {numCell}
                <span className="min-w-0 flex-1 py-0.5 pl-3 font-mono text-[12px]">
                  <span className="text-cyan-300">{renderInlineMarkdown(key)}</span>
                  <span className="text-slate-500">: </span>
                  <span className="text-slate-300">{renderInlineMarkdown(value)}</span>
                </span>
              </div>
            );
          }

          return (
            <div key={index} className="flex hover:bg-white/[0.02]">
              {numCell}
              <span className="min-w-0 flex-1 break-words py-0.5 pl-3 font-mono text-[12px] text-slate-300">
                {renderInlineMarkdown(line)}
              </span>
            </div>
          );
        })}
      </div>
    );
  };

  return (
    <div className="wrap" style={{ maxWidth: '1200px', margin: 'auto', paddingTop: '1.5rem', paddingLeft: '1.5rem', paddingRight: '1.5rem' }}>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Left Column - LLMs.Txt Manager */}
        <div className="bg-white p-6" style={{ boxShadow: '0px 5.4px 10.79px 0px rgba(0, 0, 0, 0.03)' }}>
          <h2 className="text-xl font-semibold text-gray-900 mb-2">{__('LLMs.txt Manager', 'llmagnet-llm-txt-generator')}</h2>
          <p className="text-gray-500 text-sm mb-6">{__('Select content for llms.txt and Markdown exports.', 'llmagnet-llm-txt-generator')}</p>
          
          <div className="space-y-6">
            {/* Content types to include */}
            <div>
              <h4 className="font-medium mb-4 text-sm text-gray-800">{__('Content types to include', 'llmagnet-llm-txt-generator')}</h4>
              <div className="space-y-1">
                {postTypes.map((postType) => (
                  <div key={postType.name} className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                    <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                      {postType.label}
                    </span>
                    <LlmsUiverseSwitch
                      checked={formState.post_types.includes(postType.name)}
                      onChange={(next) => handlePostTypeChange(postType.name, next)}
                      aria-label={sprintf(__('%s in llms.txt', 'llmagnet-llm-txt-generator'), postType.label)}
                    />
                  </div>
                ))}
              </div>
            </div>
            
            {/* Content Export Section */}
            <div>
              <h4 className="font-medium mb-4 text-sm text-gray-800">{__('Content export options', 'llmagnet-llm-txt-generator')}</h4>
              <div className="space-y-1">
                {/* Full content toggle */}
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {formState.full_content ? __('FULL CONTENT', 'llmagnet-llm-txt-generator') : __('EXCERPTS ONLY', 'llmagnet-llm-txt-generator')}
                  </span>
                  <LlmsUiverseSwitch
                    checked={formState.full_content}
                    onChange={(next) => handleCheckboxChange('full_content', next)}
                    aria-label={__('Full content or excerpts only', 'llmagnet-llm-txt-generator')}
                  />
                </div>
                
                {exportImages ? (
                  <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                    <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">{__('IMAGES', TD)}</span>
                    <LlmsUiverseSwitch
                      checked={formState.include_images}
                      onChange={(next) => handleCheckboxChange('include_images', next)}
                      aria-label={__('Include images', TD)}
                    />
                  </div>
                ) : null}
              </div>
            </div>

            <div>
              <h4 className="font-medium mb-1 text-sm text-gray-800">{__('LLMs-full.txt (complete content)', TD)}</h4>
              <p className="text-xs text-gray-500 mb-4">
                {__('Export full post bodies in a single llms-full.txt file for AI crawlers.', TD)}
              </p>
              <div className="space-y-1">
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {__('GENERATE LLMS-FULL.TXT', TD)}
                  </span>
                  <LlmsUiverseSwitch
                    checked={formState.generate_full}
                    onChange={(next) => handleCheckboxChange('generate_full', next)}
                    aria-label={__('Generate llms-full.txt', TD)}
                  />
                </div>
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {__('MAX POSTS', TD)}
                  </span>
                  <input
                    type="number"
                    min="1"
                    max="1000"
                    aria-label={__('Max posts for llms-full.txt', TD)}
                    value={formState.llms_full_max_posts}
                    onChange={(e) => handleNumberChange('llms_full_max_posts', parseInt(e.target.value) || 200)}
                    onBlur={() => {
                      setTimeout(() => { regenerateAndRefresh(); }, 300);
                    }}
                    className="w-20 px-3 py-1.5 text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-center"
                    style={{ border: '1px solid #e5e7eb' }}
                  />
                </div>
                <div className="py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                      {__('CURRENT FILE SIZE', TD)}
                    </span>
                    <span className={`text-sm font-medium ${llmsFullInfo?.warning ? 'text-amber-600' : 'text-gray-600'}`}>
                      {llmsFullInfo?.exists ? llmsFullInfo.size_formatted : __('Not generated yet', TD)}
                    </span>
                  </div>
                  {llmsFullInfo?.warning ? (
                    <p className="text-xs text-amber-600 mt-1">
                      {sprintf(__('File is %sMB. Consider reducing max posts.', TD), llmsFullInfo.warning)}
                    </p>
                  ) : null}
                  {llmsFullInfo?.exists ? (
                    <p className="text-xs text-gray-500 mt-1">
                      {sprintf(_n('%d post included', '%d posts included', llmsFullInfo.post_count, TD), llmsFullInfo.post_count)}
                    </p>
                  ) : null}
                </div>
              </div>
            </div>

            {/* LLMs.txt Enhancement Settings */}
            <div>
              <h4 className="font-medium mb-4 text-sm text-gray-800">{__('LLMs.txt structure settings', 'llmagnet-llm-txt-generator')}</h4>
              <div className="space-y-1">
                {/* Custom intro text */}
                <div className="py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <label htmlFor="llmagnet-custom-intro-text" className="text-sm font-medium text-gray-700 uppercase tracking-wide block mb-2">
                    {__('CUSTOM INTRO TEXT', 'llmagnet-llm-txt-generator')}
                  </label>
                  <textarea
                    id="llmagnet-custom-intro-text"
                    value={formState.llms_txt_custom_intro}
                    onChange={(e) => handleTextChange('llms_txt_custom_intro', e.target.value)}
                    onBlur={handleCustomIntroBlur}
                    placeholder={__('Enter a custom description for your llms.txt header (leave empty to use site tagline)', 'llmagnet-llm-txt-generator')}
                    className="w-full px-3 py-2 text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none"
                    style={{ border: '1px solid #e5e7eb' }}
                    rows={3}
                  />
                </div>
                
                {/* Group by content type toggle */}
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {__('GROUP BY CONTENT TYPE', 'llmagnet-llm-txt-generator')}
                  </span>
                  <LlmsUiverseSwitch
                    checked={formState.llms_txt_group_by_type}
                    onChange={(next) => handleCheckboxChange('llms_txt_group_by_type', next)}
                    aria-label={__('Group by content type', 'llmagnet-llm-txt-generator')}
                  />
                </div>
                
                {/* Include excerpts toggle */}
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {__('INCLUDE EXCERPTS', 'llmagnet-llm-txt-generator')}
                  </span>
                  <LlmsUiverseSwitch
                    checked={formState.llms_txt_show_excerpts}
                    onChange={(next) => handleCheckboxChange('llms_txt_show_excerpts', next)}
                    aria-label={__('Include excerpts', 'llmagnet-llm-txt-generator')}
                  />
                </div>
                
                {/* Max posts per section */}
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {__('MAX POSTS PER SECTION', 'llmagnet-llm-txt-generator')}
                  </span>
                  <input
                    type="number"
                    min="1"
                    max="200"
                    aria-label={__('Max posts per section', 'llmagnet-llm-txt-generator')}
                    value={formState.llms_txt_max_per_section}
                    onChange={(e) => handleNumberChange('llms_txt_max_per_section', parseInt(e.target.value) || 50)}
                    onBlur={handleMaxPerSectionBlur}
                    className="w-20 px-3 py-1.5 text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-center"
                    style={{ border: '1px solid #e5e7eb' }}
                  />
                </div>
                
                {/* Show product prices (WooCommerce only) */}
                {wooCommerceActive && (
                  <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                    <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                      {__('SHOW PRODUCT PRICES', 'llmagnet-llm-txt-generator')}
                    </span>
                    <LlmsUiverseSwitch
                      checked={formState.llms_txt_show_prices}
                      onChange={(next) => handleCheckboxChange('llms_txt_show_prices', next)}
                      aria-label={__('Show product prices', 'llmagnet-llm-txt-generator')}
                    />
                  </div>
                )}
                
                {/* Show author/about section toggle */}
                <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                  <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                    {__('SHOW ABOUT SECTION', 'llmagnet-llm-txt-generator')}
                  </span>
                  <LlmsUiverseSwitch
                    checked={formState.llms_txt_show_author}
                    onChange={(next) => handleCheckboxChange('llms_txt_show_author', next)}
                    aria-label={__('Show about section', 'llmagnet-llm-txt-generator')}
                  />
                </div>
              </div>
            </div>

            {/* Robots.txt integration */}
            <div>
              <h4 className="font-medium mb-4 text-sm text-gray-800">{__('Robots.txt integration', 'llmagnet-llm-txt-generator')}</h4>
              <div className="space-y-1">
                {/* Status row */}
                {robotsStatus && (
                  <div className="py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                        {__('STATUS', 'llmagnet-llm-txt-generator')}
                      </span>
                      <span className={`text-sm font-medium flex items-center gap-1.5 ${robotsStatus.has_llms_reference ? 'text-green-600' : 'text-amber-600'}`}>
                        {robotsStatus.has_llms_reference ? (
                          <>
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" 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>
                            {__('robots.txt references llms.txt', 'llmagnet-llm-txt-generator')}
                          </>
                        ) : (
                          <>
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                            </svg>
                            {__('Missing llms.txt reference', 'llmagnet-llm-txt-generator')}
                          </>
                        )}
                      </span>
                    </div>
                    <p className="text-xs text-gray-400 mt-1">
                      {sprintf(
                        __('Method: %1$s%2$s', 'llmagnet-llm-txt-generator'),
                        robotsStatus.injection_method === 'filter'
                          ? __('WordPress filter (virtual)', 'llmagnet-llm-txt-generator')
                          : robotsStatus.injection_method === 'file'
                            ? __('Physical file', 'llmagnet-llm-txt-generator')
                            : __('Disabled', 'llmagnet-llm-txt-generator'),
                        robotsStatus.has_physical_file ? __(' — physical robots.txt detected', 'llmagnet-llm-txt-generator') : ''
                      )}
                    </p>
                  </div>
                )}
              </div>
            </div>

            {/* Cleanup on uninstall */}
            <div>
              <h4 className="font-medium mb-4 text-sm text-gray-800">{__('Cleanup on uninstall', 'llmagnet-llm-txt-generator')}</h4>
              <div className="flex items-center justify-between py-3" style={{ borderBottom: '1px solid #f3f4f6' }}>
                <span className="text-sm text-gray-700">{__('Delete plugin data (tables and options) on uninstall', 'llmagnet-llm-txt-generator')}</span>
                <LlmsUiverseSwitch
                  checked={formState.delete_on_uninstall}
                  onChange={(next) => handleCheckboxChange('delete_on_uninstall', next)}
                  aria-label={__('Delete plugin data (tables and options) on uninstall', 'llmagnet-llm-txt-generator')}
                />
              </div>
            </div>
          </div>
        </div>

        {/* Right Column - LLMs.Txt Preview */}
        <div className="bg-white p-6" style={{ boxShadow: '0px 5.4px 10.79px 0px rgba(0, 0, 0, 0.03)' }}>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-gray-900">{__('LLMs.txt Preview', 'llmagnet-llm-txt-generator')}</h2>
            <div className="flex items-center gap-1">
              <a
                href="/llms.txt"
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                title={__('Open llms.txt in new tab', 'llmagnet-llm-txt-generator')}
              >
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  className="h-5 w-5 text-gray-500"
                  fill="none" 
                  viewBox="0 0 24 24" 
                  stroke="currentColor"
                >
                  <path 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    strokeWidth={2} 
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" 
                  />
                </svg>
              </a>
              <IconButton
                onClick={handleRefreshPreview}
                disabled={isRefreshing}
                aria-label={__('Refresh preview', 'llmagnet-llm-txt-generator')}
                title={__('Refresh preview', 'llmagnet-llm-txt-generator')}
                className={isRefreshing ? 'opacity-50 cursor-not-allowed' : ''}
              >
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  className={`h-5 w-5 text-gray-500 ${isRefreshing ? 'animate-spin' : ''}`}
                  fill="none" 
                  viewBox="0 0 24 24" 
                  stroke="currentColor"
                >
                  <path 
                    strokeLinecap="round" 
                    strokeLinejoin="round" 
                    strokeWidth={2} 
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" 
                  />
                </svg>
              </IconButton>
            </div>
          </div>
          
          <div
            className="overflow-hidden rounded-lg border border-slate-700 bg-[#0d1117] shadow-inner"
            style={{ maxHeight: '600px' }}
          >
            <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: '580px' }}>
              {isLoadingPreview || isRefreshing ? (
                <div className="flex h-32 items-center justify-center">
                  <div className="flex flex-col items-center gap-2">
                    <svg
                      className="h-6 w-6 animate-spin text-purple-400"
                      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>
                    <p className="text-sm text-slate-400">{isRefreshing ? __('Regenerating...', 'llmagnet-llm-txt-generator') : __('Loading preview...', 'llmagnet-llm-txt-generator')}</p>
                  </div>
                </div>
              ) : (
                renderMarkdownPreview(llmsTxtContent)
              )}
            </div>
          </div>

          {formState.generate_full && (
            <>
              <div className="flex items-center justify-between mt-6 mb-4">
                <h2 className="text-xl font-semibold text-gray-900">{__('LLMs-full.txt Preview', TD)}</h2>
                <a
                  href="/llms-full.txt"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                  title={__('Open llms-full.txt in new tab', TD)}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-5 w-5 text-gray-500"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      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
                className="overflow-hidden rounded-lg border border-slate-700 bg-[#0d1117] shadow-inner"
                style={{ maxHeight: '600px', minHeight: '600px' }}
              >
                <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: '580px', minHeight: '580px' }}>
                  {isLoadingPreview || isRefreshing ? (
                    <div className="flex h-20 items-center justify-center">
                      <p className="text-sm text-slate-400">{isRefreshing ? __('Regenerating...', TD) : __('Loading preview...', TD)}</p>
                    </div>
                  ) : llmsFullTxtContent ? (
                    renderMarkdownPreview(llmsFullTxtContent)
                  ) : (
                    <div className="flex h-20 items-center justify-center">
                      <p className="text-sm text-slate-400">{__('llms-full.txt has not been generated yet.', TD)}</p>
                    </div>
                  )}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}