import { useCallback, useEffect, useState } from 'react';
import { fetchDebugStatus } from '../api';
import type { DebugStatus } from '../types';
import { __, _n, sprintf } from "@wordpress/i18n";
function CheckRow({
  label,
  ok,
  help
}: {
  label: string;
  ok: boolean;
  help: string;
}) {
  return <div className="stockbeacon-debug-check">
			<span className={`stockbeacon-debug-check__dot${ok ? ' is-ok' : ' is-warn'}`} />
			<div>
				<strong>{label}</strong>
				<p>{help}</p>
			</div>
			<span className="stockbeacon-status-pill">{ok ? __('OK', 'stockbeacon-product-waitlists-for-woocommerce') : __('Needs attention', 'stockbeacon-product-waitlists-for-woocommerce')}</span>
		</div>;
}
export function DebugToolsTab() {
  const [status, setStatus] = useState<DebugStatus | null>(null);
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(true);
  const loadStatus = useCallback(async () => {
    setLoading(true);
    setMessage(__('Loading diagnostics…', 'stockbeacon-product-waitlists-for-woocommerce'));
    try {
      const next = await fetchDebugStatus();
      setStatus(next);
      setMessage('');
    } catch {
      setStatus(null);
      setMessage(__('Could not load diagnostics. Refresh the page and check that your user can manage WooCommerce.', 'stockbeacon-product-waitlists-for-woocommerce'));
    } finally {
      setLoading(false);
    }
  }, []);
  useEffect(() => {
    loadStatus();
  }, [loadStatus]);
  let mailRowLabel = __('PHP mail function is available', 'stockbeacon-product-waitlists-for-woocommerce');
  let mailRowHelp = __('WordPress sends restock emails through the server mail function unless a mail plugin overrides wp_mail.', 'stockbeacon-product-waitlists-for-woocommerce');
  let mailReady = !!status?.php_mail_function_available;
  
  return <div id="stockbeacon-tab-debug" className="stockbeacon-tab-panel">
			<div className="stockbeacon-section">
				<div className="stockbeacon-section-header">
					<div>
						<strong>{__("System checks", "stockbeacon-product-waitlists-for-woocommerce")}</strong>
						<p>{__("Use this page when forms, subscriber storage, or restock emails are not behaving as expected.", "stockbeacon-product-waitlists-for-woocommerce")}</p>
					</div>
					<button type="button" className="button" onClick={loadStatus} disabled={loading}>
						{loading ? __('Checking…', 'stockbeacon-product-waitlists-for-woocommerce') : __('Run checks again', 'stockbeacon-product-waitlists-for-woocommerce')}
					</button>
				</div>
				<div className="stockbeacon-debug-list">
					<CheckRow label={__("WooCommerce is active", "stockbeacon-product-waitlists-for-woocommerce")} ok={!!status?.woocommerce_active} help={__("The plugin only renders waitlist forms and listens for stock updates while WooCommerce is active.", "stockbeacon-product-waitlists-for-woocommerce")} />
					<CheckRow label={__("Subscriber table exists", "stockbeacon-product-waitlists-for-woocommerce")} ok={!!status?.subscriptions_table_ok} help={__("Customer email addresses and waitlist statuses are stored in this custom table.", "stockbeacon-product-waitlists-for-woocommerce")} />
					<CheckRow label={__("Activity log table exists", "stockbeacon-product-waitlists-for-woocommerce")} ok={!!status?.logs_table_ok} help={__("Recent signup, notification, and status events are written here for troubleshooting.", "stockbeacon-product-waitlists-for-woocommerce")} />
					<CheckRow label={__("WordPress mail API is available", "stockbeacon-product-waitlists-for-woocommerce")} ok={!!status?.wp_mail_available} help={__("Restock emails are sent through wp_mail, so this function must be available.", "stockbeacon-product-waitlists-for-woocommerce")} />
					<CheckRow label={mailRowLabel} ok={mailReady} help={mailRowHelp} />
				</div>
				<div className="stockbeacon-debug-summary">
					<strong>{Number(status?.scheduled_batch_count || 0)}</strong>
					<span>{sprintf(_n('%d restock notification batch is currently scheduled in WordPress cron', '%d restock notification batches are currently scheduled in WordPress cron', Number(status?.scheduled_batch_count || 0), 'stockbeacon-product-waitlists-for-woocommerce'), Number(status?.scheduled_batch_count || 0))}</span>
				</div>
				{message && <div className="stockbeacon-table-status">{message}</div>}
			</div>
		</div>;
}
