import React, { useEffect, useState } from 'react';
import { LoaderCircleIcon } from 'lucide-react';

import {
  getContentCheckJob,
  getLatestContentCheck,
  listContentCheckProducts,
} from '../../../service/catalog-quality/catalog-quality.service';
import type {
  ContentCheckSeverity,
  IContentCheckJob,
  IContentCheckProductRow,
} from '../../../service/catalog-quality/catalog-quality.interface';
import { useCopilot } from '../../../context/copilot.context';
import { TURN_CREDITS } from '../../../service/copilot/pricing';
import { Button } from '../../ui/button';
import { cn } from '../cn';

/** How often the panel re-reads a scan that is still running. */
const SCAN_POLL_INTERVAL_MS = 5_000;

/** Job states that mean the worker is still going. */
const RUNNING_STATES: ReadonlySet<string> = new Set(['pending', 'processing']);

/** How many rows the panel shows; the page has the rest. */
const PRODUCT_LIMIT = 15;

/** The severity vocabulary the Catalog Quality page uses. */
const SEVERITY_STYLE: Record<
  ContentCheckSeverity,
  { label: string; chip: string }
> = {
  critical: { label: 'Critical', chip: 'bg-red-500/15 text-red-600' },
  warning: { label: 'Warning', chip: 'bg-amber-400/20 text-amber-700' },
  ok: { label: 'OK', chip: 'bg-emerald-500/15 text-emerald-600' },
};

/**
 * One audited product: what is wrong with its copy, in the words of the
 * audit itself.
 *
 * @param props - Component props.
 * @param props.product - The audited product.
 * @return The row.
 */
function ProductRow({
  product,
}: {
  product: IContentCheckProductRow;
}): React.ReactElement {
  const style = SEVERITY_STYLE[product.severity] ?? SEVERITY_STYLE.warning;
  const issues: string[] = [
    ...(product.title_issues ?? []),
    ...(product.description_issues ?? []),
  ];

  return (
    <li className="border-t border-border px-4 py-3 first:border-t-0">
      <div className="flex flex-wrap items-center gap-2">
        <span
          className={cn(
            'rounded-md px-2 py-0.5 text-[11px] font-semibold',
            style.chip
          )}
        >
          {style.label}
        </span>
        <span className="min-w-0 truncate text-sm font-medium text-foreground">
          {product.product_name || product.sku}
        </span>
      </div>
      {issues.length > 0 && (
        <ul className="mt-1.5 space-y-0.5">
          {issues.slice(0, 3).map((issue: string) => (
            <li key={issue} className="text-xs leading-relaxed text-foreground">
              {issue}
            </li>
          ))}
        </ul>
      )}
    </li>
  );
}

/**
 * The catalog audit beside the conversation: the score, what it is made of,
 * and the products dragging it down. Nothing is generated from here - the
 * rewrites cost credits and live on the Catalog Quality page - so the panel
 * reads, and the conversation acts.
 *
 * @param props - Component props.
 * @param props.onAsk - Put a question to the copilot.
 * @return The panel.
 */
export function CatalogPanel({
  onAsk,
}: {
  onAsk: (prompt: string) => void;
}): React.ReactElement {
  const copilot = useCopilot();
  const [job, setJob] = useState<IContentCheckJob | null>(null);
  const [products, setProducts] = useState<IContentCheckProductRow[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    let stale = false;
    let timer = 0;

    const read = async (jobId?: string): Promise<void> => {
      const latest: IContentCheckJob | null = jobId
        ? await getContentCheckJob(jobId)
        : await getLatestContentCheck();
      if (stale) return;
      setJob(latest);
      setIsLoading(false);
      if (!latest) return;
      if (RUNNING_STATES.has(latest.state)) {
        timer = window.setTimeout(
          () => void read(latest.job_id),
          SCAN_POLL_INTERVAL_MS
        );
        return;
      }
      const list = await listContentCheckProducts(latest.job_id, {
        limit: PRODUCT_LIMIT,
      });
      if (stale) return;
      setProducts(list.products ?? []);
    };

    void read();

    return () => {
      stale = true;
      window.clearTimeout(timer);
    };
  }, []);

  if (isLoading) {
    return (
      <div className="flex items-center gap-2 p-4 text-xs text-muted-foreground">
        <LoaderCircleIcon className="h-3.5 w-3.5 animate-spin text-brand" />
        Reading your catalog...
      </div>
    );
  }

  if (!job) {
    return (
      <div className="flex flex-col items-start gap-3 p-4">
        <p className="text-sm text-foreground">
          Your catalog has not been audited yet. The audit reads every product
          title and description and says which ones an AI engine cannot use.
        </p>
        <Button
          size="sm"
          className="rounded-full"
          onClick={() => onAsk('Check the quality of my catalog')}
        >
          Ask Reco to check it
          <span className="font-normal opacity-80">
            · {TURN_CREDITS[copilot.thinking]} credits
          </span>
        </Button>
      </div>
    );
  }

  const isRunning: boolean = RUNNING_STATES.has(job.state);

  return (
    <div className="flex flex-col">
      <div className="flex flex-wrap items-end gap-4 px-4 py-4">
        <div>
          <p className="text-xs font-medium text-muted-foreground">
            Catalog score
          </p>
          <p className="text-3xl font-semibold text-foreground tabular-nums">
            {Math.round(job.overall_score)}
            <span className="text-base text-muted-foreground">/100</span>
          </p>
        </div>
        <dl className="flex flex-1 flex-wrap gap-4 text-xs">
          <div>
            <dt className="text-muted-foreground">Critical</dt>
            <dd className="text-sm font-semibold text-red-600 tabular-nums">
              {job.critical_count}
            </dd>
          </div>
          <div>
            <dt className="text-muted-foreground">Warnings</dt>
            <dd className="text-sm font-semibold text-amber-700 tabular-nums">
              {job.warning_count}
            </dd>
          </div>
          <div>
            <dt className="text-muted-foreground">Clean</dt>
            <dd className="text-sm font-semibold text-emerald-600 tabular-nums">
              {job.ok_count}
            </dd>
          </div>
        </dl>
      </div>

      {isRunning ? (
        <div className="flex items-center gap-2 border-t border-border px-4 py-3 text-xs text-muted-foreground">
          <LoaderCircleIcon className="h-3.5 w-3.5 animate-spin text-brand" />
          Auditing {job.processed_products} of {job.total_products} products...
        </div>
      ) : (
        <>
          <ul className="border-t border-border">
            {products.map((product: IContentCheckProductRow) => (
              <ProductRow key={product.sku} product={product} />
            ))}
          </ul>
          {products.length > 0 && (
            <div className="border-t border-border px-4 py-3">
              <Button
                variant="outline"
                size="sm"
                className="rounded-full"
                onClick={() =>
                  onAsk('Fix the product copy my catalog audit flagged')
                }
              >
                Ask Reco to fix these
                <span className="font-normal text-muted-foreground">
                  · {TURN_CREDITS[copilot.thinking]} credits
                </span>
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
}