import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { ReactNode } from 'react';
import type { ChartData, ChartOptions, TooltipItem } from 'chart.js';
import {
  CircleCheckIcon,
  ExternalLinkIcon,
  GaugeIcon,
  LoaderCircleIcon,
  TrendingDownIcon,
  TrendingUpIcon,
  WrenchIcon,
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';

import ChartCanvas from '../../components/agent-analytics/ChartCanvas';
import { OptionTip } from '../../components/seo/option-row';
import {
  SeoPage,
  SeoPageError,
  SeoPageHeader,
  SeoPageLoading,
} from '../../components/seo/seo-page';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '../../components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../../components/ui/table';
import { Tabs, TabsList, TabsTrigger } from '../../components/ui/tabs';
import { useSeoBadges } from '../../context/seo-badges.context';
import {
  dayOf,
  eventLabel,
  eventsByDay,
  formatBytes,
  formatMs,
  trendOf,
  trendTone,
  waitForMeasurement,
  type SeoPerfMetric,
} from '../../lib/seo/performance';
import { timeAgo } from '../../lib/seo/time-ago';
import { classNames } from '../../lib/utils';
import type {
  ISeoPerfAction,
  ISeoPerfPage,
  ISeoPerformance,
  ISeoServerFacts,
} from '../../service/seo/seo.interface';
import {
  fetchSeoPerformance,
  fetchSeoPerformanceJob,
  fixSeoCheck,
  startSeoPerformance,
} from '../../service/seo/seo.service';

import { PAGES } from './settings.copy';

const LINE_COLOR = '#C8175D';
const MARKER_COLOR = '#d97706';
const GRID_COLOR = '#e5e7eb';
const TICK_COLOR = '#6b7280';

/** What the history chart can follow, and how its values read. */
const METRICS: {
  key: SeoPerfMetric;
  label: string;
  tip: string;
  format: (value: number | null) => string;
}[] = [
  {
    key: 'server_ms',
    label: 'Response time',
    tip: 'How long the front page took to come back from the server to itself, past the page cache: the time WordPress, the theme and the plugins need to build it. The median of three loads.',
    format: formatMs,
  },
  {
    key: 'php_ms',
    label: 'PHP time',
    tip: 'What the front page reported itself: the time from the request reaching PHP to the last line of HTML.',
    format: formatMs,
  },
  {
    key: 'html_bytes',
    label: 'HTML size',
    tip: 'The front page’s HTML alone, before images, scripts and styles, uncompressed.',
    format: formatBytes,
  },
  {
    key: 'db_bytes',
    label: 'Database',
    tip: 'The size of every table of this site in the database, data and indexes.',
    format: formatBytes,
  },
  {
    key: 'autoload_bytes',
    label: 'Autoload',
    tip: 'The options WordPress loads on every request before anything else.',
    format: formatBytes,
  },
];

const PERIODS = [30, 90];

/** A figure's label with the tip that says what it measures. */
const Label = ({
  children,
  tip,
}: {
  children: ReactNode;
  tip: ReactNode;
}): JSX.Element => (
  <span className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
    {children}
    <OptionTip>{tip}</OptionTip>
  </span>
);

/** How a figure moved over a week and a month, coloured when it matters. */
const TrendLine = ({
  performance,
  metric,
}: {
  performance: ISeoPerformance;
  metric: SeoPerfMetric;
}): JSX.Element | null => {
  const parts = [7, 30]
    .map(days => ({ days, trend: trendOf(performance.history, metric, days) }))
    .filter(({ trend }) => trend !== null);
  if (parts.length === 0) {
    return null;
  }
  return (
    <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs">
      {parts.map(({ days, trend }) => {
        if (!trend) return null;
        const tone = trendTone(trend.change);
        const Icon = trend.change < 0 ? TrendingDownIcon : TrendingUpIcon;
        return (
          <span
            key={days}
            className={classNames(
              'inline-flex items-center gap-1 tabular-nums',
              tone === 'better' && 'text-emerald-700 dark:text-emerald-400',
              tone === 'worse' && 'text-red-700 dark:text-red-400',
              tone === 'same' && 'text-muted-foreground'
            )}
          >
            <Icon className="size-3.5" />
            {trend.change > 0 ? '+' : ''}
            {trend.change}% in {days} days
          </span>
        );
      })}
    </div>
  );
};

const Figure = ({
  label,
  tip,
  value,
  detail,
  children,
}: {
  label: string;
  tip: ReactNode;
  value: ReactNode;
  detail?: ReactNode;
  children?: ReactNode;
}): JSX.Element => (
  <Card size="sm">
    <CardContent>
      <Label tip={tip}>{label}</Label>
      <div className="mt-1 text-3xl font-semibold tabular-nums text-foreground">
        {value}
      </div>
      {detail && <p className="mt-1 text-xs text-muted-foreground">{detail}</p>}
      {children}
    </CardContent>
  </Card>
);

/** A row of the caches figure: what runs, and whether it does. */
const CacheRow = ({
  name,
  on,
  detail,
}: {
  name: string;
  on: boolean;
  detail: string;
}): JSX.Element => (
  <div className="flex items-start justify-between gap-2 text-xs">
    <span className="text-muted-foreground">{name}</span>
    <span
      className={classNames(
        'text-right font-medium',
        on
          ? 'text-emerald-700 dark:text-emerald-400'
          : 'text-amber-700 dark:text-amber-400'
      )}
    >
      {detail}
    </span>
  </div>
);

const HeaderFigures = ({
  performance,
}: {
  performance: ISeoPerformance;
}): JSX.Element | null => {
  const latest = performance.latest;
  const home = latest?.pages.find(page => page.key === 'home');
  const server = latest?.server ?? performance.server;
  const pageCache = latest?.page_cache || home?.cache || '';
  return (
    <div className="@container">
      <div className="grid gap-3 @lg:grid-cols-2 @2xl:grid-cols-4">
        <Figure
          label="Response time"
          tip="How long the front page takes to come back when the server asks itself, past the page cache: what WordPress, the theme and the plugins cost on every page that is not cached. Under 600 ms is good; a visitor adds the network on top."
          value={formatMs(home?.server_ms)}
          detail={
            home?.cached_ms != null
              ? `As a visitor gets it: ${formatMs(home.cached_ms)}${home.cache ? ', from the page cache' : ''}.`
              : undefined
          }
        >
          <TrendLine performance={performance} metric="server_ms" />
        </Figure>
        <Figure
          label="PHP time and queries"
          tip="What the front page reported itself when it was built: the PHP time, the database queries and the peak memory. Hundreds of queries usually mean a plugin that asks the database in a loop."
          value={formatMs(home?.php_ms)}
          detail={
            home?.queries != null
              ? `${home.queries.toLocaleString()} queries, ${formatBytes(home.memory)} of memory.`
              : 'The page did not report back; it may be served before WordPress loads.'
          }
        >
          <TrendLine performance={performance} metric="php_ms" />
        </Figure>
        <Figure
          label="Page weight"
          tip="The front page’s HTML alone, before images, scripts and styles. Page builders and inline styles inflate it; every visitor and every crawler downloads it whole, so it should leave the server compressed."
          value={formatBytes(home?.html_bytes)}
          detail={
            home
              ? home.encoding
                ? `Sent compressed (${home.encoding}).`
                : 'Sent uncompressed: gzip would cut it by about three quarters.'
              : undefined
          }
        >
          <TrendLine performance={performance} metric="html_bytes" />
        </Figure>
        <Figure
          label="Caches"
          tip="The three caches that make WordPress fast: the page cache hands out built pages, the object cache keeps database answers in memory between requests, OPcache keeps compiled PHP."
          value={
            [
              pageCache !== '',
              server.object_cache.persistent,
              server.opcache.enabled,
            ].filter(Boolean).length + ' of 3'
          }
        >
          <div className="mt-2 flex flex-col gap-1">
            <CacheRow
              name="Page cache"
              on={pageCache !== ''}
              detail={pageCache !== '' ? pageCache : 'none'}
            />
            <CacheRow
              name="Object cache"
              on={server.object_cache.persistent}
              detail={
                server.object_cache.persistent
                  ? `${server.object_cache.type || 'on'}${server.object_cache.hit_rate != null ? `, ${server.object_cache.hit_rate}% hits` : ''}`
                  : 'none'
              }
            />
            <CacheRow
              name="OPcache"
              on={server.opcache.enabled}
              detail={
                server.opcache.enabled
                  ? `on${server.opcache.hit_rate != null ? `, ${server.opcache.hit_rate}% hits` : ''}`
                  : 'off'
              }
            />
          </div>
        </Figure>
      </div>
    </div>
  );
};

const COLUMNS: { label: string; tip: string }[] = [
  {
    label: 'Server',
    tip: 'The median of three loads past the page cache, from the server to itself.',
  },
  {
    label: 'Visitor',
    tip: 'A load as a visitor asks for it, through any page cache: what most people get.',
  },
  {
    label: 'PHP',
    tip: 'The time PHP took to build the page, as the page reported it.',
  },
  {
    label: 'Queries',
    tip: 'Database queries the page ran. A few dozen is usual; hundreds point at a plugin.',
  },
  {
    label: 'Memory',
    tip: 'The most memory PHP held while building the page.',
  },
  {
    label: 'HTML',
    tip: 'The page’s HTML, uncompressed, before images, scripts and styles.',
  },
  {
    label: 'Sent as',
    tip: 'Whether the HTML left the server compressed (gzip, br) or not.',
  },
];

const PagesCard = ({ pages }: { pages: ISeoPerfPage[] }): JSX.Element => (
  <Card>
    <CardHeader>
      <CardTitle>Pages measured</CardTitle>
      <CardDescription>
        One page of each kind the site has, loaded from the server itself: three
        times past the page cache, then as a visitor would.
      </CardDescription>
    </CardHeader>
    <CardContent>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Page</TableHead>
            {COLUMNS.map(column => (
              <TableHead key={column.label} className="text-right">
                <span className="inline-flex items-center gap-1">
                  {column.label}
                  <OptionTip>{column.tip}</OptionTip>
                </span>
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {pages.map(page => (
            <TableRow key={page.key}>
              <TableCell>
                <a
                  href={page.url}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-1 font-medium text-foreground underline-offset-4 hover:underline"
                >
                  {page.label}
                  <ExternalLinkIcon className="size-3 text-muted-foreground" />
                </a>
                {page.title && (
                  <div className="max-w-56 truncate text-xs text-muted-foreground">
                    {page.title}
                  </div>
                )}
                {page.error && (
                  <div className="text-xs text-red-700 dark:text-red-400">
                    {page.error}
                  </div>
                )}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {formatMs(page.server_ms)}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {formatMs(page.cached_ms)}
                {page.cache && (
                  <div className="text-xs text-emerald-700 dark:text-emerald-400">
                    cached
                  </div>
                )}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {formatMs(page.php_ms)}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {page.queries ?? '—'}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {formatBytes(page.memory)}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {formatBytes(page.html_bytes)}
              </TableCell>
              <TableCell className="text-right">
                {page.encoding ? (
                  <span className="text-emerald-700 dark:text-emerald-400">
                    {page.encoding}
                  </span>
                ) : page.server_ms != null ? (
                  <span className="text-amber-700 dark:text-amber-400">
                    uncompressed
                  </span>
                ) : (
                  '—'
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </CardContent>
  </Card>
);

const HistoryCard = ({
  performance,
}: {
  performance: ISeoPerformance;
}): JSX.Element => {
  const [metric, setMetric] = useState<SeoPerfMetric>('server_ms');
  const [days, setDays] = useState(30);
  const chosen = METRICS.find(item => item.key === metric) ?? METRICS[0];
  const since = Date.now() - days * 24 * 60 * 60 * 1000;
  const points = performance.history.filter(
    point => new Date(point.at).getTime() >= since
  );
  const labels = points.map(point => dayOf(point.at));
  const events = performance.events.filter(
    event => new Date(event.at).getTime() >= since
  );
  const placed = eventsByDay(events, labels);

  const values = points.map(point => point[metric]);
  const top = Math.max(0, ...values.map(value => value ?? 0));
  const data = useMemo<ChartData>(
    () => ({
      labels: labels.map(day =>
        new Date(`${day}T12:00:00Z`).toLocaleDateString(undefined, {
          day: 'numeric',
          month: 'short',
        })
      ),
      datasets: [
        {
          type: 'line' as const,
          label: chosen.label,
          data: values,
          borderColor: LINE_COLOR,
          backgroundColor: 'rgba(200, 23, 93, 0.12)',
          fill: true,
          tension: 0.3,
          spanGaps: true,
          pointRadius: 2,
        },
        {
          type: 'line' as const,
          label: 'Changes on the site',
          data: labels.map(day => (placed[day] ? top * 1.08 || 1 : null)),
          borderColor: MARKER_COLOR,
          backgroundColor: MARKER_COLOR,
          showLine: false,
          pointStyle: 'triangle',
          pointRadius: 6,
          pointHoverRadius: 8,
        },
      ],
    }),
    [JSON.stringify(labels), JSON.stringify(values), metric, top]
  );
  const options = useMemo<ChartOptions>(
    () => ({
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: (item: TooltipItem<'line'>) =>
              item.datasetIndex === 1
                ? (placed[labels[item.dataIndex]] ?? []).map(eventLabel)
                : `${chosen.label}: ${chosen.format(item.parsed.y)}`,
          },
        },
      },
      scales: {
        x: {
          grid: { display: false },
          ticks: { color: TICK_COLOR, maxRotation: 0, autoSkip: true },
        },
        y: {
          beginAtZero: true,
          grid: { color: GRID_COLOR },
          ticks: {
            color: TICK_COLOR,
            callback: value => chosen.format(Number(value)),
          },
        },
      },
    }),
    [metric, JSON.stringify(placed), JSON.stringify(labels)]
  );

  return (
    <Card>
      <CardHeader>
        <CardTitle>History</CardTitle>
        <CardDescription>
          The front page and the server, one measurement a day. A triangle marks
          a day after a plugin, a theme or WordPress changed: hover it to see
          what.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <Tabs
            value={metric}
            onValueChange={next => setMetric(next as SeoPerfMetric)}
          >
            <TabsList aria-label="What the chart shows">
              {METRICS.map(item => (
                <TabsTrigger key={item.key} value={item.key} className="px-3">
                  {item.label}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
          <Tabs
            value={String(days)}
            onValueChange={next => setDays(Number(next))}
          >
            <TabsList aria-label="Period">
              {PERIODS.map(period => (
                <TabsTrigger
                  key={period}
                  value={String(period)}
                  className="px-3"
                >
                  {period} days
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        </div>
        <p className="text-xs text-muted-foreground">{chosen.tip}</p>
        {points.length < 2 ? (
          <Callout tone="info" className="text-sm">
            The chart fills in day by day: the dashboard measures once a day,
            with the checkup. {points.length === 1 ? 'One day so far.' : ''}
          </Callout>
        ) : (
          <ChartCanvas type="line" data={data} options={options} height={260} />
        )}
        {events.length > 0 && (
          <div className="flex flex-col gap-1.5">
            <h3 className="text-sm font-semibold text-foreground">
              Changes on the site
            </h3>
            <ul className="flex flex-col gap-1">
              {[...events].reverse().map(event => (
                <li
                  key={`${event.at}-${event.type}-${event.name}`}
                  className="flex items-start gap-2 text-xs text-muted-foreground"
                >
                  <span className="mt-1 size-1.5 shrink-0 rounded-full bg-amber-500" />
                  <span>
                    <span className="text-foreground">{eventLabel(event)}</span>{' '}
                    · {new Date(event.at).toLocaleString()}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

/** One number of the server, with what it means. */
const Fact = ({
  label,
  tip,
  value,
  warn = false,
}: {
  label: string;
  tip: string;
  value: ReactNode;
  warn?: boolean;
}): JSX.Element => (
  <div className="flex items-start justify-between gap-3 border-b border-border py-2 last:border-b-0">
    <Label tip={tip}>{label}</Label>
    <span
      className={classNames(
        'text-right text-sm tabular-nums',
        warn ? 'text-amber-700 dark:text-amber-400' : 'text-foreground'
      )}
    >
      {value}
    </span>
  </div>
);

const CLUTTER: Record<string, { label: string; tip: string }> = {
  expired_transients: {
    label: 'Expired transients',
    tip: 'Cache rows in the options table past their time. WordPress sweeps them daily through WP-Cron; thousands mean the sweep is not running.',
  },
  revisions: {
    label: 'Revisions',
    tip: 'Older versions of posts and pages. Useful for going back; WP_POST_REVISIONS in wp-config.php caps how many each post keeps.',
  },
  auto_drafts: {
    label: 'Auto-drafts',
    tip: 'Drafts the editor makes when a new post is opened and never filled.',
  },
  trash: {
    label: 'Posts in the trash',
    tip: 'WordPress empties the trash after 30 days.',
  },
  spam: {
    label: 'Spam comments',
    tip: 'Comments marked as spam, kept until deleted.',
  },
  trashed_comments: {
    label: 'Comments in the trash',
    tip: 'Comments moved to the trash, emptied after 30 days.',
  },
  orphan_postmeta: {
    label: 'Meta of deleted posts',
    tip: 'Rows of post meta whose post no longer exists: left by plugins that delete posts without their meta.',
  },
  orphan_commentmeta: {
    label: 'Meta of deleted comments',
    tip: 'Rows of comment meta whose comment no longer exists.',
  },
};

const ServerCard = ({ server }: { server: ISeoServerFacts }): JSX.Element => (
  <Card>
    <CardHeader>
      <CardTitle>The server</CardTitle>
      <CardDescription>
        Read when this page opened: what PHP, the caches and the database have
        now.
      </CardDescription>
    </CardHeader>
    <CardContent className="grid gap-x-8 gap-y-6 @container @3xl:grid-cols-2">
      <div className="flex flex-col">
        <h3 className="mb-1 text-sm font-semibold text-foreground">PHP</h3>
        <Fact
          label="Version"
          tip={`PHP ${server.php.recommended} or newer is supported and markedly faster; the host switches it in its panel.`}
          value={`PHP ${server.php.version}`}
          warn={
            server.php.version.localeCompare(
              server.php.recommended,
              undefined,
              {
                numeric: true,
              }
            ) < 0
          }
        />
        <Fact
          label="Memory limit"
          tip="The most memory one request may use (memory_limit). A shop wants 128 MB or more; a page that hits it ends in a white screen."
          value={
            server.php.memory_limit > 0
              ? formatBytes(server.php.memory_limit)
              : 'no limit'
          }
        />
        <Fact
          label="WordPress memory limit"
          tip="WP_MEMORY_LIMIT in wp-config.php: what WordPress lets the front of the site use, within PHP’s limit."
          value={formatBytes(server.php.wp_memory_limit)}
        />
        <Fact
          label="Time limit"
          tip="max_execution_time: how long PHP may work on one request. Under 30 seconds, catalogue imports stop halfway."
          value={
            server.php.max_execution_time > 0
              ? `${server.php.max_execution_time} s`
              : 'unlimited'
          }
        />
        <Fact
          label="OPcache"
          tip="Keeps compiled PHP in memory between requests; off, every request compiles every file again. The hit rate is the share of files found compiled."
          value={
            server.opcache.enabled
              ? `On${server.opcache.used != null && server.opcache.free != null ? `, ${formatBytes(server.opcache.used)} used of ${formatBytes(server.opcache.used + server.opcache.free)}` : ''}${server.opcache.hit_rate != null ? `, ${server.opcache.hit_rate}% hits` : ''}`
              : 'Off'
          }
          warn={!server.opcache.enabled}
        />
        <Fact
          label="Object cache"
          tip="Redis, Memcached or the like keeps options, posts and query results in memory between requests. The hit rate is this page load’s share of lookups it answered."
          value={
            server.object_cache.persistent
              ? `${server.object_cache.type || 'On'}${server.object_cache.hit_rate != null ? `, ${server.object_cache.hit_rate}% hits` : ''}`
              : server.object_cache.offer?.status === 'server'
                ? `None; ${server.object_cache.offer.service} runs here`
                : 'None'
          }
          warn={!server.object_cache.persistent}
        />
        <Fact
          label="Active plugins"
          tip="Every active plugin loads on every request. A few dozen is common; past that, check which ones the site still uses."
          value={server.plugins}
        />
        <Fact
          label="Scheduled jobs late"
          tip="WP-Cron jobs more than an hour overdue. WP-Cron fires when visitors come; on a quiet site, or with DISABLE_WP_CRON, a system cron has to call it."
          value={`${server.cron.overdue}${server.cron.disabled ? ' (DISABLE_WP_CRON)' : ''}`}
          warn={server.cron.overdue > 0}
        />
        {server.action_scheduler && (
          <Fact
            label="Action Scheduler"
            tip={`The queue of background jobs WooCommerce and other plugins use. Finished jobs should go after ${server.action_scheduler.kept_days} days; failed ones stay to be read.`}
            value={`${server.action_scheduler.past_due} overdue, ${server.action_scheduler.failed} failed, ${server.action_scheduler.old.toLocaleString()} old finished`}
            warn={server.action_scheduler.past_due > 0}
          />
        )}
        {server.disk.free != null && server.disk.total != null && (
          <Fact
            label="Disk"
            tip="Free space where WordPress lives. A full disk stops uploads, updates and the database itself."
            value={`${formatBytes(server.disk.free)} free of ${formatBytes(server.disk.total)}`}
            warn={server.disk.free < 1024 * 1024 * 1024}
          />
        )}
      </div>
      <div className="flex flex-col gap-6">
        <div className="flex flex-col">
          <h3 className="mb-1 text-sm font-semibold text-foreground">
            Database
          </h3>
          <Fact
            label="Server"
            tip="MySQL 8.0 or MariaDB 10.4 and newer are what WordPress is tested on."
            value={server.database.server}
          />
          <Fact
            label="Size"
            tip="Every table of this site, data and indexes."
            value={formatBytes(server.database.size)}
          />
          <Table className="mt-2">
            <TableHeader>
              <TableRow>
                <TableHead>Largest tables</TableHead>
                <TableHead className="text-right">Rows</TableHead>
                <TableHead className="text-right">Size</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {server.database.tables.map(table => (
                <TableRow key={table.name}>
                  <TableCell className="font-mono text-xs">
                    {table.name}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {table.rows.toLocaleString()}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {formatBytes(table.size)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
        <div className="flex flex-col">
          <h3 className="mb-1 flex items-center gap-1.5 text-sm font-semibold text-foreground">
            Autoloaded options
            <OptionTip>
              Options WordPress loads on every request before anything else.
              Over {formatBytes(server.autoload.limit)}, every page starts
              slower. The owner is guessed from the name; one that matches no
              plugin was often left by a plugin removed long ago. Recomaze never
              changes them: delete the plugin’s data from its own settings, or
              ask whoever runs the site.
            </OptionTip>
          </h3>
          <Fact
            label="Loaded on every request"
            tip="The sum of every option set to load automatically."
            value={formatBytes(server.autoload.size)}
            warn={server.autoload.size > server.autoload.limit}
          />
          <Table className="mt-2">
            <TableHeader>
              <TableRow>
                <TableHead>Option</TableHead>
                <TableHead>Probably from</TableHead>
                <TableHead className="text-right">Size</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {server.autoload.top.map(option => (
                <TableRow key={option.name}>
                  <TableCell className="max-w-48 truncate font-mono text-xs">
                    {option.name}
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">
                    {option.owner || 'unknown, maybe a removed plugin'}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {formatBytes(option.size)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
        <div className="flex flex-col">
          <h3 className="mb-1 text-sm font-semibold text-foreground">
            What has piled up
          </h3>
          {Object.entries(server.clutter).map(([key, count]) => (
            <Fact
              key={key}
              label={CLUTTER[key]?.label ?? key}
              tip={CLUTTER[key]?.tip ?? ''}
              value={count.toLocaleString()}
            />
          ))}
        </div>
      </div>
    </CardContent>
  </Card>
);

const ActionsCard = ({
  actions,
  busy,
  onFix,
}: {
  actions: ISeoPerfAction[];
  busy: string | null;
  onFix: (action: ISeoPerfAction) => void;
}): JSX.Element | null => {
  const navigate = useNavigate();
  if (actions.length === 0) {
    return null;
  }
  const open = actions.filter(action => !action.passed);
  return (
    <Card>
      <CardHeader>
        <CardTitle>What would make it faster</CardTitle>
        <CardDescription>
          From the last checkup run. A button here fixes it on the site and
          keeps a way back; the rest is a plugin to add or a word with the host.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        {open.length === 0 && (
          <Callout tone="success" className="text-sm">
            Nothing to fix: compression, the caches and the database pass.
          </Callout>
        )}
        {open.map(action => (
          <div
            key={action.id}
            className="flex flex-wrap items-start justify-between gap-3 border-b border-border pb-3 last:border-b-0 last:pb-0"
          >
            <div className="flex min-w-0 max-w-3xl flex-col gap-1">
              <span className="text-sm font-semibold text-foreground">
                {action.title}
              </span>
              <span className="text-xs leading-relaxed text-muted-foreground">
                {action.description}
              </span>
            </div>
            {action.fix?.type === 'local' && (
              <Button
                size="sm"
                disabled={busy !== null}
                onClick={() => onFix(action)}
              >
                {busy === action.id ? (
                  <LoaderCircleIcon className="animate-spin" />
                ) : (
                  <WrenchIcon />
                )}{' '}
                {action.fix.label ?? 'Fix'}
              </Button>
            )}
            {action.fix?.type === 'link' && action.fix.to && (
              <Button
                size="sm"
                variant="outline"
                onClick={() => navigate(action.fix?.to as string)}
              >
                {action.fix.label ?? 'Open'}
              </Button>
            )}
            {action.fix?.type === 'external' && action.fix.to && (
              <Button
                size="sm"
                variant="outline"
                nativeButton={false}
                render={
                  <a href={action.fix.to} target="_blank" rel="noreferrer" />
                }
              >
                {action.fix.label ?? 'Open'} <ExternalLinkIcon />
              </Button>
            )}
          </div>
        ))}
        {actions
          .filter(action => action.passed)
          .map(action => (
            <div
              key={action.id}
              className="flex items-center gap-2 text-xs text-muted-foreground"
            >
              <CircleCheckIcon className="size-4 text-emerald-600 dark:text-emerald-400" />
              {action.title}
            </div>
          ))}
      </CardContent>
    </Card>
  );
};

const ErrorsCard = ({
  errors,
}: {
  errors: ISeoPerformance['errors'];
}): JSX.Element | null =>
  errors.length === 0 ? null : (
    <Card>
      <CardHeader>
        <CardTitle>Recent PHP errors</CardTitle>
        <CardDescription>
          Fatal errors Recomaze caught on this site: the ones in its own code,
          and any in the day after another SEO plugin was switched off. Each one
          went to Recomaze support too.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="flex flex-col gap-2">
          {errors.map(error => (
            <li
              key={`${error.time}-${error.file}-${error.line}`}
              className="flex flex-col gap-0.5 text-xs"
            >
              <span className="text-foreground">{error.message}</span>
              <span className="text-muted-foreground">
                {new Date(error.time * 1000).toLocaleString()}
                {error.file ? ` · ${error.file}:${error.line}` : ''}
              </span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );

/**
 * SEO → Performance: how fast the site answers and what the server under
 * it holds, measured from the server itself every day, with the history,
 * the changes that explain it and the fixes a click away.
 */
const SeoPerformance = (): JSX.Element => {
  const [performance, setPerformance] = useState<ISeoPerformance | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [measuring, setMeasuring] = useState(false);
  const [fixing, setFixing] = useState<string | null>(null);
  const badges = useSeoBadges();
  const here = useRef(true);
  useEffect(
    () => () => {
      here.current = false;
    },
    []
  );

  const load = useCallback(async (fresh = false): Promise<void> => {
    try {
      setPerformance(await fetchSeoPerformance(fresh));
      setError(null);
    } catch (reason) {
      setError((reason as Error).message);
    }
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  const measure = async (): Promise<void> => {
    setMeasuring(true);
    try {
      const { job } = await startSeoPerformance();
      const answer = await waitForMeasurement(job, {
        ask: fetchSeoPerformanceJob,
        cancelled: () => !here.current,
      });
      setPerformance(answer);
      toast.success(
        `Measured ${answer.latest?.pages.length ?? 0} pages of the site.`
      );
    } catch (reason) {
      if ((reason as { code?: string }).code !== 'cancelled') {
        toast.error((reason as Error).message);
      }
    } finally {
      if (here.current) setMeasuring(false);
    }
  };

  const fix = async (action: ISeoPerfAction): Promise<void> => {
    setFixing(action.id);
    try {
      const result = await fixSeoCheck(action.id);
      (result.fixed ? toast.success : toast.info)(result.message);
      badges.refresh();
      await load(true);
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setFixing(null);
    }
  };

  if (error && !performance) {
    return <SeoPageError message={error} />;
  }
  if (!performance) {
    return <SeoPageLoading />;
  }

  return (
    <SeoPage>
      <SeoPageHeader
        title={PAGES.performance.title}
        description={PAGES.performance.description}
        badge={
          performance.latest ? (
            <Badge variant="outline">
              Measured {timeAgo(performance.latest.measured_at)}
            </Badge>
          ) : undefined
        }
        actions={
          <Button size="sm" disabled={measuring} onClick={() => void measure()}>
            {measuring ? (
              <LoaderCircleIcon className="animate-spin" />
            ) : (
              <GaugeIcon />
            )}{' '}
            {measuring ? 'Measuring… about a minute' : 'Measure now'}
          </Button>
        }
      />

      {error && <Callout tone="danger">{error}</Callout>}

      {!performance.latest && (
        <Callout tone="info" className="text-sm">
          Nothing measured yet. The dashboard measures once a day with the
          checkup; <strong>Measure now</strong> loads the pages right away.
        </Callout>
      )}

      <HeaderFigures performance={performance} />
      {performance.latest && <PagesCard pages={performance.latest.pages} />}
      <ActionsCard
        actions={performance.actions}
        busy={fixing}
        onFix={action => void fix(action)}
      />
      <HistoryCard performance={performance} />
      <ServerCard server={performance.server} />
      <ErrorsCard errors={performance.errors} />
    </SeoPage>
  );
};

export default SeoPerformance;