import AppLayout from '@/Layouts/AppLayout';
import { TopBar, CrumbSep, CrumbCurrent } from '@/Components/Table';
import EmailQueueCard from './Diagnostics/EmailQueueCard';

/**
 * Settings > Diagnostics — the container, and today it holds exactly one card.
 *
 * The page is a LIST OF CARDS rather than a tab strip, and that is a design decision with a
 * reason: this screen's job is to answer "what is broken?" at a glance. Tabs hide every test but
 * one behind a click, which is the opposite. Each card shows its name and a status badge while
 * collapsed, so the whole fleet's health is one screenful no matter how many tests accumulate.
 *
 * Adding test #2 costs exactly one new file under Pages/Settings/Diagnostics/ plus one endpoint
 * in the existing route group — no registry change, no sidebar change, no new middleware. That
 * property is the only reason this file exists instead of the card being the page.
 *
 * Access is EnsureSettingsEntry:diagnostics on the route group. There is no check here, and none
 * belongs here: sidebar visibility and the 403 must resolve through the same SettingsRegistry
 * condition, and a second copy in the frontend is exactly the drift ATURAN ABSOLUT #25 forbids.
 */
export default function Diagnostics({ queue, mail, recent, recentStatus }) {
    return (
        <div className="space-y-4">
            <TopBar
                title="Diagnostics"
                breadcrumb={<><CrumbCurrent>Settings</CrumbCurrent><CrumbSep /><CrumbCurrent>Diagnostics</CrumbCurrent></>}
            />

            <p className="text-[13px] leading-relaxed text-text-body">
                Self-tests for the parts of the system that fail silently. Each card reports what it
                can observe and, where it can, offers a way to provoke the failure on demand. These
                pages report; they do not repair.
            </p>

            <EmailQueueCard
                queue={queue}
                mail={mail}
                recent={recent}
                recentStatus={recentStatus}
            />
        </div>
    );
}

Diagnostics.layout = [AppLayout];