/** @jsxRuntime classic */
import React, { useState } from "react";
import { Button, Modal, Spinner } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import type { ExcludedContentItem } from "../data/types";
import styles from "./ExcludedContentTable.module.css";

interface Props {
	items: ExcludedContentItem[];
	loading: boolean;
	removingKeys: string[];
	onRemove: (item: ExcludedContentItem) => void;
}

function getItemKey(item: ExcludedContentItem): string {
	return `${item.kind}:${item.id}`;
}

function getItemIconClassName(item: ExcludedContentItem): string {
	if (item.entityType === "product") {
		return "dashicons-cart";
	}

	if (item.entityType === "page") {
		return "dashicons-media-document";
	}

	if (item.entityType === "category") {
		return "dashicons-category";
	}

	if (item.entityType === "post_tag") {
		return "dashicons-tag";
	}

	return "dashicons-admin-post";
}

function ItemIcon({ item }: { item: ExcludedContentItem }) {
	return (
		<span
			className={`dashicons ${getItemIconClassName(item)} ${styles.icon}`}
			aria-hidden="true"
		/>
	);
}

export default function ExcludedContentTable({
	items,
	loading,
	removingKeys,
	onRemove,
}: Props) {
	const [itemPendingRemoval, setItemPendingRemoval] =
		useState<ExcludedContentItem | null>(null);

	const confirmRemoval = async () => {
		if (itemPendingRemoval === null) {
			return;
		}

		const item = itemPendingRemoval;
		setItemPendingRemoval(null);
		await onRemove(item);
	};

	if (loading) {
		return (
			<div className={styles.loading}>
				<Spinner />
			</div>
		);
	}

	if (items.length === 0) {
		return (
			<div className={styles.emptyState}>
				<p className={styles.emptyTitle}>
					{__("No excluded content found.", "flexible-chat")}
				</p>
				<p className="description">
					{__(
						"Try a different search or add exclusions from the post, page, product, category, or tag editor.",
						"flexible-chat",
					)}
				</p>
			</div>
		);
	}

	return (
		<>
			<div className={styles.tableWrap}>
				<table
					className={`wp-list-table widefat fixed striped table-view-list ${styles.table}`}
				>
					<thead>
						<tr>
							<th scope="col" className="manage-column column-primary">
								{__("Title", "flexible-chat")}
							</th>
							<th scope="col" className={`manage-column ${styles.typeColumn}`}>
								{__("Type", "flexible-chat")}
							</th>
							<th
								scope="col"
								className={`manage-column ${styles.actionColumn}`}
							>
								{__("Action", "flexible-chat")}
							</th>
						</tr>
					</thead>
					<tbody>
						{items.map((item) => {
							const itemKey = getItemKey(item);
							const isRemoving = removingKeys.includes(itemKey);

							return (
								<tr key={itemKey} className={isRemoving ? styles.rowMuted : ""}>
									<td className="column-primary">
										<div className={styles.titleCell}>
											<ItemIcon item={item} />
											<div className={styles.titleContent}>
												<a href={item.editUrl} className={styles.titleLink}>
													{item.title}
												</a>
											</div>
										</div>
									</td>
									<td className={styles.typeCell}>
										<span className={styles.badge}>{item.typeLabel}</span>
									</td>
									<td className={styles.actionCell}>
										<Button
											variant="link"
											isDestructive
											className={styles.removeButton}
											onClick={() => setItemPendingRemoval(item)}
											disabled={isRemoving}
										>
											{isRemoving
												? __("Removing...", "flexible-chat")
												: __("Remove", "flexible-chat")}
										</Button>
									</td>
								</tr>
							);
						})}
					</tbody>
				</table>
			</div>

			{itemPendingRemoval && (
				<Modal
					title={__("Remove exclusion?", "flexible-chat")}
					onRequestClose={() => setItemPendingRemoval(null)}
				>
					<p className={styles.modalText}>
						{__(
							"This content will become available to the chat again.",
							"flexible-chat",
						)}
					</p>
					<p className={styles.modalItem}>{itemPendingRemoval.title}</p>
					<div className={styles.modalActions}>
						<Button
							variant="secondary"
							onClick={() => setItemPendingRemoval(null)}
						>
							{__("Cancel", "flexible-chat")}
						</Button>
						<Button variant="primary" isDestructive onClick={confirmRemoval}>
							{__("Remove", "flexible-chat")}
						</Button>
					</div>
				</Modal>
			)}
		</>
	);
}