import { useEffect, useMemo, useState } from 'react';
import apiFetch from '@wordpress/api-fetch';
import {
  CheckIcon,
  Loader2Icon,
  SparklesIcon,
  Undo2Icon,
  XIcon,
} from 'lucide-react';

import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import { Checkbox } from '../../components/ui/checkbox';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../../components/ui/dialog';
import { classNames } from '../../lib/utils';
import type { AiGate } from '../hooks/use-ai-gate';
import { balanceNote, repeatQuestion } from '../lib/ai-runs';
import { htmlToText } from '../lib/diff';

import {
  Diff,
  errorOf,
  FixErrorCallout,
  NoAiAccess,
  useRepeatGuard,
  type FixError,
} from './fix';

/** The fields the fix can replace, as the product has them and as proposed. */
export interface ProductFixValues {
  title: string;
  description: string;
  short_description: string;
  tags: string[];
  seo_title: string;
  seo_description: string;
}

export interface ProductFixPreview {
  post_id: number;
  topics: string[];
  credits: number;
  check: {
    product_type: string;
    title_score: number;
    title_issues: string[];
    description_score: number;
    description_issues: string[];
    description_suggestions: string[];
  };
  current: ProductFixValues;
  proposal: ProductFixValues & { faq: { q: string; a: string }[] };
}

export interface ProductFixTag {
  id: number;
  name: string;
}

/** What apply and undo answer: the run, and the product as it stands now. */
export interface ProductFixResult {
  run_id?: string;
  changed?: string[];
  reverted?: number;
  tags: ProductFixTag[];
  current: ProductFixValues;
}

type FieldKey = keyof ProductFixValues;
type Topic = 'title' | 'description';

interface FieldRow {
  key: FieldKey;
  label: string;
  kind: 'text' | 'html' | 'tags';
}

const ROWS: FieldRow[] = [
  { key: 'title', label: 'Product title', kind: 'text' },
  { key: 'description', label: 'Description', kind: 'html' },
  { key: 'short_description', label: 'Short description', kind: 'html' },
  { key: 'tags', label: 'Tags', kind: 'tags' },
  { key: 'seo_title', label: 'SEO title', kind: 'text' },
  { key: 'seo_description', label: 'Meta description', kind: 'text' },
];

const RENDERED_CLASS =
  'text-sm leading-relaxed text-foreground [&_h2]:mt-3 [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:mt-3 [&_h3]:text-sm [&_h3]:font-semibold [&_p]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-0.5 [&_strong]:font-semibold [&_table]:my-2 [&_table]:w-full [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1';

const escapeHtml = (value: string): string =>
  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

/** The questions and answers as the description carries them on the store. */
const faqHtml = (faq: { q: string; a: string }[]): string =>
  `<div class="section-faq"><h2>FAQ</h2>${faq
    .map(
      pair =>
        `<div class="faq-item"><p><strong>${escapeHtml(pair.q)}</strong></p><p>${escapeHtml(pair.a)}</p></div>`
    )
    .join('')}</div>`;

const scoreClass = (score: number): string =>
  score >= 80
    ? 'text-emerald-600 dark:text-emerald-400'
    : score >= 50
      ? 'text-amber-600 dark:text-amber-400'
      : 'text-red-600 dark:text-red-400';

