import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import apiFetch from '@wordpress/api-fetch';

import { Callout } from '../components/ui/callout';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../components/ui/select';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '../components/ui/tabs';
import { classNames } from '../lib/utils';
import { X_HANDLE_ERROR, xHandle } from '../lib/seo/x-handle';
import TagListField, {
  type TagChipExtras,
} from '../components/ui/tag-list-field';
import { useTagList, type TagList } from '../lib/hooks/use-tag-list';

import {
  KEYWORD_TESTS,
  analyze,
  scoreTone,
  type Analysis,
  type AnalysisResult,
} from './analysis/analyzer';
import { AnalysisList, type TestAction } from './components/AnalysisList';
import { withToc } from './lib/blocks';
import {
  CheckboxField,
  FieldHeader,
  ImageField,
  TemplateField,
  TextField,
  ToggleField,
} from './components/fields';
import { FaqGenerator } from './components/FaqGenerator';
import { LinkSuggestions } from './components/LinkSuggestions';
import { PostRedirect } from './components/PostRedirect';
import { KeywordIdeas } from './components/KeywordIdeas';
import { PostFixDialog, type PostFixValues } from './components/PostFix';
import {
  ProductFixButton,
  ProductFixDialog,
  type ProductFixResult,
  type ProductFixTag,
} from './components/ProductFix';
import { isToDo, isToFix } from './components/result-tone';
import { ScoreBadge, TONE_CLASSES } from './components/ScoreBadge';
import { SnippetPreview } from './components/SnippetPreview';
import { Toast } from './components/Toast';
import type { SeoEditorEnv } from './env';
import {
  useAttachmentUrl,
  type EditedPost,
  type SeoMeta,
} from './hooks/use-seo-meta';
import { useAiGate } from './hooks/use-ai-gate';
import { useAnalysisInput } from './hooks/use-analysis-input';
import { isValidGtin } from './lib/gtin';
import {
  KEYWORDS_MAX,
  leadKeyword,
  parseKeywords,
  promoteKeyword,
} from './lib/keywords';
import { asList, asNumber, asRecord, asString } from './lib/meta-values';
import { renderTemplate } from './lib/render-template';
import { SERP_FONTS, SERP_WIDTHS } from './lib/text-width';
import { SchemaTab } from './schema/SchemaTab';

/** The share image a large card wants at least. */
const LARGE_CARD = { width: 1200, height: 630 };

/** The badges the shared image can carry, the empty one meaning the default. */
const OVERLAY_ITEMS = [
  { value: '', label: 'Follow Titles & meta' },
  { value: 'none', label: 'No badge' },
  { value: 'play', label: 'Play button' },
  { value: 'gif', label: 'GIF label' },
];

/** What a fix wrote on the post, for the editor to show without a reload. */
export interface AppliedPost {
  title?: string;
  content?: string;
  excerpt?: string;
  slug?: string;
  tags?: ProductFixTag[];
}

/** Where the panel reads and writes: the block editor's entity, or a classic form. */
export interface PanelData {
  meta: SeoMeta;
  update: (changes: SeoMeta) => void;
  post: EditedPost;
  /** Puts what a fix wrote into the editor's own fields, so a later save keeps it. */
  applyPost?: (changes: AppliedPost) => void;
  /**
   * Keeps the score the analysis gives. The block editor writes it only
   * into a post that already has changes, outside the undo history, so
   * opening the panel never marks a post as edited; without it the score
   * goes through update like any field.
   */
  storeScore?: (score: number | null) => void;
}

const ROBOTS_COPY: Record<string, { label: string; tip: string }> = {
  noindex: {
    label: 'No index',
    tip: 'Keep this page out of search results. It stays online and linkable.',
  },
  nofollow: {
    label: 'No follow',
    tip: 'Ask search engines not to follow the links on this page.',
  },
  noarchive: {
    label: 'No archive',
    tip: 'No cached copy of this page in the results.',
  },
  nosnippet: {
    label: 'No snippet',
    tip: 'No text or video preview under the result.',
  },
  noimageindex: {
    label: 'No image index',
    tip: 'Images on this page are not indexed on their own.',
  },
};

const CONDITIONS = [
  { value: 'new', label: 'New' },
  { value: 'refurbished', label: 'Refurbished' },
  { value: 'used', label: 'Used' },
];

const AVAILABILITIES = [
  { value: 'stock', label: 'From the stock status' },
  { value: 'instock', label: 'In stock' },
  { value: 'outofstock', label: 'Out of stock' },
  { value: 'preorder', label: 'Pre-order' },
  { value: 'backorder', label: 'On backorder' },
];

const DESCRIPTION_TIPS = {
  post: 'The snippet under the title in search results. Empty, the excerpt or the first sentences of the content are used.',
  term: 'The snippet under the title in search results. Empty, the term description is used.',
  user: 'The snippet under the title in search results. Empty, the template from Titles & meta applies.',
};

/**
 * Keeps the keyword chips and the comma-separated meta field in step: the
 * chips follow the stored value, and only what the user adds or removes is
 * written back, so a saved value never bounces between the two.
 */
/** Tests the snippet fixes: the title, the description, the address. */
const SNIPPET_TESTS = new Set([
  'keywordInTitle',
  'keywordInMetaDescription',
  'keywordInPermalink',
  'lengthPermalink',
  'titleStartWithKeyword',
]);

/** Tests the content rewrite fixes. */
const CONTENT_TESTS = new Set([
  'keywordIn10Percent',
  'keywordInContent',
  'lengthContent',
  'keywordInSubheadings',
  'keywordInImageAlt',
  'keywordDensity',
  'contentHasShortParagraphs',
  'contentHasAssets',
  'aeoAnswerFirst',
  'aeoHeadings',
  'aeoKeyTakeaways',
  'aeoTable',
  'aeoNoDashes',
  'aeoNoBannedPhrases',
  'aeoNoPricesOrStock',
]);

const BLOCK_MARKUP = /<!--\s+wp:/;

