// The standing content disclaimer, edited where the content lives: a merchant
// looks for it next to the contents it rides along with, not in a settings
// drawer three clicks away.
import React, { useEffect, useState } from 'react';
import { LuScrollText } from 'react-icons/lu';

import { cn } from '../copilot/cn';
import { ARTICLE_STATUS } from '../../service/visibility/visibility.constants';
import type {
  ArticleSummary,
  BrandResponse,
  DisclaimerPosition,
} from '../../service/visibility/visibility.interface';
import {
  getArticle,
  patchBrand,
} from '../../service/visibility/visibility.service';

import Modal from './Modal';
import PagePreview from './PagePreview';

// Marker the generator wraps the disclaimer in, mirrored on the backend.
const DISCLAIMER_CLASS = 'recomaze-disclaimer';

function withDisclaimer(
  markdown: string,
  text: string,
  position: DisclaimerPosition
): string {
  const line = text.trim();
  if (!line) return markdown;
  const span = `<span class="${DISCLAIMER_CLASS}">${line}</span>`;

  return position === 'top'
    ? `${span}\n\n${markdown}`
    : `${markdown}\n\n${span}`;
}

interface DisclaimerDialogProps {
  clientId: string;
  token: string;
  brand: BrandResponse | null;
  articles?: ArticleSummary[];
  onSaved?: (brand: BrandResponse) => void;
  onToast?: (message: string) => void;
}

export function DisclaimerDialog({
  clientId,
  token,
  brand,
  articles = [],
  onSaved,
  onToast,
}: DisclaimerDialogProps): JSX.Element {
  const [open, setOpen] = useState(false);
  const [sample, setSample] = useState<{
    title: string;
    slug: string | null;
    markdown: string;
  } | null>(null);
  const [text, setText] = useState('');
  const [position, setPosition] = useState<DisclaimerPosition>('bottom');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Re-seed whenever the dialog opens, so a cancelled edit never lingers.
  useEffect(() => {
    if (!open) return;
    setText(brand?.article_disclaimer || '');
    setPosition(
      brand?.article_disclaimer_position === 'top' ? 'top' : 'bottom'
    );
  }, [open, brand]);

  // Preview against one of the merchant's own articles rather than grey
  // placeholder bars: seeing the line land under their actual prose is the
  // whole question they are trying to answer.
  useEffect(() => {
    if (!open || sample) return;
    const ready = articles.filter(
      article => article.status === ARTICLE_STATUS.READY
    );
    const pick = ready[Math.floor(Math.random() * ready.length)];
    if (!pick) return;
    let cancelled = false;
    getArticle(clientId, token, pick.article_id)
      .then(detail => {
        if (cancelled) return;
        setSample({
          title: detail.h1 || detail.summary.title || pick.title,
          slug: detail.summary.slug ?? null,
          markdown: detail.markdown || '',
        });
      })
      .catch(() => {
        // Fall back to the skeleton preview below.
      });

    return () => {
      cancelled = true;
    };
  }, [open, sample, articles, clientId, token]);

  const save = async (): Promise<void> => {
    if (!brand) return;
    setSaving(true);
    try {
      const updated = await patchBrand(clientId, token, brand.brand_id, {
        article_disclaimer: text.trim(),
        article_disclaimer_position: position,
      });
      onSaved?.(updated);
      onToast?.(
        text.trim()
          ? 'Disclaimer saved. It rides with every content generated from now on.'
          : 'Disclaimer removed from future contents.'
      );
      setOpen(false);
    } catch (saveError) {
      setError(
        saveError instanceof Error
          ? saveError.message
          : 'Could not save the disclaimer.'
      );
    } finally {
      setSaving(false);
    }
  };

  const active = Boolean(brand?.article_disclaimer?.trim());

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        disabled={!brand}
        title="A standing line - prices change, not medical advice, an affiliate notice - added to every content you generate, at the head or in the footer. Set it once and it rides along."
        className="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-60"
      >
        <LuScrollText className="size-4" />
        Content Disclaimer
        {active && (
          <span className="ml-1 inline-block size-1.5 rounded-full bg-emerald-500" />
        )}
      </button>

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Content Disclaimer"
        size="lg"
        footer={
          <>
            <button
              type="button"
              onClick={() => setOpen(false)}
              disabled={saving}
              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-60"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={() => void save()}
              disabled={saving}
              className="rounded-md bg-black px-3 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:opacity-60"
            >
              {saving ? 'Saving...' : 'Save'}
            </button>
          </>
        }
      >
        <div className="flex flex-col gap-4">
          <p className="text-[13px] text-gray-500">
            A standing line - prices change, not medical advice, an affiliate
            notice - added to every content generated from now on. Contents
            already written keep what they have.
          </p>

          <div className="flex flex-col gap-1.5">
            <label
              htmlFor="disclaimer-text"
              className="text-sm font-medium text-gray-900"
            >
              The line
            </label>
            <textarea
              id="disclaimer-text"
              rows={3}
              value={text}
              onChange={event => setText(event.target.value)}
              placeholder="e.g. Prices and availability change; check the product page before ordering."
              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-gray-400 focus:outline-none"
            />
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <span className="text-[13px] text-gray-500">Position</span>
            {(['bottom', 'top'] as DisclaimerPosition[]).map(option => (
              <button
                key={option}
                type="button"
                onClick={() => setPosition(option)}
                aria-pressed={position === option}
                className={cn(
                  'cursor-pointer rounded-md px-2.5 py-1 text-[13px] font-medium transition-colors',
                  position === option
                    ? 'bg-pink-600 text-white shadow-sm'
                    : 'text-gray-500 hover:text-gray-900'
                )}
              >
                {option === 'bottom' ? 'Footer' : 'Head of content'}
              </button>
            ))}
          </div>

          {error && <p className="text-[13px] text-red-600">{error}</p>}

          {/* The real page, not an impression of it - so "where does this
              land" is answered by looking at it. */}
          {sample && (
            <div className="flex flex-col gap-1.5">
              <p className="text-xs uppercase tracking-wide text-gray-500">
                {`Preview · ${sample.title}`}
              </p>
              <div className="max-h-[46vh] overflow-y-auto rounded-lg border border-gray-200">
                <PagePreview
                  markdown={withDisclaimer(sample.markdown, text, position)}
                  title={sample.title}
                  slug={sample.slug}
                />
              </div>
            </div>
          )}
        </div>
      </Modal>
    </>
  );
}

export default DisclaimerDialog;