/** One field of the proposal: kept or not, what changes, and the new text. */
const Row = ({
  row,
  current,
  proposed,
  checked,
  onChange,
  children,
}: {
  row: FieldRow;
  current: string;
  proposed: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  children?: React.ReactNode;
}): JSX.Element => {
  const [view, setView] = useState<'changes' | 'rendered'>('changes');
  const beforeText = row.kind === 'html' ? htmlToText(current) : current;
  const afterText = row.kind === 'html' ? htmlToText(proposed) : proposed;
  return (
    <div
      className={classNames(
        'rounded-lg border border-border p-3 transition-opacity',
        !checked && 'opacity-60'
      )}
    >
      <div className="flex items-center gap-2">
        <label className="flex cursor-pointer items-center gap-2 text-sm font-semibold text-foreground">
          <Checkbox
            checked={checked}
            onCheckedChange={next => onChange(Boolean(next))}
          />
          {row.label}
        </label>
        {row.kind === 'html' && (
          <div className="ml-auto flex gap-1 text-xs">
            {(['changes', 'rendered'] as const).map(option => (
              <button
                key={option}
                type="button"
                onClick={() => setView(option)}
                className={classNames(
                  'rounded-md px-2 py-0.5 font-medium',
                  view === option
                    ? 'bg-muted text-foreground'
                    : 'text-muted-foreground hover:text-foreground'
                )}
              >
                {option === 'changes' ? 'Changes' : 'As it will look'}
              </button>
            ))}
          </div>
        )}
      </div>
      <div className="mt-2">
        {row.kind === 'html' && view === 'rendered' ? (
          <div
            className={classNames(
              RENDERED_CLASS,
              'max-h-72 overflow-y-auto rounded-md bg-muted/40 p-3'
            )}
            // The HTML was cleaned server-side with wp_kses_post before it reached the editor.
            dangerouslySetInnerHTML={{ __html: proposed }}
          />
        ) : (
          <div
            className={classNames(
              row.kind === 'html' && 'max-h-72 overflow-y-auto'
            )}
          >
            <Diff before={beforeText} after={afterText} />
          </div>
        )}
      </div>
      {children}
    </div>
  );
};

/**
 * The catalog fix of the product being edited: the agent rewrites the
 * title and the description the way the Catalog Quality page does in
 * bulk, the dialog shows what would change, and only the ticked fields
 * are written, in one journaled run that Undo gives back.
 */
