import React, { useState, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { trackPageDrawerOpened, trackPageDetailsSaved } from '../lib/mixpanel';
import { LlmsIncludeToggle } from './llms-include-toggle';
import { useFocusTrap } from '../hooks/use-focus-trap';
import { useScrollLock } from '../hooks/use-scroll-lock';
import { __, sprintf, _n } from '../lib/i18n';
import type { ReadinessRecommendation } from './readiness-recommendations-list';
import { DrawerHeaderBar } from './drawer-header-bar';
import { DrawerSection } from './drawer-section';
import { VisibilityScoreCard } from './visibility-score-card';
import { Button } from '@/components/ui/button';

// Types
interface PageImage {
  attachment_id: number;
  url: string;
  alt: string;
  is_featured: boolean;
}

interface PageCategory {
  term_id: number;
  name: string;
  slug: string;
  path: string;
}

interface PageTag {
  term_id: number;
  name: string;
  slug: string;
}

interface HeadingItem {
  level: string;
  text: string;
}

interface ReadabilityData {
  avg_sentence_length: number;
  avg_paragraph_length: number;
  paragraph_count: number;
}

interface PageData {
  id: number;
  title: string;
  permalink: string;
  path: string;
  post_type: string;
  status: string;
  excerpt: string;
  word_count: number;
  edit_url: string;
  images: PageImage[];
  categories: PageCategory[];
  tags: PageTag[];
  heading_structure: HeadingItem[];
  readability: ReadabilityData;
}

interface VisibilityScoreComponents {
  frequency: number;
  visit_type: number;
  visit_count: number;
  page_status: number;
  url_type_multiplier: number;
}

interface BotVisibility {
  score: number;
  components: VisibilityScoreComponents;
}

interface ContentQualityComponents {
  content_length: number;
  heading_structure: number;
  alt_coverage: number;
  excerpt_quality: number;
  tags_categories: number;
  readability: number;
}

interface ContentQuality {
  score: number;
  components: ContentQualityComponents;
}

interface VisibilityScoreData {
  score: number;
  bot_visibility: BotVisibility;
  content_quality: ContentQuality;
  recommendations: ReadinessRecommendation[] | string[];
}

interface PageDrawerProps {
  postId: number | null;
  isOpen: boolean;
  onClose: () => void;
  apiRoot: string;
  apiNamespace: string;
  rangeDays: number;
  onPageUpdated?: () => void;
}

export function PageDrawer({
  postId,
  isOpen,
  onClose,
  apiRoot,
  apiNamespace,
  rangeDays,
  onPageUpdated,
}: PageDrawerProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [pageData, setPageData] = useState<PageData | null>(null);
  const [visibilityScore, setVisibilityScore] = useState<VisibilityScoreData | null>(null);
  const [isDirty, setIsDirty] = useState(false);
  const drawerRef = useRef<HTMLDivElement>(null);

  // Editable fields
  const [excerpt, setExcerpt] = useState('');
  const [imageAlts, setImageAlts] = useState<{ [key: number]: string }>({});
  const [tags, setTags] = useState<string[]>([]);

  // Fetch page details when drawer opens
  useEffect(() => {
    if (isOpen && postId) {
      fetchPageDetails();
    }
  }, [isOpen, postId, rangeDays]);

  // Lock background scroll when drawer is open (WP admin scroll roots + shell outlet).
  useScrollLock(isOpen);

  // Focus trap + focus restore + ESC to close
  useFocusTrap(drawerRef, { active: isOpen, onEscape: () => handleClose() });

  const fetchPageDetails = async (retryCount = 0) => {
    if (!postId) {
      setError(__('Invalid post ID', 'llmagnet-llm-txt-generator'));
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      const url = `${apiRoot}${apiNamespace}/page-details?post_id=${postId}&range_days=${rangeDays}`;
      const response = await fetch(url, {
        headers: {
          'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
        },
        credentials: 'same-origin',
      });

      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`HTTP ${response.status}: ${errorText}`);
      }

      const responseText = await response.text();
      let data;
      try {
        data = JSON.parse(responseText);
      } catch (jsonError) {
        const jsonMatch = responseText.match(/\{.*\}/s);
        if (jsonMatch) {
          data = JSON.parse(jsonMatch[0]);
        } else {
          if (retryCount < 2) {
            await new Promise(resolve => setTimeout(resolve, 500));
            return fetchPageDetails(retryCount + 1);
          }
          throw new Error(__('Invalid JSON response from server', 'llmagnet-llm-txt-generator'));
        }
      }

      if (!data.success) {
        throw new Error(data.error || __('Failed to load page details', 'llmagnet-llm-txt-generator'));
      }

      setPageData(data.post);
      setVisibilityScore(data.visibility_score);

      // Initialize editable fields
      setExcerpt(data.post.excerpt || '');

      const alts: { [key: number]: string } = {};
      data.post.images.forEach((img: PageImage) => {
        if (img.attachment_id > 0) {
          alts[img.attachment_id] = img.alt || '';
        }
      });
      setImageAlts(alts);

      setTags(data.post.tags.map((t: PageTag) => t.name));
      setIsDirty(false);

      trackPageDrawerOpened(postId, data.post.title);
    } catch (err: any) {
      console.error('Error fetching page details:', err);
      setError(err.message || __('Failed to load page details', 'llmagnet-llm-txt-generator'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleSave = async (retryCount = 0) => {
    if (!postId || !isDirty) return;

    setIsSaving(true);
    setError(null);

    try {
      const imageAltsArray = Object.entries(imageAlts).map(([attachmentId, alt]) => ({
        attachment_id: parseInt(attachmentId),
        alt,
      }));

      const response = await fetch(
        `${apiRoot}${apiNamespace}/page-details/update`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
          },
          credentials: 'same-origin',
          body: JSON.stringify({
            post_id: postId,
            excerpt,
            image_alts: imageAltsArray,
            tags,
          }),
        }
      );

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      const responseText = await response.text();
      let data;
      try {
        data = JSON.parse(responseText);
      } catch (jsonError) {
        const jsonMatch = responseText.match(/\{.*\}/s);
        if (jsonMatch) {
          data = JSON.parse(jsonMatch[0]);
        } else {
          if (retryCount < 2) {
            await new Promise(resolve => setTimeout(resolve, 500));
            return handleSave(retryCount + 1);
          }
          throw new Error(__('Invalid JSON response from server', 'llmagnet-llm-txt-generator'));
        }
      }

      if (!data.success) {
        throw new Error(data.error || __('Failed to update page', 'llmagnet-llm-txt-generator'));
      }

      setIsDirty(false);
      setSaveSuccess(true);
      trackPageDetailsSaved(postId);

      setTimeout(() => setSaveSuccess(false), 3000);
      setTimeout(() => fetchPageDetails(), 500);

      if (onPageUpdated) {
        onPageUpdated();
      }
    } catch (err: any) {
      console.error('Error saving page:', err);
      setError(err.message || __('Failed to save page', 'llmagnet-llm-txt-generator'));
    } finally {
      setIsSaving(false);
    }
  };

  const handleClose = () => {
    onClose();
  };

  const handleExcerptChange = (value: string) => {
    setExcerpt(value);
    setIsDirty(true);
  };

  const handleImageAltChange = (attachmentId: number, alt: string) => {
    setImageAlts(prev => ({ ...prev, [attachmentId]: alt }));
    setIsDirty(true);
  };

  const handleTagsChange = (newTags: string[]) => {
    setTags(newTags);
    setIsDirty(true);
  };

  if (!isOpen) return null;

  return createPortal(
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-[9998]"
        onClick={handleClose}
        style={{ backdropFilter: 'blur(2px)' }}
      />

      {/* Drawer — portal + flex scroll so content isn't clipped by admin shell overflow */}
      <div
        ref={drawerRef}
        role="dialog"
        aria-modal="true"
        aria-label={__('Page details', 'llmagnet-llm-txt-generator')}
        className="llmagnet-surface llmagnet-side-drawer z-[9999] flex h-[100dvh] max-h-[100dvh] w-[min(600px,90vw)] flex-col overflow-hidden bg-white shadow-2xl"
      >
        <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain">
          {isLoading ? (
            <LoadingSkeleton />
          ) : error ? (
            <ErrorState error={error} onRetry={fetchPageDetails} />
          ) : pageData && visibilityScore ? (
            <>
              <DrawerHeader
                page={pageData}
                score={visibilityScore}
                isDirty={isDirty}
                isSaving={isSaving}
                saveSuccess={saveSuccess}
                onSave={handleSave}
                onClose={handleClose}
              />

              <div className="relative pb-6">
                {/* Content Analysis Sections (Read-only) */}
                <HeadingsSection headings={pageData.heading_structure} />

                <ContentStatsSection
                  wordCount={pageData.word_count}
                  readability={pageData.readability}
                />

                {/* Editable Sections */}
                <ImagesSection
                  images={pageData.images}
                  imageAlts={imageAlts}
                  onAltChange={handleImageAltChange}
                />

                <ExcerptSection
                  excerpt={excerpt}
                  onChange={handleExcerptChange}
                />

                <CategoriesSection
                  categories={pageData.categories}
                  postId={pageData.id}
                />

                <TagsSection
                  tags={tags}
                  onTagsChange={handleTagsChange}
                  apiRoot={apiRoot}
                  apiNamespace={apiNamespace}
                />

                {/* llms.txt include toggle — parity with the Gutenberg panel (FB-5) */}
                <LlmsIncludeToggle
                  postId={pageData.id}
                  apiRoot={apiRoot}
                  apiNamespace={apiNamespace}
                />

              </div>
            </>
          ) : null}
        </div>
      </div>
    </>,
    document.body,
  );
}

// Loading Skeleton
function LoadingSkeleton() {
  return (
    <div className="p-6 animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-3/4 mb-4"></div>
      <div className="h-32 bg-gray-200 rounded mb-4"></div>
      <div className="h-20 bg-gray-200 rounded mb-4"></div>
      <div className="h-20 bg-gray-200 rounded mb-4"></div>
      <div className="h-40 bg-gray-200 rounded"></div>
    </div>
  );
}

// Error State
function ErrorState({ error, onRetry }: { error: string; onRetry: () => void }) {
  return (
    <div className="p-6">
      <div className="text-center py-12">
        <div className="text-red-600 mb-4">
          <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 className="text-xl font-bold mb-2">{__('Error Loading Page', 'llmagnet-llm-txt-generator')}</h3>
        <p className="text-gray-600 mb-4">{error}</p>
        <Button type="button" variant="default" size="lg" onClick={onRetry}>
          {__('Try Again', 'llmagnet-llm-txt-generator')}
        </Button>
      </div>
    </div>
  );
}

function DrawerHeader({
  page,
  score,
  isDirty,
  isSaving,
  saveSuccess,
  onSave,
  onClose,
}: {
  page: PageData;
  score: VisibilityScoreData;
  isDirty: boolean;
  isSaving: boolean;
  saveSuccess: boolean;
  onSave: () => void;
  onClose: () => void;
}) {
  return (
    <>
      <DrawerHeaderBar
        title={page.title}
        postId={page.id}
        permalink={page.permalink}
        path={page.path}
        editUrl={page.edit_url}
        isDirty={isDirty}
        isSaving={isSaving}
        saveSuccess={saveSuccess}
        onSave={onSave}
        onClose={onClose}
      />

      <div className="px-6 py-5">
        <VisibilityScoreCard
          score={score}
          title={__('Page Visibility Score', 'llmagnet-llm-txt-generator')}
          overallInfo={__(
            'Combined score based on Bot Visibility (70%) and Content Quality (30%).',
            'llmagnet-llm-txt-generator',
          )}
          botVisibilityInfo={__(
            'How often AI bots visit this page. Based on crawl frequency, bot quality, and visit count.',
            'llmagnet-llm-txt-generator',
          )}
          contentQualityInfo={__(
            'Content optimization score. Based on length, headings, ALT texts, excerpt, tags, and readability.',
            'llmagnet-llm-txt-generator',
          )}
        />
      </div>
    </>
  );
}

// Headings Structure Section (Read-only)
function HeadingsSection({ headings }: { headings: HeadingItem[] }) {
  const getHeadingColor = (level: string) => {
    switch (level) {
      case 'h2': return 'text-purple-700 bg-purple-50';
      case 'h3': return 'text-blue-700 bg-blue-50';
      case 'h4': return 'text-teal-700 bg-teal-50';
      case 'h5': return 'text-gray-700 bg-gray-50';
      case 'h6': return 'text-gray-600 bg-gray-50';
      default: return 'text-gray-700 bg-gray-50';
    }
  };

  const getIndent = (level: string) => {
    const lvl = parseInt(level.replace('h', ''));
    return (lvl - 2) * 16; // H2 = 0px, H3 = 16px, H4 = 32px, etc.
  };

  return (
    <DrawerSection title={__('Heading Structure', 'llmagnet-llm-txt-generator')}>
      {headings.length === 0 ? (
        <div className="bg-orange-50 border border-orange-200 rounded p-3 text-sm">
          <div className="flex items-start gap-2">
            <span className="text-orange-600 mt-0.5">!</span>
            <div>
              <div className="text-orange-800 font-medium">{__('No headings found', 'llmagnet-llm-txt-generator')}</div>
              <div className="text-orange-700 text-xs mt-1">{__('Add H2 and H3 headings to structure your content for better readability and SEO.', 'llmagnet-llm-txt-generator')}</div>
            </div>
          </div>
        </div>
      ) : (
        <div className="space-y-1.5">
          {headings.map((heading, i) => (
            <div
              key={i}
              className="flex items-center gap-2 text-sm"
              style={{ paddingLeft: `${getIndent(heading.level)}px` }}
            >
              <span className={`px-1.5 py-0.5 rounded text-xs font-mono font-bold ${getHeadingColor(heading.level)}`}>
                {heading.level.toUpperCase()}
              </span>
              <span className="text-gray-700 truncate" title={heading.text}>{heading.text}</span>
            </div>
          ))}
        </div>
      )}
    </DrawerSection>
  );
}

// Content Stats Section (Read-only)
function ContentStatsSection({
  wordCount,
  readability,
}: {
  wordCount: number;
  readability: ReadabilityData;
}) {
  const getWordCountColor = (count: number) => {
    if (count >= 1500) return 'text-green-600';
    if (count >= 800) return 'text-green-600';
    if (count >= 300) return 'text-yellow-600';
    return 'text-red-600';
  };

  const getWordCountLabel = (count: number) => {
    if (count >= 1500) return __('Excellent', 'llmagnet-llm-txt-generator');
    if (count >= 800) return __('Good', 'llmagnet-llm-txt-generator');
    if (count >= 300) return __('Fair', 'llmagnet-llm-txt-generator');
    return __('Short', 'llmagnet-llm-txt-generator');
  };

  return (
    <DrawerSection title={__('Content Stats', 'llmagnet-llm-txt-generator')}>
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-gray-50 rounded-lg p-3 text-center">
          <div className={`text-2xl font-bold ${getWordCountColor(wordCount)}`}>
            {wordCount.toLocaleString()}
          </div>
          <div className="text-xs text-gray-500 mt-1">{__('Words', 'llmagnet-llm-txt-generator')}</div>
          <div className={`text-xs font-medium mt-0.5 ${getWordCountColor(wordCount)}`}>
            {getWordCountLabel(wordCount)}
          </div>
        </div>

        <div className="bg-gray-50 rounded-lg p-3 text-center">
          <div className="text-2xl font-bold text-gray-700">
            {readability.paragraph_count}
          </div>
          <div className="text-xs text-gray-500 mt-1">{__('Paragraphs', 'llmagnet-llm-txt-generator')}</div>
        </div>

        <div className="bg-gray-50 rounded-lg p-3 text-center">
          <div className="text-2xl font-bold text-gray-700">
            {readability.avg_sentence_length}
          </div>
          <div className="text-xs text-gray-500 mt-1">{__('Avg words/sentence', 'llmagnet-llm-txt-generator')}</div>
        </div>
      </div>
    </DrawerSection>
  );
}

// Images Section
function ImagesSection({
  images,
  imageAlts,
  onAltChange,
}: {
  images: PageImage[];
  imageAlts: { [key: number]: string };
  onAltChange: (attachmentId: number, alt: string) => void;
}) {
  const editableImages = images.filter(img => img.attachment_id > 0);
  const readOnlyImages = images.filter(img => img.attachment_id === 0);

  if (images.length === 0) {
    return (
      <DrawerSection title={__('Images & ALT Text', 'llmagnet-llm-txt-generator')}>
        <div className="rounded-md border border-gray-200 bg-gray-50 p-4 text-sm text-gray-500">
          {__('No images found in this post.', 'llmagnet-llm-txt-generator')}
        </div>
      </DrawerSection>
    );
  }

  return (
    <DrawerSection title={__('Images & ALT Text', 'llmagnet-llm-txt-generator')}>
      {editableImages.map((image) => {
        const alt = imageAlts[image.attachment_id] || '';
        const hasAlt = alt && alt.trim().length > 0;

        return (
          <div key={image.attachment_id} className="flex items-start gap-3 mb-3">
            <img
              src={image.url}
              alt={alt || __('Image', 'llmagnet-llm-txt-generator')}
              className="w-20 h-20 object-cover rounded border border-gray-200"
              onError={(e) => {
                (e.target as HTMLImageElement).src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80"%3E%3Crect fill="%23f0f0f0" width="80" height="80"/%3E%3C/svg%3E';
              }}
            />
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                {image.is_featured && (
                  <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded font-medium">{__('Featured', 'llmagnet-llm-txt-generator')}</span>
                )}
              </div>
              <input
                type="text"
                value={alt}
                onChange={(e) => onAltChange(image.attachment_id, e.target.value)}
                placeholder={__('Add descriptive ALT text...', 'llmagnet-llm-txt-generator')}
                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
              />
              {!hasAlt && (
                <div className="text-xs text-orange-600 mt-1 flex items-center gap-1">
                  <span>!</span>
                  <span>{__('Missing ALT text', 'llmagnet-llm-txt-generator')}</span>
                </div>
              )}
              <div className={`text-xs mt-1 ${alt.length >= 50 && alt.length <= 125 ? 'text-green-600' : 'text-gray-500'}`}>
                {alt.length < 50
                  ? sprintf(__('%1$d characters (recommended: 50-125)', 'llmagnet-llm-txt-generator'), alt.length)
                  : alt.length <= 125
                  ? sprintf(_n('%d character', '%d characters', alt.length, 'llmagnet-llm-txt-generator'), alt.length)
                  : sprintf(__('%1$d characters (consider shortening)', 'llmagnet-llm-txt-generator'), alt.length)}
              </div>
            </div>
          </div>
        );
      })}

      {readOnlyImages.length > 0 && (
        <div className="mt-3 rounded-md border border-blue-100 bg-blue-50 p-3 text-xs text-gray-600">
          {sprintf(
            _n(
              '%1$d image found without media library attachment. Edit ALT text in the WordPress editor.',
              '%1$d images found without media library attachment. Edit ALT text in the WordPress editor.',
              readOnlyImages.length,
              'llmagnet-llm-txt-generator'
            ),
            readOnlyImages.length
          )}
        </div>
      )}
    </DrawerSection>
  );
}

// Excerpt Section
function ExcerptSection({
  excerpt,
  onChange,
}: {
  excerpt: string;
  onChange: (value: string) => void;
}) {
  const excerptLength = excerpt.length;

  const getCharCountColor = () => {
    if (excerptLength === 0) return 'text-gray-400';
    if (excerptLength < 120) return 'text-red-600';
    if (excerptLength <= 160) return 'text-green-600';
    return 'text-yellow-600';
  };

  return (
    <DrawerSection
      title={__('Excerpt / Meta Description', 'llmagnet-llm-txt-generator')}
      description={__(
        'Controls how this page appears in search results and AI summaries. Keep it between 120–160 characters.',
        'llmagnet-llm-txt-generator',
      )}
    >
      <textarea
        value={excerpt}
        onChange={(e) => onChange(e.target.value)}
        rows={3}
        className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-500"
        placeholder={__('Add a short excerpt that describes this page...', 'llmagnet-llm-txt-generator')}
      />
      <div className={`mt-1 text-xs ${getCharCountColor()}`}>
        {excerptLength >= 120 && excerptLength <= 160
          ? sprintf(__('%1$d characters — Optimal', 'llmagnet-llm-txt-generator'), excerptLength)
          : sprintf(__('%1$d characters (recommended: 120-160)', 'llmagnet-llm-txt-generator'), excerptLength)}
      </div>
    </DrawerSection>
  );
}

// Categories Section (Read-only)
function CategoriesSection({
  categories,
  postId,
}: {
  categories: PageCategory[];
  postId: number;
}) {
  return (
    <DrawerSection
      title={__('Categories', 'llmagnet-llm-txt-generator')}
      description={__('Managed in the WordPress post editor.', 'llmagnet-llm-txt-generator')}
    >
      {categories.length === 0 ? (
        <div className="bg-orange-50 border border-orange-200 rounded p-3 text-sm">
          <div className="flex items-start gap-2">
            <span className="text-orange-600">!</span>
            <div>
              <div className="text-orange-800 font-medium mb-1">{__('No categories assigned', 'llmagnet-llm-txt-generator')}</div>
              <a
                href={`/wp-admin/post.php?post=${postId}&action=edit`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-orange-600 hover:text-orange-700 underline"
              >
                {__('Edit post in WordPress', 'llmagnet-llm-txt-generator')}
              </a>
            </div>
          </div>
        </div>
      ) : (
        <div className="space-y-2">
          {categories.map(cat => (
            <div key={cat.term_id} className="flex items-center gap-2 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded">
              <span>{cat.path}</span>
            </div>
          ))}
        </div>
      )}

    </DrawerSection>
  );
}

// Available Tag interface
interface AvailableTag {
  term_id: number;
  name: string;
  slug: string;
  count: number;
}

// Tags Section with Autocomplete
function TagsSection({
  tags,
  onTagsChange,
  apiRoot,
  apiNamespace,
}: {
  tags: string[];
  onTagsChange: (tags: string[]) => void;
  apiRoot: string;
  apiNamespace: string;
}) {
  const [newTag, setNewTag] = useState('');
  const [availableTags, setAvailableTags] = useState<AvailableTag[]>([]);
  const [suggestions, setSuggestions] = useState<AvailableTag[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    fetchAvailableTags();
  }, []);

  const fetchAvailableTags = async () => {
    try {
      const response = await fetch(
        `${apiRoot}${apiNamespace}/post-tags`,
        {
          headers: {
            'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
          },
          credentials: 'same-origin',
        }
      );

      if (response.ok) {
        const data = await response.json();
        if (data.success && data.tags) {
          setAvailableTags(data.tags);
        }
      }
    } catch (err) {
      console.error('Error fetching tags:', err);
    }
  };

  useEffect(() => {
    if (newTag.trim().length > 0) {
      const filtered = availableTags.filter(tag =>
        tag.name.toLowerCase().includes(newTag.toLowerCase()) &&
        !tags.includes(tag.name)
      );
      setSuggestions(filtered.slice(0, 8));
      setShowSuggestions(filtered.length > 0);
      setSelectedIndex(-1);
    } else {
      setSuggestions([]);
      setShowSuggestions(false);
    }
  }, [newTag, availableTags, tags]);

  const handleAddTag = (tagName?: string) => {
    const trimmedTag = (tagName || newTag).trim();
    if (trimmedTag && !tags.includes(trimmedTag)) {
      onTagsChange([...tags, trimmedTag]);
      setNewTag('');
      setShowSuggestions(false);
      setSelectedIndex(-1);
    }
  };

  const handleRemoveTag = (tagToRemove: string) => {
    onTagsChange(tags.filter(tag => tag !== tagToRemove));
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      if (selectedIndex >= 0 && suggestions[selectedIndex]) {
        handleAddTag(suggestions[selectedIndex].name);
      } else if (newTag.trim()) {
        handleAddTag();
      }
    } else if (e.key === 'ArrowDown') {
      e.preventDefault();
      setSelectedIndex(prev => prev < suggestions.length - 1 ? prev + 1 : prev);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setSelectedIndex(prev => prev > 0 ? prev - 1 : -1);
    } else if (e.key === 'Escape') {
      setShowSuggestions(false);
      setSelectedIndex(-1);
    }
  };

  const handleSuggestionClick = (tag: AvailableTag) => {
    handleAddTag(tag.name);
    inputRef.current?.focus();
  };

  const getTagCountStatus = () => {
    if (tags.length === 0) return { color: 'text-red-600', message: __('No tags (add 3-8 recommended)', 'llmagnet-llm-txt-generator') };
    if (tags.length <= 2) return { color: 'text-orange-600', message: __('Add more tags (3-8 recommended)', 'llmagnet-llm-txt-generator') };
    if (tags.length <= 8) return { color: 'text-green-600', message: __('Optimal tag count', 'llmagnet-llm-txt-generator') };
    return { color: 'text-yellow-600', message: __('Consider reducing tags (3-8 recommended)', 'llmagnet-llm-txt-generator') };
  };

  const tagStatus = getTagCountStatus();

  return (
    <DrawerSection title={__('Tags', 'llmagnet-llm-txt-generator')}>
      <div className="flex flex-wrap gap-2 mb-3 min-h-[40px]">
        {tags.length === 0 ? (
          <div className="text-sm text-gray-400 italic">{__('No tags yet. Add tags below.', 'llmagnet-llm-txt-generator')}</div>
        ) : (
          tags.map(tag => (
            <span
              key={tag}
              className="inline-flex items-center gap-1 px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm"
            >
              {tag}
              <button
                type="button"
                onClick={() => handleRemoveTag(tag)}
                aria-label={`${__('Remove tag', 'llmagnet-llm-txt-generator')} ${tag}`}
                className="llmagnet-tag-remove-btn hover:text-purple-900 hover:bg-purple-200 rounded-full p-0.5 transition"
              >
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </span>
          ))
        )}
      </div>

      <div className="relative">
        <div className="flex gap-2 mb-3">
          <div className="flex-1 relative">
            <input
              ref={inputRef}
              type="text"
              value={newTag}
              onChange={(e) => setNewTag(e.target.value)}
              onKeyDown={handleKeyDown}
              onFocus={() => newTag.trim() && suggestions.length > 0 && setShowSuggestions(true)}
              onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
              placeholder={__('Add tag...', 'llmagnet-llm-txt-generator')}
              className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
            />

            {showSuggestions && suggestions.length > 0 && (
              <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
                {suggestions.map((tag, index) => (
                  <button
                    key={tag.term_id}
                    type="button"
                    onClick={() => handleSuggestionClick(tag)}
                    className={`llmagnet-suggestion-btn text-sm flex items-center justify-between hover:bg-purple-50 transition-colors ${
                      index === selectedIndex ? 'is-active bg-purple-50' : ''
                    }`}
                  >
                    <span className="font-medium text-gray-700">{tag.name}</span>
                    <span className="text-xs text-gray-400">{sprintf(_n('%d post', '%d posts', tag.count, 'llmagnet-llm-txt-generator'), tag.count)}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
          <button
            type="button"
            onClick={() => handleAddTag()}
            disabled={!newTag.trim()}
            className="llmagnet-drawer-btn llmagnet-drawer-btn--muted hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {__('Add', 'llmagnet-llm-txt-generator')}
          </button>
        </div>
      </div>

      <div className={`rounded-md border border-gray-200 bg-gray-50 p-3 text-xs ${tagStatus.color}`}>
        <span>{tagStatus.message}</span>
      </div>
    </DrawerSection>
  );
}