import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { Button, Notice } from "@wordpress/components";
import apiFetch from "@wordpress/api-fetch";
import ServerTimeClock from "./ServerTimeClock";


export default function CronDiagnostics() {
    const [diagnostics, setDiagnostics] = useState(null);
    const [running, setRunning] = useState(false);

    const handleCheck = async () => {
        setRunning(true);
        try {
            const data = await apiFetch({ path: "/ekesto-cache-warmup/v1/diagnostics" });
            setDiagnostics(data);
        } catch (err) {
            console.error("Failed to fetch diagnostics:", err);
        } finally {
            setRunning(false);
        }
    };

    return (
        <>
            <p className='ekesto-section-description'>
                <strong>{__("Server time:", "cache-autopilot")}</strong> <ServerTimeClock />
            </p>

            <p
                className='ekesto-section-description'
                style={{ maxWidth: "80ch" }}
            >
                {__(
                    "One warmup batch runs per WP-Cron execution. Timing depends on traffic or server cron.",
                    "cache-autopilot",
                )}
            </p>

            <div className='ecw-manual-run'>
                <Button
                    variant='secondary'
                    secondary
                    onClick={handleCheck}
                    disabled={running}
                    isBusy={running}
                    className='ecw-manual-run__button'
                >
                    {__("Run Diagnostics", "cache-autopilot")}
                </Button>
                <p className='ecw-manual-run__description'>
                    {__(
                        "Shows WP-Cron configuration and recent warmup queue activity.",
                        "cache-autopilot",
                    )}
                </p>
            </div>

            {diagnostics && (
                <>
                    <div className='ekesto-responsive-table-container'>
                        <div className='ekesto-responsive-table-inner'>
                            <table className='widefat striped ecw-diagnostics-table'>
                                <tbody>
                                    <tr>
                                        <th style={{ width: "300px" }}>
                                            DISABLE_WP_CRON
                                        </th>
                                        <td>
                                            <code>
                                                {diagnostics.disable_wp_cron
                                                    ? "true"
                                                    : "false"}
                                            </code>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>ALTERNATE_WP_CRON</th>
                                        <td>
                                            <code>
                                                {diagnostics.alternate_wp_cron
                                                    ? "true"
                                                    : "false"}
                                            </code>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {__(
                                                "Last warmup queue activity",
                                                "cache-autopilot",
                                            )}
                                        </th>
                                        <td>
                                            <code>
                                                {diagnostics.last_activity ||
                                                    "\u2014 (idle)"}
                                            </code>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {diagnostics.disable_wp_cron && (
                        <Notice status='warning' isDismissible={false}>
                            {__(
                                "WP-Cron is disabled. Make sure a server cron is configured to call wp-cron.php every 1\u20135 minutes, otherwise warmup batches will not run.",
                                "cache-autopilot",
                            )}
                        </Notice>
                    )}

                    {!diagnostics.disable_wp_cron &&
                        !diagnostics.last_activity && (
                            <Notice status='info' isDismissible={false}>
                                {__(
                                    "No warmup queue activity recorded yet. Activity will appear here after the first warmup run.",
                                    "cache-autopilot",
                                )}
                            </Notice>
                        )}
                </>
            )}
        </>
    );
}