export const ProductFixDialog = ({
  postId,
  draft,
  creditsPerTopic,
  pricingUrl,
  ai,
  open,
  onOpenChange,
  onApplied,
  onUndone,
}: {
  postId: number;
  /** The product as typed in the editor, saved or not: the fix starts from it. */
  draft?: { title: string; content: string; excerpt: string; keyword: string };
  creditsPerTopic: number;
  pricingUrl: string;
  ai: AiGate;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** The product as it stands after the write, and which fields were written. */
  onApplied: (result: ProductFixResult, fields: FieldKey[]) => void;
  onUndone: (result: ProductFixResult) => void;
}): JSX.Element => {
  const [topics, setTopics] = useState<Topic[]>(['title', 'description']);
  const [stage, setStage] = useState<
    | 'ask'
    | 'loading'
    | 'preview'
    | 'applying'
    | 'applied'
    | 'undoing'
    | 'undone'
  >('ask');
  const [error, setError] = useState<FixError | null>(null);
  const [preview, setPreview] = useState<ProductFixPreview | null>(null);
  const [kept, setKept] = useState<Record<string, boolean>>({});
  // The rewritten description carries no questions of its own, and the
  // panel counts a product without them as unfinished.
  const [withFaq, setWithFaq] = useState(true);
  const [applied, setApplied] = useState<ProductFixResult | null>(null);

  useEffect(() => {
    if (open) {
      setStage('ask');
      setError(null);
      setPreview(null);
      setApplied(null);
      setWithFaq(true);
    }
  }, [open]);

  const cost = creditsPerTopic * topics.length;
  const again =
    open && stage === 'ask' && topics.length > 0
      ? repeatQuestion('catalog', ai.ranToday, cost, 'product')
      : null;
  const repeat = useRepeatGuard(again);

  const rows = useMemo(() => {
    if (!preview) return [];
    return ROWS.filter(row => {
      const proposed = preview.proposal[row.key];
      const current = preview.current[row.key];
      if (row.kind === 'tags') {
        const next = proposed as string[];
        return (
          next.length > 0 && next.join('|') !== (current as string[]).join('|')
        );
      }
      return (
        String(proposed).trim() !== '' &&
        String(proposed).trim() !== String(current).trim()
      );
    });
  }, [preview]);

  const generate = async (): Promise<void> => {
    setStage('loading');
    setError(null);
    try {
      const answer = await apiFetch<ProductFixPreview>({
        path: '/recomaze/v1/seo/product-fix/preview',
        method: 'POST',
        data: { post_id: postId, topics, draft },
      });
      setPreview(answer);
      ai.onRan('catalog');
      setKept(Object.fromEntries(ROWS.map(row => [row.key, true])));
      setStage('preview');
    } catch (failure) {
      setError(errorOf(failure));
      setStage('ask');
    }
  };

  const apply = async (): Promise<void> => {
    if (!preview) return;
    const fields: Partial<ProductFixValues> = {};
    for (const row of rows) {
      if (!kept[row.key]) continue;
      if (row.key === 'description') {
        fields.description =
          withFaq && preview.proposal.faq.length > 0
            ? `${preview.proposal.description}\n${faqHtml(preview.proposal.faq)}`
            : preview.proposal.description;
      } else if (row.key === 'tags') {
        fields.tags = preview.proposal.tags;
      } else {
        fields[row.key] = preview.proposal[row.key];
      }
    }
    if (Object.keys(fields).length === 0) return;
    setStage('applying');
    setError(null);
    try {
      const answer = await apiFetch<ProductFixResult>({
        path: '/recomaze/v1/seo/product-fix/apply',
        method: 'POST',
        data: { post_id: postId, fields },
      });
      setApplied(answer);
      onApplied(answer, Object.keys(fields) as FieldKey[]);
      setStage('applied');
    } catch (failure) {
      setError(errorOf(failure));
      setStage('preview');
    }
  };

  const undo = async (): Promise<void> => {
    if (!applied?.run_id) return;
    setStage('undoing');
    setError(null);
    try {
      const answer = await apiFetch<ProductFixResult>({
        path: '/recomaze/v1/seo/product-fix/undo',
        method: 'POST',
        data: { post_id: postId, run_id: applied.run_id },
      });
      onUndone(answer);
      setStage('undone');
    } catch (failure) {
      setError(errorOf(failure));
      setStage('applied');
    }
  };

  const keptCount = rows.filter(row => kept[row.key]).length;
  const busy =
    stage === 'loading' || stage === 'applying' || stage === 'undoing';

  return (
    <Dialog
      open={open}
      onOpenChange={next => {
        if (!busy) onOpenChange(next);
      }}
    >
      <DialogContent
        className="recomaze-ui recomaze-editor max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-[860px]"
        showCloseButton={!busy}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <SparklesIcon className="size-4 text-brand" /> Fix title &amp;
            description
          </DialogTitle>
          <DialogDescription>
            {stage === 'ask' &&
              'Recomaze checks the product and writes it again the way the Catalog Quality page does: a title with the brand, model and type, a description grounded in the product data, plus a short description, tags and SEO fields. Nothing is saved until you apply it.'}
            {stage === 'loading' &&
              'Checking the product and writing the new copy. This usually takes under a minute.'}
            {stage === 'preview' &&
              'What would change. Untick a field to keep what the product has now.'}
            {stage === 'applying' && 'Writing the product…'}
            {stage === 'applied' &&
              'Saved on the product and journaled under SEO → Checkup → Changes, where it can be put back later too.'}
            {stage === 'undoing' && 'Putting the product back…'}
            {stage === 'undone' && 'The product is back to what it was.'}
          </DialogDescription>
        </DialogHeader>

        {error && <FixErrorCallout error={error} pricingUrl={pricingUrl} />}
        {stage === 'ask' && !ai.allowed && <NoAiAccess />}

        {stage === 'ask' && (
          <div className="flex flex-col gap-3">
            {(
              [
                {
                  key: 'title',
                  label: 'Title',
                  help: 'Brand, model and product type first, the attributes after; no marketing words.',
                },
                {
                  key: 'description',
                  label: 'Description',
                  help: 'Rewritten from the current text and the product data. Brings the short description, tags, SEO title, meta description and a FAQ with it.',
                },
              ] as { key: Topic; label: string; help: string }[]
            ).map(topic => (
              <label
                key={topic.key}
                className="flex cursor-pointer items-start gap-3 rounded-lg border border-border p-3"
              >
                <Checkbox
                  className="mt-0.5"
                  checked={topics.includes(topic.key)}
                  onCheckedChange={checked =>
                    setTopics(current =>
                      checked
                        ? [...new Set([...current, topic.key])]
                        : current.filter(entry => entry !== topic.key)
                    )
                  }
                />
                <span className="flex flex-col gap-0.5">
                  <span className="text-sm font-semibold text-foreground">
                    {topic.label}
                    <span className="ml-2 text-xs font-normal text-muted-foreground">
                      {creditsPerTopic} credits
                    </span>
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {topic.help}
                  </span>
                </span>
              </label>
            ))}
          </div>
        )}

        {repeat.asking && (
          <Callout tone="warning" className="text-sm">
            {again}
          </Callout>
        )}

        {stage === 'loading' && (
          <div className="flex items-center justify-center gap-3 py-10 text-sm text-muted-foreground">
            <Loader2Icon className="size-5 animate-spin" /> Working on the
            product…
          </div>
        )}

        {preview && (stage === 'preview' || stage === 'applying') && (
          <div className="flex flex-col gap-3">
            <div className="grid gap-2 rounded-lg bg-muted/40 p-3 text-xs @lg:grid-cols-2">
              {preview.topics.includes('title') && (
                <div>
                  <p className="font-semibold text-foreground">
                    Title now:{' '}
                    <span
                      className={classNames(
                        'tabular-nums',
                        scoreClass(preview.check.title_score)
                      )}
                    >
                      {preview.check.title_score}/100
                    </span>
                  </p>
                  {preview.check.title_issues.length > 0 ? (
                    <ul className="mt-1 list-disc pl-4 text-muted-foreground">
                      {preview.check.title_issues.map(issue => (
                        <li key={issue}>{issue}</li>
                      ))}
                    </ul>
                  ) : (
                    <p className="mt-1 text-muted-foreground">
                      Nothing wrong found.
                    </p>
                  )}
                </div>
              )}
              {preview.topics.includes('description') && (
                <div>
                  <p className="font-semibold text-foreground">
                    Description now:{' '}
                    <span
                      className={classNames(
                        'tabular-nums',
                        scoreClass(preview.check.description_score)
                      )}
                    >
                      {preview.check.description_score}/100
                    </span>
                    {preview.check.product_type && (
                      <span className="ml-2 font-normal text-muted-foreground">
                        read as a {preview.check.product_type}
                      </span>
                    )}
                  </p>
                  {preview.check.description_issues.length > 0 ? (
                    <ul className="mt-1 list-disc pl-4 text-muted-foreground">
                      {preview.check.description_issues.map(issue => (
                        <li key={issue}>{issue}</li>
                      ))}
                    </ul>
                  ) : (
                    <p className="mt-1 text-muted-foreground">
                      Nothing wrong found.
                    </p>
                  )}
                </div>
              )}
            </div>

            {rows.length === 0 && (
              <Callout tone="info" className="text-sm">
                Recomaze would keep the product as it is: nothing differs from
                what it has now.
              </Callout>
            )}

            {rows.map(row => (
              <Row
                key={row.key}
                row={row}
                current={
                  row.kind === 'tags'
                    ? preview.current.tags.join(', ')
                    : String(preview.current[row.key])
                }
                proposed={
                  row.kind === 'tags'
                    ? preview.proposal.tags.join(', ')
                    : String(preview.proposal[row.key])
                }
                checked={Boolean(kept[row.key])}
                onChange={checked =>
                  setKept(current => ({ ...current, [row.key]: checked }))
                }
              >
                {row.key === 'description' &&
                  preview.proposal.faq.length > 0 && (
                    <label className="mt-3 flex cursor-pointer items-start gap-2 border-t border-border pt-3 text-xs text-muted-foreground">
                      <Checkbox
                        className="mt-0.5"
                        checked={withFaq}
                        onCheckedChange={checked =>
                          setWithFaq(Boolean(checked))
                        }
                      />
                      <span>
                        Add the {preview.proposal.faq.length} questions and
                        answers at the end of the description:{' '}
                        {preview.proposal.faq.map(pair => pair.q).join(' · ')}
                      </span>
                    </label>
                  )}
              </Row>
            ))}
          </div>
        )}

        {applied && (stage === 'applied' || stage === 'undoing') && (
          <ul className="flex flex-col gap-1.5 text-sm">
            {(applied.changed ?? []).map(name => (
              <li key={name} className="flex items-center gap-2">
                <CheckIcon className="size-3.5 text-emerald-600 dark:text-emerald-400" />
                {ROWS.find(row => row.key === name)?.label ?? name}
              </li>
            ))}
            {(applied.changed ?? []).length === 0 && (
              <li className="flex items-center gap-2 text-muted-foreground">
                <XIcon className="size-3.5" /> Nothing was different from what
                the product already had.
              </li>
            )}
          </ul>
        )}

        <DialogFooter className="items-center gap-2 @lg:justify-between">
          <span className="text-xs text-muted-foreground">
            {stage === 'ask' &&
              (topics.length > 0
                ? `${cost} credits, charged when the copy is written.${balanceNote(ai.balance, cost)}`
                : 'Tick at least one.')}
            {(stage === 'preview' || stage === 'applying') &&
              preview &&
              `${preview.credits} credits used. ${keptCount} of ${rows.length} fields ticked.`}
          </span>
          <div className="flex gap-2">
            {stage === 'ask' && (
              <>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => onOpenChange(false)}
                >
                  Cancel
                </Button>
                <Button
                  size="sm"
                  disabled={topics.length === 0 || !ai.allowed}
                  onClick={() => repeat.press(() => void generate())}
                >
                  <SparklesIcon /> {repeat.asking ? 'Run it again' : 'Rewrite'}
                </Button>
              </>
            )}
            {(stage === 'preview' || stage === 'applying') && (
              <>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={busy}
                  onClick={() => onOpenChange(false)}
                >
                  Keep as is
                </Button>
                <Button
                  size="sm"
                  disabled={busy || keptCount === 0}
                  onClick={() => void apply()}
                >
                  {stage === 'applying' ? (
                    <Loader2Icon className="animate-spin" />
                  ) : (
                    <CheckIcon />
                  )}
                  Apply{' '}
                  {keptCount > 0
                    ? `${keptCount} field${keptCount === 1 ? '' : 's'}`
                    : ''}
                </Button>
              </>
            )}
            {(stage === 'applied' || stage === 'undoing') && (
              <>
                {applied?.run_id && (applied.changed ?? []).length > 0 && (
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={busy}
                    onClick={() => void undo()}
                  >
                    {stage === 'undoing' ? (
                      <Loader2Icon className="animate-spin" />
                    ) : (
                      <Undo2Icon />
                    )}
                    Undo
                  </Button>
                )}
                <Button
                  size="sm"
                  disabled={busy}
                  onClick={() => onOpenChange(false)}
                >
                  Done
                </Button>
              </>
            )}
            {stage === 'undone' && (
              <Button size="sm" onClick={() => onOpenChange(false)}>
                Close
              </Button>
            )}
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

/** The button in the score card that opens the fix. */
export const ProductFixButton = ({
  onClick,
}: {
  onClick: () => void;
}): JSX.Element => (
  <button
    type="button"
    onClick={onClick}
    className="inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-semibold text-foreground hover:bg-muted"
  >
    <SparklesIcon className="size-3.5 text-brand" /> Fix title &amp; description
  </button>
);