/**
 * Bring a section of the panel into view, and its field into focus.
 *
 * @param {string}  id    - The section's element id.
 * @param {boolean} focus - Whether to focus its first field.
 */
const reveal = (id: string, focus = false): void => {
  const section = document.getElementById(id);
  section?.scrollIntoView({ block: 'center', behavior: 'smooth' });
  if (focus) section?.querySelector('input')?.focus();
};

/**
 * What is wrong with a canonical as typed: the server keeps a full address
 * or a path on the site, and drops anything else when the post is saved.
 *
 * @param value - The field.
 * @return The warning, or nothing when it will be kept.
 */
const canonicalWarning = (value: string): string | undefined => {
  const typed = value.trim();
  if (typed === '' || (typed.startsWith('/') && !typed.startsWith('//'))) {
    return undefined;
  }
  return /^https?:\/\/(localhost|[a-z0-9-]+(\.[a-z0-9-]+)+)(:\d+)?(\/\S*)?$/i.test(
    typed
  )
    ? undefined
    : 'Not an address: write the full URL (https://…) or a path on this site (/…). This one is dropped on save.';
};

const FocusKeywords = ({
  value,
  onChange,
  chip,
  page,
  searched = false,
}: {
  value: string;
  onChange: (value: string) => void;
  /** Each keyword's score, and the one the analysis shows. */
  chip?: (tag: string, index: number) => TagChipExtras;
  /** The page the ideas are read from. */
  page?: { title: string; html: string };
  /** Search Console's queries join the ideas. */
  searched?: boolean;
}): JSX.Element => {
  const list = useTagList(KEYWORDS_MAX);
  const joined = list.tags.join(', ');
  const stored = parseKeywords(value).join(', ');
  const edited = useRef(false);

  useEffect(() => {
    if (stored !== joined) {
      list.setTags(parseKeywords(value));
    }
  }, [stored]);

  useEffect(() => {
    if (!edited.current) {
      return;
    }
    edited.current = false;
    if (joined !== stored) {
      onChange(joined);
    }
  }, [joined]);

  const userList: TagList = {
    ...list,
    commit: text => {
      edited.current = true;
      list.commit(text);
    },
    remove: tag => {
      edited.current = true;
      list.remove(tag);
    },
    onPaste: event => {
      edited.current = true;
      list.onPaste(event);
    },
  };

  return (
    <div className="flex flex-col gap-2">
      <TagListField
        label="Focus keywords"
        help="What this page should rank for, up to five; the score counts the first. Its words count in any order and form within one sentence. Pick one to see its analysis."
        placeholder="A keyword, then Enter"
        list={userList}
        chip={chip}
      />
      {page && list.tags.length < KEYWORDS_MAX && (
        <KeywordIdeas
          title={page.title}
          html={page.html}
          existing={list.tags}
          onPick={userList.commit}
          searched={searched}
        />
      )}
    </div>
  );
};

const SocialPreview = ({
  imageUrl,
  title,
  description,
  domain,
}: {
  imageUrl: string;
  title: string;
  description: string;
  domain: string;
}): JSX.Element => (
  <div className="overflow-hidden rounded-xl border border-border bg-card">
    {imageUrl ? (
      <img src={imageUrl} alt="" className="block h-36 w-full object-cover" />
    ) : (
      <div className="flex h-24 items-center justify-center bg-muted text-xs text-muted-foreground">
        No image to share yet
      </div>
    )}
    <div className="flex flex-col gap-0.5 border-t border-border bg-muted/40 px-3 py-2">
      <span className="text-[11px] tracking-wide text-muted-foreground uppercase">
        {domain}
      </span>
      <span className="truncate text-sm font-semibold text-foreground">
        {title || 'Your title'}
      </span>
      <span className="line-clamp-2 text-xs text-muted-foreground">
        {description || 'Your description'}
      </span>
    </div>
  </div>
);

/**
 * The SEO panel itself, laid out like Rank Math's: the score, then General,
 * Advanced, Schema and Social. It shows a field only when the object carries it
 * (authors have title, description and robots; terms everything but pillar
 * content). Where the data lives is the caller's business.
 */
