import { useQuery } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Activity, AlertTriangle, CheckCircle2, Clock, RefreshCw, ServerCrash, SkipForward, Wifi, WifiOff, } from "lucide-react";
import { formatDistanceToNow, format } from "date-fns";
// ─── Helpers ──────────────────────────────────────────────────────────────────
const JOB_LABELS = {
    "local-backup": "Local Backup (8 PM)",
    "usb-backup": "USB Backup (9 PM)",
};
function jobLabel(name) {
    return JOB_LABELS[name] ?? name;
}
function StatusBadge({ status }) {
    if (status === "success")
        return (<Badge className="bg-green-100 text-green-700 border-green-200 gap-1">
        <CheckCircle2 className="h-3 w-3"/> Success
      </Badge>);
    if (status === "failed")
        return (<Badge className="bg-red-100 text-red-700 border-red-200 gap-1">
        <ServerCrash className="h-3 w-3"/> Failed
      </Badge>);
    if (status === "skipped")
        return (<Badge className="bg-gray-100 text-gray-600 border-gray-200 gap-1">
        <SkipForward className="h-3 w-3"/> Skipped
      </Badge>);
    return (<Badge className="bg-blue-100 text-blue-700 border-blue-200 gap-1">
      <Activity className="h-3 w-3 animate-pulse"/> Running
    </Badge>);
}
function formatDuration(ms) {
    if (ms === null)
        return "—";
    if (ms < 1000)
        return `${ms}ms`;
    return `${(ms / 1000).toFixed(1)}s`;
}
function formatDate(iso) {
    if (!iso)
        return "—";
    return format(new Date(iso), "MMM d, yyyy HH:mm:ss");
}
function timeAgo(iso) {
    if (!iso)
        return "—";
    return formatDistanceToNow(new Date(iso), { addSuffix: true });
}
// ─── Page ─────────────────────────────────────────────────────────────────────
export default function JobMonitorPage() {
    const { data: summary, isLoading: loadingSummary, refetch: refetchSummary, dataUpdatedAt: summaryUpdated, } = useQuery({
        queryKey: ["/job-monitor/summary"],
        queryFn: async () => {
            const res = await apiRequest("GET", "/api/job-monitor/summary");
            return res.json();
        },
        refetchInterval: 30_000,
    });
    const { data: failed, isLoading: loadingFailed, refetch: refetchFailed, } = useQuery({
        queryKey: ["/job-monitor/failed"],
        queryFn: async () => {
            const res = await apiRequest("GET", "/api/job-monitor/failed");
            return res.json();
        },
        refetchInterval: 30_000,
    });
    const { data: seleniumStatus, isLoading: loadingSelenium, refetch: refetchSelenium, } = useQuery({
        queryKey: ["/job-monitor/selenium-status"],
        queryFn: async () => {
            const res = await apiRequest("GET", "/api/job-monitor/selenium-status");
            return res.json();
        },
        refetchInterval: 10_000,
    });
    function refreshAll() {
        refetchSummary();
        refetchFailed();
        refetchSelenium();
    }
    const lastUpdated = summaryUpdated
        ? format(new Date(summaryUpdated), "HH:mm:ss")
        : null;
    return (<div className="p-6 max-w-5xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-gray-900">Job Monitor</h1>
          <p className="text-sm text-gray-500 mt-0.5">
            Background job health and queue status
            {lastUpdated && (<span className="ml-2 text-gray-400">· last updated {lastUpdated}</span>)}
          </p>
        </div>
        <Button variant="outline" size="sm" onClick={refreshAll} className="gap-1.5">
          <RefreshCw className="h-4 w-4"/>
          Refresh
        </Button>
      </div>

      {/* ── Cron Jobs ── */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Clock className="h-4 w-4 text-gray-500"/>
            Scheduled Cron Jobs
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loadingSummary ? (<p className="text-sm text-gray-400">Loading…</p>) : !summary?.lastRuns.length ? (<p className="text-sm text-gray-500">
              No job runs recorded yet. Jobs are scheduled at 8 PM (local backup) and 9 PM (USB backup).
            </p>) : (<div className="space-y-3">
              {summary.lastRuns.map((log) => (<div key={log.id} className="flex items-start justify-between rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
                  <div className="space-y-0.5">
                    <p className="text-sm font-medium text-gray-800">
                      {jobLabel(log.jobName)}
                    </p>
                    <p className="text-xs text-gray-500">
                      Last run: {formatDate(log.startedAt)}{" "}
                      <span className="text-gray-400">({timeAgo(log.startedAt)})</span>
                    </p>
                    {log.status === "failed" && log.errorMessage && (<p className="text-xs text-red-600 mt-1 flex items-center gap-1">
                        <AlertTriangle className="h-3 w-3 shrink-0"/>
                        {log.errorMessage}
                      </p>)}
                  </div>
                  <div className="flex flex-col items-end gap-1">
                    <StatusBadge status={log.status}/>
                    <span className="text-xs text-gray-400">
                      {formatDuration(log.durationMs)}
                    </span>
                  </div>
                </div>))}
            </div>)}
        </CardContent>
      </Card>

      {/* ── Selenium Queue ── */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            {seleniumStatus?.online ? (<Wifi className="h-4 w-4 text-green-500"/>) : (<WifiOff className="h-4 w-4 text-gray-400"/>)}
            Selenium Job Queue
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loadingSelenium ? (<p className="text-sm text-gray-400">Loading…</p>) : (<div className="grid grid-cols-3 gap-4">
              {/* Online status */}
              <div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-center">
                <p className="text-xs text-gray-500 mb-1">Service</p>
                {seleniumStatus?.online ? (<span className="inline-flex items-center gap-1 text-sm font-medium text-green-700">
                    <CheckCircle2 className="h-4 w-4"/> Online
                  </span>) : (<span className="inline-flex items-center gap-1 text-sm font-medium text-gray-500">
                    <WifiOff className="h-4 w-4"/> Offline
                  </span>)}
              </div>

              {/* Active jobs */}
              <div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-center">
                <p className="text-xs text-gray-500 mb-1">Active Jobs</p>
                <p className={`text-2xl font-bold ${(seleniumStatus?.active_jobs ?? 0) > 0
                ? "text-blue-600"
                : "text-gray-700"}`}>
                  {seleniumStatus?.active_jobs ?? 0}
                </p>
              </div>

              {/* Queued jobs */}
              <div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-center">
                <p className="text-xs text-gray-500 mb-1">Queued</p>
                <p className={`text-2xl font-bold ${(seleniumStatus?.queued_jobs ?? 0) > 0
                ? "text-amber-600"
                : "text-gray-700"}`}>
                  {seleniumStatus?.queued_jobs ?? 0}
                </p>
              </div>
            </div>)}
        </CardContent>
      </Card>

      {/* ── Failed Alerts ── */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <AlertTriangle className="h-4 w-4 text-red-500"/>
            Failed Job Alerts
            {!loadingFailed && failed && failed.length > 0 && (<Badge className="bg-red-100 text-red-700 border-red-200 ml-1">
                {failed.length}
              </Badge>)}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loadingFailed ? (<p className="text-sm text-gray-400">Loading…</p>) : !failed?.length ? (<div className="flex items-center gap-2 text-sm text-green-700">
              <CheckCircle2 className="h-4 w-4"/>
              No failed jobs — everything looks healthy.
            </div>) : (<div className="space-y-2">
              {failed.map((log) => (<div key={log.id} className="rounded-lg border border-red-100 bg-red-50 px-4 py-3">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm font-medium text-red-800">
                      {jobLabel(log.jobName)}
                    </span>
                    <span className="text-xs text-gray-500">
                      {formatDate(log.startedAt)}
                    </span>
                  </div>
                  {log.errorMessage && (<p className="text-xs text-red-600">{log.errorMessage}</p>)}
                </div>))}
            </div>)}
        </CardContent>
      </Card>

      {/* ── Recent History ── */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Activity className="h-4 w-4 text-gray-500"/>
            Recent Run History
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loadingSummary ? (<p className="text-sm text-gray-400">Loading…</p>) : !summary?.recentLogs.length ? (<p className="text-sm text-gray-500">No history yet.</p>) : (<div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b text-xs text-gray-500 uppercase tracking-wide">
                    <th className="text-left py-2 pr-4 font-medium">Job</th>
                    <th className="text-left py-2 pr-4 font-medium">Started</th>
                    <th className="text-left py-2 pr-4 font-medium">Duration</th>
                    <th className="text-left py-2 font-medium">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {summary.recentLogs.map((log) => (<tr key={log.id} className="border-b border-gray-50 last:border-0 hover:bg-gray-50 transition-colors">
                      <td className="py-2 pr-4 font-medium text-gray-700">
                        {jobLabel(log.jobName)}
                      </td>
                      <td className="py-2 pr-4 text-gray-500">
                        {formatDate(log.startedAt)}
                      </td>
                      <td className="py-2 pr-4 text-gray-500">
                        {formatDuration(log.durationMs)}
                      </td>
                      <td className="py-2">
                        <StatusBadge status={log.status}/>
                      </td>
                    </tr>))}
                </tbody>
              </table>
            </div>)}
        </CardContent>
      </Card>
    </div>);
}