import React from 'react';
import { LuTrash2 } from 'react-icons/lu';

import EmptyState from '../agent-analytics/EmptyState';
import { cn } from '../copilot/cn';
import { ARTICLE_STATUS } from '../../service/visibility/visibility.constants';
import type { ArticleSummary } from '../../service/visibility/visibility.interface';

import { DataGrid, DataGridHead, DataGridRow } from './DataGrid';
import {
  contentTypeLabel,
  contentTypeTone,
  countLanguageSiblings,
  profilePlatformLabel,
  scoreTone,
} from './helpers';
import Pill from './Pill';

const COLUMNS =
  'minmax(220px,2.6fr) 128px 116px 76px minmax(150px,0.9fr) 108px 44px';
const COLUMNS_SM = '1fr auto';

const NO_VALUE = '–';

interface ArticlesTableProps {
  articles: ArticleSummary[];
  allArticles: ArticleSummary[];
  onOpen: (articleId: string) => void;
  onDelete?: (article: ArticleSummary) => void;
  deleting?: Record<string, boolean>;
  scheduledByArticle?: Record<string, string>;
  emptyMessage?: string;
}

const statusTone = (
  status: string
): 'success' | 'attention' | 'warning' | 'critical' | 'info' => {
  if (status === ARTICLE_STATUS.PUBLISHED) return 'success';
  if (status === ARTICLE_STATUS.READY) return 'info';
  if (status === ARTICLE_STATUS.FAILED) return 'critical';

  return 'attention';
};

function ArticlesTable({
  articles,
  allArticles,
  onOpen,
  onDelete,
  deleting = {},
  scheduledByArticle = {},
  emptyMessage = 'No contents to show',
}: ArticlesTableProps): JSX.Element {
  if (articles.length === 0) {
    return <EmptyState message={emptyMessage} />;
  }

  return (
    <DataGrid columns={COLUMNS} columnsSm={COLUMNS_SM}>
      <DataGridHead>
        <div>Title</div>
        <div>Type</div>
        <div>Status</div>
        <div>Words</div>
        <div>Quality</div>
        <div>Languages</div>
        <div />
      </DataGridHead>

      {articles.map(article => {
        const languageCount = countLanguageSiblings(
          allArticles,
          article.translation_group_id
        );
        const scheduledFor = scheduledByArticle[article.article_id];
        const isReady =
          article.status === ARTICLE_STATUS.READY ||
          article.status === ARTICLE_STATUS.PUBLISHED;

        return (
          <DataGridRow
            key={article.article_id}
            className="vis-grid__line vis-grid__line--interactive"
          >
            <div className="min-w-0">
              <button
                type="button"
                onClick={() => onOpen(article.article_id)}
                className="block w-full truncate text-left text-[14px] font-medium text-gray-900 hover:text-pink-700"
                title={article.title || '(untitled)'}
              >
                {article.title || '(untitled)'}
              </button>
              {article.slug && (
                <p className="mt-0.5 truncate text-[12.5px] text-gray-500">
                  /{article.slug}
                </p>
              )}
            </div>

            <div className="flex min-w-0 flex-wrap items-center gap-1.5">
              {article.content_type ? (
                <Pill tone={contentTypeTone(article.content_type)} size="sm">
                  {contentTypeLabel(article.content_type)}
                </Pill>
              ) : (
                <span className="text-[13px] text-gray-500">{NO_VALUE}</span>
              )}
              {article.content_type === 'profile' &&
                article.profile_platform && (
                  <Pill tone="warning" size="sm">
                    {profilePlatformLabel(article.profile_platform)}
                  </Pill>
                )}
            </div>

            <div className="flex min-w-0 flex-col items-start gap-1">
              <Pill tone={statusTone(article.status)} size="sm">
                {article.status}
              </Pill>
              {scheduledFor && (
                <span className="text-[12px] whitespace-nowrap text-amber-600">
                  {`Publishes ${new Date(scheduledFor).toLocaleDateString(
                    undefined,
                    { day: 'numeric', month: 'short' }
                  )}`}
                </span>
              )}
            </div>

            <div className="text-[13.5px] whitespace-nowrap text-gray-900">
              {article.word_count > 0 ? article.word_count : NO_VALUE}
            </div>

            {/* One cell, not three near-empty columns of two-digit numbers. */}
            <div className="flex flex-wrap items-center gap-1.5">
              {isReady && (article.seo_score ?? 0) > 0 ? (
                <>
                  <Pill tone={scoreTone(article.seo_score)} size="sm">
                    {`SEO ${article.seo_score}`}
                  </Pill>
                  {(article.aeo_score ?? 0) > 0 && (
                    <Pill tone={scoreTone(article.aeo_score)} size="sm">
                      {`AEO ${article.aeo_score}`}
                    </Pill>
                  )}
                </>
              ) : (
                <span className="text-[13px] text-gray-500">{NO_VALUE}</span>
              )}
            </div>

            {/* The card view's "Available in N languages" wraps to two lines
                in this column, so the sentence moves to the tooltip. */}
            <div>
              {languageCount > 1 ? (
                <Pill
                  tone="info"
                  size="sm"
                  title={`Available in ${languageCount} languages`}
                >
                  {`${languageCount} languages`}
                </Pill>
              ) : (
                <span className="text-[13px] text-gray-500">{NO_VALUE}</span>
              )}
            </div>

            <div className="flex justify-end">
              {onDelete && (
                <button
                  type="button"
                  disabled={Boolean(deleting[article.article_id])}
                  onClick={() => onDelete(article)}
                  aria-label={`Delete ${article.title || 'this content'}`}
                  className={cn(
                    'rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-600',
                    deleting[article.article_id] && 'opacity-50'
                  )}
                >
                  <LuTrash2 className="size-3.5" />
                </button>
              )}
            </div>
          </DataGridRow>
        );
      })}
    </DataGrid>
  );
}

export default ArticlesTable;