export const Panel = ({
  env,
  data,
}: {
  env: SeoEditorEnv;
  data: PanelData;
}): JSX.Element => {
  const { meta, update, post, applyPost, storeScore } = data;
  const { keys } = env;
  const has = (key: string): boolean => env.fields.includes(key);
  const analysed = env.object !== 'user';
  const [tab, setTab] = useState('general');
  const [fixOpen, setFixOpen] = useState(false);
  const [postFixOpen, setPostFixOpen] = useState(false);
  const [postFixContent, setPostFixContent] = useState(false);
  const [postFixSnippet, setPostFixSnippet] = useState(true);
  const ai = useAiGate(
    env.ai,
    env.typeLabel,
    post.id > 0 && Boolean(env.postFix || env.catalogFix)
  );
  const [notice, setNotice] = useState<string | null>(null);
  const clearNotice = useCallback((): void => setNotice(null), []);

  // What the fix wrote goes into the editor's fields too, so the next save
  // carries the same values instead of the ones loaded with the screen.
  const showFixed = (result: ProductFixResult, fields: string[]): void => {
    const changes: AppliedPost = {};
    if (fields.includes('title')) changes.title = result.current.title;
    if (fields.includes('description'))
      changes.content = result.current.description;
    if (fields.includes('short_description'))
      changes.excerpt = result.current.short_description;
    if (fields.includes('tags')) changes.tags = result.tags;
    if (Object.keys(changes).length > 0) applyPost?.(changes);
    const seo: SeoMeta = {};
    if (fields.includes('seo_title'))
      seo[keys.title] = result.current.seo_title;
    if (fields.includes('seo_description'))
      seo[keys.description] = result.current.seo_description;
    if (Object.keys(seo).length > 0) update(seo);
  };
  const showUndone = (result: ProductFixResult): void => {
    applyPost?.({
      title: result.current.title,
      content: result.current.description,
      excerpt: result.current.short_description,
      tags: result.tags,
    });
    update({
      [keys.title]: result.current.seo_title,
      [keys.description]: result.current.seo_description,
    });
  };

  const {
    keywordsText,
    keywords,
    primaryTaxonomy,
    assigned,
    primaryId,
    live,
    titleTemplate,
    descriptionTemplate,
    renderedTitle,
    renderedDescription,
    siteHost,
    input,
  } = useAnalysisInput(env, meta, post);
  const [pickedKeyword, setPickedKeyword] = useState(0);
  const activeKeyword = pickedKeyword < keywords.length ? pickedKeyword : 0;

  const [usedElsewhere, setUsedElsewhere] = useState<boolean | null>(null);
  const [usedBy, setUsedBy] = useState<
    { id: number; title: string; link: string; edit: string }[]
  >([]);
  useEffect(() => {
    const keyword = live.keyword.trim();
    if (keyword === '') {
      setUsedElsewhere(null);
      setUsedBy([]);
      return undefined;
    }
    let stale = false;
    const timer = setTimeout(() => {
      apiFetch<{
        used: boolean;
        posts: { id: number; title: string; link: string; edit: string }[];
      }>({
        path: `/recomaze/v1/seo/keyword-used?keyword=${encodeURIComponent(
          keyword
        )}&exclude=${post.id}`,
      })
        .then(answer => {
          if (!stale) {
            setUsedElsewhere(answer.used);
            setUsedBy(answer.posts ?? []);
          }
        })
        .catch(() => {
          if (!stale) {
            setUsedElsewhere(null);
            setUsedBy([]);
          }
        });
    }, 600);
    return () => {
      stale = true;
      clearTimeout(timer);
    };
  }, [live.keyword, post.id]);
  const analysis: Analysis = useMemo(
    () =>
      analyze({
        ...input,
        keyword: live.keyword,
        keywordUsedElsewhere: env.object === 'post' ? usedElsewhere : null,
      }),
    [input, live.keyword, env.object, usedElsewhere]
  );
  // The other keywords support the first: they are judged on the text and
  // a subheading (an archive's on its description), for the score on their
  // chips and for the list when one is picked; the saved score stays the
  // first's.
  const secondary: Analysis[] = useMemo(
    () =>
      keywords.slice(1).map(keyword =>
        analyze({
          ...input,
          keyword,
          keywordUsedElsewhere: null,
          role: 'secondary',
        })
      ),
    [input, keywords]
  );
  const secondaryRule =
    env.object === 'term'
      ? 'on the description'
      : 'on the text and a subheading';
  const shown =
    activeKeyword > 0 ? (secondary[activeKeyword - 1] ?? analysis) : analysis;
  const keywordChip = (tag: string, index: number): TagChipExtras => {
    const score = index === 0 ? analysis.score : secondary[index - 1]?.score;
    return {
      active: keywords.length > 1 && index === activeKeyword,
      onSelect: keywords.length > 1 ? () => setPickedKeyword(index) : undefined,
      title:
        index === 0
          ? `The first keyword: the page's score, ${analysis.score} of 100`
          : `A secondary keyword, judged ${secondaryRule}: ${score ?? 0} of 100`,
      badge:
        score === undefined ? undefined : (
          <span
            className={classNames(
              'text-[11px] font-semibold tabular-nums',
              TONE_CLASSES[scoreTone(score)]
            )}
          >
            {score}
          </span>
        ),
    };
  };

  // The counts are of the tests that weigh on the score. The failing list
  // puts the tests that lost all their points first, then the ones that
  // earned part of them, then the advice (AI answers, keyword used before,
  // a long post's table of contents). Tests shown for comparison only are
  // never sent to be fixed.
  // Without a focus keyword the keyword tests have nothing to measure: a
  // line says so above the list, and they are neither listed as failing
  // nor sent to be fixed.
  const counted = analysis.needsKeyword
    ? analysis.results.filter(result => !KEYWORD_TESTS.includes(result.id))
    : analysis.results;
  const weighted = counted.filter(result => result.max > 0);
  const passed = weighted.filter(result => result.passed).length;
  const failing = [
    ...weighted.filter(isToFix),
    ...weighted.filter(result => result.partial && isToDo(result)),
    ...counted.filter(result => result.max === 0 && isToDo(result)),
  ];
  const storesScore = analysed && has(keys.score);

  // The failing tests in the words the panel shows, with the remedy after
  // each: what the Copilot and the fix in place are told.
  const lineOf = (result: AnalysisResult): string =>
    `${result.message}${result.fix ? ` (${result.fix})` : ''}`;
  const failingLines = failing.map(lineOf);
  // The fix in place gets them by id too: the agent answers them one by one
  // and says which it could not close. It reads the media test as a page
  // without a picture and has the merchant upload one, so a page that has
  // some, and only earned part of the points, is not sent that test.
  const fixable = failing.filter(
    result => !(result.id === 'contentHasAssets' && result.partial)
  );
  const fixLines = fixable.map(lineOf);
  const fixIds = fixable.map(result => result.id);

  // The Copilot lives on the plugin page; it opens there with the post and
  // its failing tests as the first turn.
  const fixWithAiUrl = useMemo(() => {
    if (failing.length === 0 || env.object === 'user' || env.appUrl === '')
      return undefined;
    const prompt = [
      `Fix the SEO of ${env.object === 'term' ? 'the archive' : 'the ' + env.typeLabel.toLowerCase()} "${post.title || post.slug}" (${env.object} #${env.objectId}, ${post.link || env.objectLink}). Focus keyword: ${live.keyword || 'none yet'}. The content analysis fails these tests:`,
      ...failingLines.map(line => `- ${line}`),
      'Write the SEO title, meta description and focus keyword where they are missing or wrong and save them with the SEO tools; for anything in the content itself, tell me exactly what to change and where.',
    ].join('\n');
    return `${env.appUrl}#/seo/checkup?copilot=${encodeURIComponent(prompt)}`;
  }, [
    failing.length,
    failingLines,
    env.object,
    env.typeLabel,
    env.objectId,
    env.objectLink,
    env.appUrl,
    post.title,
    post.slug,
    post.link,
    live.keyword,
  ]);

  // The fix in place: the agent writes the snippet, and the content when
  // asked, for the post as it stands here; the snippet goes into these
  // fields and the content into the editor, all saved with the post.
  const fixesInPlace =
    Boolean(env.postFix) && env.object === 'post' && post.id > 0;
  const openFix = (withContent: boolean): void => {
    setPostFixContent(withContent);
    // From a content test the snippet comes ticked only when one of its
    // own tests fails too: a good title is not paid for again.
    setPostFixSnippet(
      !withContent || failing.some(result => SNIPPET_TESTS.has(result.id))
    );
    setPostFixOpen(true);
  };
  // Each failing test offers the way to fix it here: the snippet or the
  // content rewrite, the link suggestions, the FAQ, the keyword field, or
  // the table of contents block itself.
  const actionFor = (result: AnalysisResult): TestAction | undefined => {
    if (
      (result.id === 'keywordInTitle' && live.keyword === '') ||
      result.id === 'keywordNotUsed'
    ) {
      return {
        label:
          live.keyword === ''
            ? 'Add a focus keyword'
            : 'Choose another keyword',
        run: () => reveal('recomaze-seo-keywords', true),
      };
    }
    if (result.id === 'productShortDescription' && env.catalogFix) {
      return {
        label: 'Fix title & description',
        run: () => setFixOpen(true),
      };
    }
    if (!fixesInPlace) return undefined;
    if (SNIPPET_TESTS.has(result.id)) {
      return { label: 'Fix with AI', run: () => openFix(false) };
    }
    if (
      CONTENT_TESTS.has(result.id) &&
      !(result.id === 'contentHasAssets' && result.partial)
    ) {
      return { label: 'Rewrite with AI', run: () => openFix(true) };
    }
    if (result.id === 'linksHasInternal') {
      return {
        label: 'Suggest links',
        run: () => reveal('recomaze-seo-links'),
      };
    }
    if (result.id === 'aeoFaq') {
      return { label: 'Write a FAQ', run: () => reveal('recomaze-seo-faq') };
    }
    if (result.id === 'contentHasTOC' && BLOCK_MARKUP.test(post.content)) {
      return {
        label: 'Add the table of contents',
        run: () => applyPost?.({ content: withToc(post.content) }),
      };
    }
    return undefined;
  };
  const fixPage = useMemo(
    () => ({
      title: post.title,
      content: post.content,
      excerpt: post.excerpt,
      keyword: live.keyword,
      slug: post.slug,
      status: post.status,
      autoRedirects: env.postFix?.autoRedirects ?? false,
      keywordUsedElsewhere: usedElsewhere === true,
      tests: fixLines,
      testIds: fixIds,
    }),
    [
      post.title,
      post.content,
      post.excerpt,
      post.slug,
      post.status,
      env.postFix?.autoRedirects,
      live.keyword,
      usedElsewhere,
      fixLines,
      fixIds,
    ]
  );
  const fixCurrent = useMemo(
    () => ({
      title: renderedTitle,
      description: renderedDescription,
      keyword: live.keyword,
      slug: post.slug,
      content: post.content,
    }),
    [renderedTitle, renderedDescription, live.keyword, post.slug, post.content]
  );
  const applySuggestion = (values: Partial<PostFixValues>): void => {
    const changes: SeoMeta = {};
    const filled: string[] = [];
    if (values.title !== undefined) {
      changes[keys.title] = values.title;
      filled.push('SEO title');
    }
    if (values.description !== undefined) {
      changes[keys.description] = values.description;
      filled.push('meta description');
    }
    if (values.keyword !== undefined) {
      changes[keys.focusKeywords] = leadKeyword(
        asString(meta[keys.focusKeywords]),
        values.keyword
      );
      filled.push('focus keyword');
    }
    if (values.slug !== undefined) {
      filled.push('URL slug');
    }
    const rewritten = values.content !== undefined;
    if (filled.length === 0 && !rewritten) return;
    if (Object.keys(changes).length > 0) update(changes);
    if (values.slug !== undefined || rewritten) {
      applyPost?.({
        ...(values.slug !== undefined ? { slug: values.slug } : {}),
        ...(rewritten ? { content: values.content } : {}),
      });
    }
    const list = (items: string[]): string =>
      items.length > 1
        ? `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`
        : items[0];
    const parts: string[] = [];
    if (filled.length > 0) parts.push(`${list(filled)} filled in`);
    if (rewritten) parts.push('the content rewritten');
    const sentence = list(parts);
    setNotice(
      `${sentence.charAt(0).toUpperCase()}${sentence.slice(1)}. Saved with the ${env.typeLabel.toLowerCase()} when you update it.`
    );
  };

  useEffect(() => {
    if (!storesScore) {
      return undefined;
    }
    const timer = setTimeout(() => {
      if (storeScore) {
        storeScore(analysis.needsKeyword ? null : analysis.score);
      } else if (asNumber(meta[keys.score]) !== analysis.score) {
        update({ [keys.score]: analysis.score });
      }
    }, 800);
    return () => clearTimeout(timer);
  }, [storesScore, storeScore, analysis.score, meta, keys.score, update]);

  const robots = asList(meta[keys.robots]);
  // "No limit set" read as none while the site printed large.
  const siteImagePreview = env.robotsLimits?.['max-image-preview']
    ? `As the site: ${env.robotsLimits['max-image-preview']}`
    : 'No limit set';
  const advanced = asRecord(meta[keys.advancedRobots]);
  const setAdvanced = (directive: string, value: string): void => {
    const next = { ...advanced };
    if (value.trim() === '') {
      delete next[directive];
    } else {
      next[directive] = value.trim();
    }
    update({ [keys.advancedRobots]: next });
  };

  const social = has(keys.ogTitle);
  const profiles = has(keys.authorFacebook);
  const schema = has(keys.schema);
  const product = has(keys.gtin) ? env.product : null;
  const ogTitle = asString(meta[keys.ogTitle]);
  const ogDescription = asString(meta[keys.ogDescription]);
  const ogImageId = asNumber(meta[keys.ogImageId]);
  // X's large card and Facebook's link preview want 1200 × 630.
  const largeCard =
    (env.twitterCard ?? 'summary_large_image') === 'summary_large_image'
      ? LARGE_CARD
      : undefined;
  const ogImageUrl = asString(meta[keys.ogImage]);
  const featuredUrl = useAttachmentUrl(post.featuredImageId);
  const ogAttachmentUrl = useAttachmentUrl(ogImageId);
  const twCustom = Boolean(meta[keys.twCustom]);
  const twImageUrl =
    useAttachmentUrl(asNumber(meta[keys.twImageId])) ||
    asString(meta[keys.twImage]);
  const shareImage = ogAttachmentUrl || ogImageUrl || featuredUrl;
  const shareTitle = ogTitle
    ? renderTemplate(ogTitle, env, live)
    : renderedTitle;
  const shareDescription = ogDescription
    ? renderTemplate(ogDescription, env, live)
    : renderedDescription;

  return (
    <div className="flex flex-col gap-4 p-3 text-sm">
      {!env.outputEnabled && (
        <Callout tone="warning" className="text-xs">
          {env.conflicts.join(', ')} prints the head of this site. These fields
          are saved and take over the moment you switch to Recomaze.
        </Callout>
      )}

      {analysed && (
        <ScoreBadge
          score={analysis.needsKeyword ? null : analysis.score}
          passed={passed}
          total={weighted.length}
          failing={failing}
          onShowAll={() => {
            setTab('general');
            window.setTimeout(
              () =>
                document
                  .getElementById('recomaze-seo-analysis')
                  ?.scrollIntoView({ block: 'start', behavior: 'smooth' }),
              50
            );
          }}
          onFix={fixesInPlace ? () => openFix(false) : undefined}
          fixUrl={fixWithAiUrl}
        >
          {env.catalogFix && post.id > 0 && (
            <ProductFixButton onClick={() => setFixOpen(true)} />
          )}
        </ScoreBadge>
      )}

      {fixesInPlace && env.postFix && (
        <PostFixDialog
          postId={post.id}
          typeLabel={env.typeLabel}
          credits={env.postFix.credits}
          contentCredits={env.postFix.contentCredits}
          pricingUrl={`${env.appUrl}#/pricing`}
          copilotUrl={fixWithAiUrl}
          page={fixPage}
          current={fixCurrent}
          ai={ai}
          open={postFixOpen}
          withContent={postFixContent}
          withSnippet={postFixSnippet}
          onOpenChange={setPostFixOpen}
          onApply={applySuggestion}
        />
      )}

      <Toast message={notice} onDone={clearNotice} />

      {env.catalogFix && post.id > 0 && (
        <ProductFixDialog
          postId={post.id}
          draft={{
            title: post.title,
            content: post.content,
            excerpt: post.excerpt,
            keyword: live.keyword,
          }}
          creditsPerTopic={env.catalogFix.creditsPerTopic}
          pricingUrl={`${env.appUrl}#/pricing`}
          ai={ai}
          open={fixOpen}
          onOpenChange={setFixOpen}
          onApplied={showFixed}
          onUndone={showUndone}
        />
      )}

      <Tabs value={tab} onValueChange={next => setTab(String(next))}>
        {/* Up to five tabs share the sidebar's width on one row. */}
        <TabsList className="w-full [&>*]:min-w-0 [&>*]:px-1 [&>*]:text-xs">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="advanced">Advanced</TabsTrigger>
          {product && <TabsTrigger value="product">Product</TabsTrigger>}
          {schema && <TabsTrigger value="schema">Schema</TabsTrigger>}
          {social && <TabsTrigger value="social">Social</TabsTrigger>}
          {profiles && <TabsTrigger value="profiles">Profiles</TabsTrigger>}
        </TabsList>

        <TabsContent value="general" className="flex flex-col gap-4 pt-3">
          {has(keys.focusKeywords) && (
            <div id="recomaze-seo-keywords">
              <FocusKeywords
                value={asString(meta[keys.focusKeywords])}
                onChange={value => update({ [keys.focusKeywords]: value })}
                chip={analysed ? keywordChip : undefined}
                page={{ title: post.title, html: post.content }}
                searched={Boolean(env.searchIdeas)}
              />
            </div>
          )}
          {has(keys.focusKeywords) && usedBy.length > 0 && (
            <p className="text-xs text-amber-700 dark:text-amber-400">
              “{live.keyword}” is also the first keyword of{' '}
              {usedBy.map((other, index) => (
                <span key={other.id}>
                  {index > 0 && ', '}
                  <a
                    href={other.edit || other.link}
                    target="_blank"
                    rel="noreferrer"
                    className="underline underline-offset-2"
                  >
                    {other.title || `#${other.id}`}
                  </a>
                </span>
              ))}
              . Two pages on one keyword compete for it; give each its own.
            </p>
          )}
          <SnippetPreview
            siteName={env.siteName}
            url={post.link || env.siteUrl}
            title={renderedTitle}
            description={renderedDescription}
          />
          <TemplateField
            label="SEO title"
            tip="What search results and the browser tab show. Google cuts titles at about 600 pixels, so the counter shows characters and pixels. Empty, the template from Titles & meta applies."
            value={titleTemplate}
            onChange={value => update({ [keys.title]: value })}
            placeholder={env.templates.title}
            variables={env.variables}
            rendered={renderedTitle}
            min={15}
            max={60}
            font={SERP_FONTS.title}
            maxPixels={SERP_WIDTHS.title}
          />
          <TemplateField
            label="Meta description"
            tip={DESCRIPTION_TIPS[env.object]}
            value={descriptionTemplate}
            onChange={value => update({ [keys.description]: value })}
            placeholder={env.templates.description}
            variables={env.variables}
            rendered={renderedDescription}
            min={80}
            max={160}
            multiline
            font={SERP_FONTS.description}
            maxPixels={SERP_WIDTHS.description}
          />
          {primaryTaxonomy && assigned.length > 1 && (
            <div className="flex flex-col gap-1.5">
              <FieldHeader
                label={`Primary ${primaryTaxonomy.label.toLowerCase()}`}
                tip="The one used in the URL, the breadcrumbs and the %primary_category% variable when the post has several."
              />
              <Select
                items={assigned.map(term => ({
                  value: String(term.id),
                  label: term.name,
                }))}
                value={String(primaryId || assigned[0]?.id || '')}
                onValueChange={value =>
                  update({ [primaryTaxonomy.primaryKey]: Number(value) })
                }
              >
                <SelectTrigger
                  size="sm"
                  className="w-full"
                  aria-label={`Primary ${primaryTaxonomy.label.toLowerCase()}`}
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {assigned.map(term => (
                    <SelectItem key={term.id} value={String(term.id)}>
                      {term.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}
          {analysed && (
            <div className="flex flex-col gap-2">
              <FieldHeader
                label={
                  env.object === 'term'
                    ? 'Archive analysis'
                    : 'Content analysis'
                }
                tip={
                  env.object === 'term'
                    ? 'The checks an archive page can pass: the keyword in the title, the description and the URL, and how the title reads.'
                    : 'The usual on-page SEO checks, weighed by the Recomaze rules: keyword density counts every focus keyword from 0.3%, product pages are complete at 200 words and articles at 600, a number in the title is not asked for, secondary keywords are judged on the text and a subheading, and sentiment, power words, external links and the table of contents inform without counting, as the Recomaze agent writes. A test that earned part of its points says how to earn the rest. The score is saved with the post.'
                }
              />
              {analysis.needsKeyword && (
                <p className="text-xs text-muted-foreground">
                  Add a focus keyword to run the keyword tests.
                </p>
              )}
              {activeKeyword > 0 && (
                <Callout tone="info" className="text-xs">
                  <span>
                    “{keywords[activeKeyword]}” is a secondary keyword, judged{' '}
                    {secondaryRule}: {shown.score} of 100. The title and the URL
                    belong to the first keyword, which the score above counts.{' '}
                    <button
                      type="button"
                      className="font-medium underline underline-offset-2"
                      onClick={() => {
                        update({
                          [keys.focusKeywords]: promoteKeyword(
                            keywordsText,
                            activeKeyword
                          ),
                        });
                        setPickedKeyword(0);
                      }}
                    >
                      Make it the first keyword
                    </button>{' '}
                    ·{' '}
                    <button
                      type="button"
                      className="font-medium underline underline-offset-2"
                      onClick={() => setPickedKeyword(0)}
                    >
                      Back to the first
                    </button>
                  </span>
                </Callout>
              )}
              <div id="recomaze-seo-analysis">
                <AnalysisList
                  results={shown === analysis ? counted : shown.results}
                  actionFor={actionFor}
                />
              </div>
            </div>
          )}

          {fixesInPlace && env.postFix && (
            <>
              <div id="recomaze-seo-links" className="flex flex-col gap-2">
                <FieldHeader
                  label="Internal links"
                  tip="Pages of this site worth linking to from this one, with the words to link. Internal links carry readers and crawlers on, and the analysis counts them."
                />
                <LinkSuggestions
                  postId={post.id}
                  credits={env.postFix.linksCredits}
                  pricingUrl={`${env.appUrl}#/pricing`}
                  content={post.content}
                  page={{ title: post.title, keyword: live.keyword }}
                  ai={ai}
                  onInsert={content => applyPost?.({ content })}
                />
              </div>
              <div id="recomaze-seo-faq" className="flex flex-col gap-2">
                <FieldHeader
                  label="FAQ"
                  tip="Questions this page's own text answers, added as the FAQ block: the questions show on the page and their FAQPage schema goes with them. Answer engines (ChatGPT, Perplexity, AI Overviews) lift answers like these; Google shows FAQ results only for government and health sites."
                />
                <FaqGenerator
                  postId={post.id}
                  credits={env.postFix.faqCredits}
                  pricingUrl={`${env.appUrl}#/pricing`}
                  content={post.content}
                  page={{ title: post.title, keyword: live.keyword }}
                  ai={ai}
                  onAdd={content => applyPost?.({ content })}
                />
              </div>
            </>
          )}
        </TabsContent>

        <TabsContent value="advanced" className="flex flex-col gap-4 pt-3">
          <div className="flex flex-col gap-2">
            <FieldHeader
              label="Robots meta"
              tip="What search engines may do with this page. Indexing follows Titles & meta unless you choose here; the boxes below add limits."
            />
            <div className="flex flex-col gap-1">
              <Label className="text-xs">Indexing</Label>
              <Select
                items={[
                  {
                    value: 'default',
                    label: env.noindexByDefault
                      ? `As Titles & meta says (no index for ${env.typeLabel.toLowerCase()})`
                      : 'As Titles & meta says (index)',
                  },
                  { value: 'index', label: 'Index this page' },
                  { value: 'noindex', label: 'No index' },
                ]}
                value={
                  robots.includes('noindex')
                    ? 'noindex'
                    : robots.includes('index')
                      ? 'index'
                      : 'default'
                }
                onValueChange={value =>
                  update({
                    [keys.robots]: [
                      ...robots.filter(
                        item => item !== 'index' && item !== 'noindex'
                      ),
                      ...(value === 'default' ? [] : [String(value)]),
                    ],
                  })
                }
              >
                <SelectTrigger
                  size="sm"
                  className="w-full"
                  aria-label="Indexing"
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">
                    {env.noindexByDefault
                      ? `As Titles & meta says (no index for ${env.typeLabel.toLowerCase()})`
                      : 'As Titles & meta says (index)'}
                  </SelectItem>
                  <SelectItem value="index">Index this page</SelectItem>
                  <SelectItem value="noindex">No index</SelectItem>
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                {env.noindexByDefault
                  ? `${env.typeLabel} pages are noindex in Titles & meta; "Index this page" makes this one the exception.`
                  : 'No index keeps this page out of search results; it stays online and linkable.'}
              </p>
            </div>
            {env.robotsTokens
              .filter(token => token !== 'index' && token !== 'noindex')
              .map(token => (
                <CheckboxField
                  key={token}
                  label={ROBOTS_COPY[token]?.label ?? token}
                  tip={ROBOTS_COPY[token]?.tip}
                  checked={robots.includes(token)}
                  onChange={checked =>
                    update({
                      [keys.robots]: checked
                        ? [...robots.filter(item => item !== token), token]
                        : robots.filter(item => item !== token),
                    })
                  }
                />
              ))}
          </div>
          {has(keys.advancedRobots) && (
            <div className="flex flex-col gap-2">
              <FieldHeader
                label="Advanced robots"
                tip="Limits on what Google shows from this page. Left empty, the page prints the site-wide limits of Titles & meta, shown in grey."
              />
              <div className="grid grid-cols-2 gap-2">
                <div className="flex flex-col gap-1">
                  <Label className="text-xs">Max snippet</Label>
                  <Input
                    value={advanced['max-snippet'] ?? ''}
                    placeholder={env.robotsLimits?.['max-snippet'] || '-1'}
                    inputMode="numeric"
                    onChange={event =>
                      setAdvanced('max-snippet', event.target.value)
                    }
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <Label className="text-xs">Max video preview</Label>
                  <Input
                    value={advanced['max-video-preview'] ?? ''}
                    placeholder={
                      env.robotsLimits?.['max-video-preview'] || '-1'
                    }
                    inputMode="numeric"
                    onChange={event =>
                      setAdvanced('max-video-preview', event.target.value)
                    }
                  />
                </div>
              </div>
              <div className="flex flex-col gap-1">
                <Label className="text-xs">Max image preview</Label>
                <Select
                  items={[
                    { value: 'default', label: siteImagePreview },
                    { value: 'none', label: 'None' },
                    { value: 'standard', label: 'Standard' },
                    { value: 'large', label: 'Large' },
                  ]}
                  value={advanced['max-image-preview'] ?? 'default'}
                  onValueChange={value =>
                    setAdvanced(
                      'max-image-preview',
                      value === 'default' ? '' : String(value)
                    )
                  }
                >
                  <SelectTrigger
                    size="sm"
                    className="w-full"
                    aria-label="Max image preview"
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="default">{siteImagePreview}</SelectItem>
                    <SelectItem value="none">None</SelectItem>
                    <SelectItem value="standard">Standard</SelectItem>
                    <SelectItem value="large">Large</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          )}
          {has(keys.canonical) && (
            <TextField
              label="Canonical URL"
              tip="The URL search engines should credit for this content. Empty means this page's own URL."
              type="url"
              value={asString(meta[keys.canonical])}
              placeholder={post.link}
              warning={canonicalWarning(asString(meta[keys.canonical]))}
              onChange={value => update({ [keys.canonical]: value })}
            />
          )}
          {has(keys.breadcrumbTitle) && (
            <TextField
              label="Breadcrumb title"
              tip="A shorter name for this page in the breadcrumb trail. Empty means its own title."
              value={asString(meta[keys.breadcrumbTitle])}
              onChange={value => update({ [keys.breadcrumbTitle]: value })}
            />
          )}
          {has(keys.pillar) && (
            <ToggleField
              label="Pillar content"
              tip="Mark the pages that hold a topic together; link suggestions favour them."
              checked={Boolean(meta[keys.pillar])}
              onChange={checked => update({ [keys.pillar]: checked })}
            />
          )}
          {has(keys.excludeSitemap) && (
            <ToggleField
              label="Exclude from sitemap"
              tip="Leave this page out of the XML sitemap. Noindex pages are left out anyway."
              checked={Boolean(meta[keys.excludeSitemap])}
              onChange={checked => update({ [keys.excludeSitemap]: checked })}
            />
          )}
          {env.postRedirects && post.id > 0 && (
            <PostRedirect postId={post.id} appUrl={env.appUrl} />
          )}
        </TabsContent>

        {product && (
          <TabsContent value="product" className="flex flex-col gap-4 pt-3">
            <p className="text-xs text-muted-foreground">
              What Google Shopping and the product rich result read from this
              page, on top of the price and stock WooCommerce already gives.
            </p>
            <TextField
              label="Brand"
              tip="Empty, the brand comes from the brand taxonomy picked in General settings."
              value={asString(meta[keys.brand])}
              placeholder={product.brand}
              onChange={value => update({ [keys.brand]: value })}
            />
            <TextField
              label="GTIN"
              tip="The barcode number: EAN, UPC or ISBN-13. Empty, the GTIN WooCommerce holds on the product is used."
              value={asString(meta[keys.gtin])}
              placeholder={product.gtin}
              onChange={value => update({ [keys.gtin]: value })}
              warning={
                asString(meta[keys.gtin]).trim() !== ''
                  ? !isValidGtin(asString(meta[keys.gtin]))
                    ? 'Not a valid barcode: a GTIN has 8, 12, 13 or 14 digits and ends in a check digit. Left out of the schema until it is right.'
                    : undefined
                  : product.gtin.trim() !== '' && !isValidGtin(product.gtin)
                    ? `The GTIN WooCommerce holds, ${product.gtin}, is not a valid barcode (its digits or check digit are wrong), so the schema leaves it out. Correct it on the product, or write the right one here.`
                    : undefined
              }
            />
            <TextField
              label="MPN"
              tip="The manufacturer part number, for products without a barcode."
              value={asString(meta[keys.mpn])}
              onChange={value => update({ [keys.mpn]: value })}
            />
            <TextField
              label="ISBN"
              tip="For books only; the 10 or 13 digit number."
              value={asString(meta[keys.isbn])}
              onChange={value => update({ [keys.isbn]: value })}
            />
            <div className="flex flex-col gap-1.5">
              <FieldHeader
                label="Condition"
                tip="Google shows it in Shopping results and expects it on second-hand goods."
              />
              <Select
                items={CONDITIONS}
                value={asString(meta[keys.condition]) || 'new'}
                onValueChange={value =>
                  update({ [keys.condition]: value === 'new' ? '' : value })
                }
              >
                <SelectTrigger
                  size="sm"
                  className="w-full"
                  aria-label="Condition"
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {CONDITIONS.map(choice => (
                    <SelectItem key={choice.value} value={choice.value}>
                      {choice.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex flex-col gap-1.5">
              <FieldHeader
                label="Availability"
                tip="Normally the stock status decides. Override it for pre-orders or when the stock count lies."
              />
              <Select
                items={AVAILABILITIES}
                value={asString(meta[keys.availability]) || 'stock'}
                onValueChange={value =>
                  update({
                    [keys.availability]: value === 'stock' ? '' : value,
                  })
                }
              >
                <SelectTrigger
                  size="sm"
                  className="w-full"
                  aria-label="Availability"
                >
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {AVAILABILITIES.map(choice => (
                    <SelectItem key={choice.value} value={choice.value}>
                      {choice.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </TabsContent>
        )}

        {schema && (
          <TabsContent value="schema" className="flex flex-col gap-4 pt-3">
            <SchemaTab
              value={asString(meta[keys.schema])}
              custom={asString(meta[keys.schemaCustom])}
              defaultType={env.schemaDefault}
              typeLabel={env.typeLabel}
              postLink={post.link}
              isProduct={product !== null}
              businessTypes={env.businessTypes}
              onChange={value => update({ [keys.schema]: value })}
              onCustomChange={value => update({ [keys.schemaCustom]: value })}
            />
          </TabsContent>
        )}

        {social && (
          <TabsContent value="social" className="flex flex-col gap-4 pt-3">
            <SocialPreview
              imageUrl={shareImage}
              title={shareTitle}
              description={shareDescription}
              domain={siteHost}
            />
            <TemplateField
              label="Social title"
              tip="Shown when the page is shared on Facebook, LinkedIn and chat apps. Empty, the SEO title is used."
              value={ogTitle}
              onChange={value => update({ [keys.ogTitle]: value })}
              placeholder={renderedTitle}
              variables={env.variables}
              rendered={shareTitle}
              min={30}
              max={95}
            />
            <TemplateField
              label="Social description"
              tip="Empty, the meta description is used."
              value={ogDescription}
              onChange={value => update({ [keys.ogDescription]: value })}
              placeholder={renderedDescription}
              variables={env.variables}
              rendered={shareDescription}
              min={60}
              max={200}
              multiline
            />
            <ImageField
              label="Social image"
              tip="At least 1200 × 630 pixels. Empty, the featured image is shared."
              imageId={ogImageId}
              imageUrl={ogImageUrl}
              minSize={largeCard}
              onChange={image =>
                update({
                  [keys.ogImageId]: image.id,
                  [keys.ogImage]: image.url,
                })
              }
            />
            {has(keys.ogOverlay) && (
              <div className="flex flex-col gap-1.5">
                <FieldHeader
                  label="Badge on the image"
                  tip="Drawn in the middle of the shared image, on a copy kept next to the uploads: a play button for video, a GIF label for animations. Default follows Titles & meta."
                />
                <Select
                  items={OVERLAY_ITEMS}
                  value={asString(meta[keys.ogOverlay])}
                  onValueChange={value =>
                    update({ [keys.ogOverlay]: String(value ?? '') })
                  }
                >
                  <SelectTrigger
                    size="sm"
                    className="w-full"
                    aria-label="Badge on the image"
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {OVERLAY_ITEMS.map(item => (
                      <SelectItem key={item.value} value={item.value}>
                        {item.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
            <ToggleField
              label="Own fields for X (Twitter)"
              tip="Off, X shows the social title, description and image above. On, it gets the fields below."
              checked={twCustom}
              onChange={checked => update({ [keys.twCustom]: checked })}
            />
            {twCustom && (
              <>
                <TextField
                  label="X title"
                  value={asString(meta[keys.twTitle])}
                  placeholder={shareTitle}
                  onChange={value => update({ [keys.twTitle]: value })}
                />
                <TextField
                  label="X description"
                  value={asString(meta[keys.twDescription])}
                  placeholder={shareDescription}
                  onChange={value => update({ [keys.twDescription]: value })}
                  multiline
                />
                <ImageField
                  label="X image"
                  imageId={asNumber(meta[keys.twImageId])}
                  imageUrl={twImageUrl}
                  minSize={largeCard}
                  onChange={image =>
                    update({
                      [keys.twImageId]: image.id,
                      [keys.twImage]: image.url,
                    })
                  }
                />
              </>
            )}
          </TabsContent>
        )}

        {profiles && (
          <TabsContent value="profiles" className="flex flex-col gap-4 pt-3">
            <p className="text-xs text-muted-foreground">
              Where else this author is. Search and AI engines read these links
              to tell who wrote a page.
            </p>
            <TextField
              label="Facebook profile"
              tip="The address of the author's Facebook profile. Printed as article:author on their posts and added to their Person in the schema."
              type="url"
              value={asString(meta[keys.authorFacebook])}
              placeholder="https://www.facebook.com/…"
              onChange={value => update({ [keys.authorFacebook]: value })}
            />
            <TextField
              label="X username"
              tip="The username alone, without the @; a pasted profile address is kept as its username. Printed as twitter:creator on the author's posts."
              value={asString(meta[keys.authorX])}
              placeholder="username"
              warning={
                xHandle(asString(meta[keys.authorX])) === null
                  ? X_HANDLE_ERROR
                  : undefined
              }
              onChange={value => update({ [keys.authorX]: value })}
            />
            <TextField
              label="Other profiles"
              tip="One address a line: LinkedIn, Instagram, YouTube, a Wikipedia page about the author. They join the sameAs of the author's Person in the schema, with their website when it is not this shop's."
              value={asString(meta[keys.authorProfiles])}
              placeholder={
                'https://www.linkedin.com/in/…\nhttps://www.instagram.com/…'
              }
              multiline
              onChange={value => update({ [keys.authorProfiles]: value })}
            />
          </TabsContent>
        )}
      </Tabs>
    </div>
  );
};