'use client';

import { useEffect, useState } from 'react';
import {
  Activity,
  AlertTriangle,
  CheckCircle2,
  Clock3,
  Database,
  Loader2,
  RefreshCw,
  ServerCog,
} from 'lucide-react';
import { RouteGuard } from '@/components/auth/Guard';
import { api } from '@/lib/api';

type JobStatus = 'queued' | 'running' | 'succeeded' | 'failed';

interface OpsRuntimeSnapshot {
  collectedAt: string;
  thresholds: {
    apiSlowRequestMs: number;
    prismaSlowQueryMs: number;
  };
  database: {
    ok: boolean;
    error?: string;
  };
  slowRequests: Array<{
    id: string;
    method: string;
    path: string;
    durationMs: number;
    thresholdMs: number;
    occurredAt: string;
  }>;
  slowQueries: Array<{
    id: string;
    queryPreview: string;
    durationMs: number;
    thresholdMs: number;
    occurredAt: string;
  }>;
  jobQueue: {
    totals: Record<JobStatus, number> & { total: number };
    byType: Array<Record<JobStatus, number> & {
      type: string;
      total: number;
      oldestQueuedAt?: string;
      nextLeaseExpiresAt?: string;
    }>;
    recentFailures: Array<{
      id: string;
      type: string;
      attempts: number;
      maxAttempts: number;
      lastError: string;
      updatedAt?: string;
    }>;
  };
  dirtySummaryCount: number;
  access: {
    requiredPermission: string;
    backendEnforced: boolean;
    adapter: string;
  };
}

const STATUS_LABEL: Record<JobStatus, string> = {
  queued: '排队',
  running: '运行',
  succeeded: '成功',
  failed: '失败',
};

export default function OpsPage() {
  return (
    <RouteGuard permission="ops:view">
      <OpsPageContent />
    </RouteGuard>
  );
}

function OpsPageContent() {
  const [snapshot, setSnapshot] = useState<OpsRuntimeSnapshot | null>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchSnapshot = async (initial = false) => {
    if (initial) setLoading(true);
    else setRefreshing(true);
    try {
      const next = await api.get<OpsRuntimeSnapshot>('/ops/runtime');
      setSnapshot(next);
      setError(null);
    } catch (e: any) {
      setError(e?.message || '读取失败');
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    void fetchSnapshot(true);
    const timer = window.setInterval(() => { void fetchSnapshot(); }, 30_000);
    return () => window.clearInterval(timer);
  }, []);

  return (
    <div className="flex h-full flex-col bg-[var(--bg)]">
      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
        <div className="flex items-center gap-2.5">
          <Activity className="h-4 w-4 text-blue-600" strokeWidth={2} />
          <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">运维看板</h1>
          {snapshot && (
            <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
              {formatClock(snapshot.collectedAt)}
            </span>
          )}
        </div>
        <button
          onClick={() => fetchSnapshot()}
          disabled={refreshing}
          className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] font-medium text-[var(--ink-soft)] transition-colors hover:bg-[var(--bg-subtle)] disabled:cursor-not-allowed disabled:opacity-60"
        >
          {refreshing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
          刷新
        </button>
      </header>

      <main className="flex-1 overflow-y-auto px-5 py-4">
        {loading ? (
          <div className="flex h-full items-center justify-center text-[13px] text-[var(--ink-muted)]">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            加载中
          </div>
        ) : error ? (
          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] text-red-700">{error}</div>
        ) : snapshot ? (
          <div className="space-y-4">
            <OverviewStrip snapshot={snapshot} />
            <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_420px]">
              <div className="space-y-4">
                <SlowRequestsPanel snapshot={snapshot} />
                <SlowQueriesPanel snapshot={snapshot} />
              </div>
              <div className="space-y-4">
                <JobQueuePanel snapshot={snapshot} />
                <FailuresPanel snapshot={snapshot} />
              </div>
            </div>
          </div>
        ) : null}
      </main>
    </div>
  );
}

function OverviewStrip({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
  const cards = [
    {
      label: '慢请求',
      value: snapshot.slowRequests.length,
      sub: `阈值 ${snapshot.thresholds.apiSlowRequestMs}ms`,
      icon: Clock3,
      tone: 'blue',
    },
    {
      label: '慢查询',
      value: snapshot.slowQueries.length,
      sub: `阈值 ${snapshot.thresholds.prismaSlowQueryMs}ms`,
      icon: Database,
      tone: 'amber',
    },
    {
      label: '后台任务',
      value: snapshot.jobQueue.totals.total,
      sub: `${snapshot.jobQueue.totals.queued} 排队 / ${snapshot.jobQueue.totals.running} 运行`,
      icon: ServerCog,
      tone: 'zinc',
    },
    {
      label: '脏 Summary',
      value: snapshot.dirtySummaryCount,
      sub: 'xiaobao_risk_summaries',
      icon: AlertTriangle,
      tone: snapshot.dirtySummaryCount > 0 ? 'red' : 'emerald',
    },
  ];

  return (
    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <section key={card.label} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-4 py-3 shadow-[var(--shadow-sm)]">
            <div className="flex items-center justify-between gap-3">
              <div className="min-w-0">
                <p className="text-[11px] font-medium text-[var(--ink-muted)]">{card.label}</p>
                <p className="mt-1 text-[24px] font-semibold leading-none tabular-nums text-[var(--ink)]">{card.value}</p>
                <p className="mt-1 truncate text-[11px] text-[var(--ink-soft)]">{card.sub}</p>
              </div>
              <span className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${toneClass(card.tone)}`}>
                <Icon className="h-4 w-4" strokeWidth={2} />
              </span>
            </div>
          </section>
        );
      })}
    </div>
  );
}

function SlowRequestsPanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
  return (
    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
      <PanelHeader title="慢请求" right={`${snapshot.slowRequests.length}`} />
      <div className="divide-y divide-[var(--line)]">
        {snapshot.slowRequests.length === 0 ? (
          <EmptyRow label="暂无慢请求" />
        ) : snapshot.slowRequests.map((item) => (
          <div key={item.id} className="grid grid-cols-[76px_minmax(0,1fr)_92px_96px] items-center gap-3 px-4 py-2.5 text-[12px]">
            <span className="font-mono font-medium text-blue-700">{item.method}</span>
            <span className="truncate font-mono text-[var(--ink)]">{item.path}</span>
            <span className="text-right font-mono tabular-nums text-red-600">{item.durationMs}ms</span>
            <span className="text-right text-[var(--ink-muted)]">{formatClock(item.occurredAt)}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function SlowQueriesPanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
  return (
    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
      <PanelHeader title="慢查询" right={`${snapshot.slowQueries.length}`} />
      <div className="divide-y divide-[var(--line)]">
        {snapshot.slowQueries.length === 0 ? (
          <EmptyRow label="暂无慢查询" />
        ) : snapshot.slowQueries.map((item) => (
          <div key={item.id} className="grid grid-cols-[minmax(0,1fr)_92px_96px] items-start gap-3 px-4 py-2.5 text-[12px]">
            <code className="min-w-0 break-words font-mono text-[11px] leading-5 text-[var(--ink)]">{item.queryPreview}</code>
            <span className="text-right font-mono tabular-nums text-amber-700">{item.durationMs}ms</span>
            <span className="text-right text-[var(--ink-muted)]">{formatClock(item.occurredAt)}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function JobQueuePanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
  const rows = snapshot.jobQueue.byType;
  return (
    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
      <PanelHeader title="后台任务" right={`${snapshot.jobQueue.totals.total}`} />
      <div className="border-b border-[var(--line)] px-4 py-3">
        <StatusBars totals={snapshot.jobQueue.totals} />
      </div>
      <div className="divide-y divide-[var(--line)]">
        {rows.length === 0 ? (
          <EmptyRow label="暂无任务" />
        ) : rows.map((row) => (
          <div key={row.type} className="px-4 py-3">
            <div className="flex items-center justify-between gap-3">
              <span className="min-w-0 truncate font-mono text-[12px] font-medium text-[var(--ink)]">{row.type}</span>
              <span className="text-[11px] font-medium tabular-nums text-[var(--ink-muted)]">{row.total}</span>
            </div>
            <div className="mt-2 grid grid-cols-4 gap-1.5">
              {(['queued', 'running', 'succeeded', 'failed'] as JobStatus[]).map((status) => (
                <StatusPill key={status} status={status} count={row[status]} />
              ))}
            </div>
            {(row.oldestQueuedAt || row.nextLeaseExpiresAt) && (
              <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-[var(--ink-muted)]">
                {row.oldestQueuedAt && <span>最早排队 {formatClock(row.oldestQueuedAt)}</span>}
                {row.nextLeaseExpiresAt && <span>Lease {formatClock(row.nextLeaseExpiresAt)}</span>}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

function FailuresPanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
  const failures = snapshot.jobQueue.recentFailures;
  const dbOk = snapshot.database.ok;

  return (
    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
      <PanelHeader title="运行状态" right={dbOk ? 'OK' : 'DB'} />
      <div className="border-b border-[var(--line)] px-4 py-3">
        <div className={`flex items-center gap-2 rounded-md border px-3 py-2 text-[12px] ${dbOk ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700'}`}>
          {dbOk ? <CheckCircle2 className="h-4 w-4" /> : <AlertTriangle className="h-4 w-4" />}
          <span className="min-w-0 truncate">{dbOk ? '数据库可读' : snapshot.database.error || '数据库不可读'}</span>
        </div>
      </div>
      <div className="divide-y divide-[var(--line)]">
        {failures.length === 0 ? (
          <EmptyRow label="暂无失败任务" />
        ) : failures.map((item) => (
          <div key={item.id} className="px-4 py-3 text-[12px]">
            <div className="flex items-center justify-between gap-3">
              <span className="min-w-0 truncate font-mono font-medium text-[var(--ink)]">{item.type}</span>
              <span className="shrink-0 font-mono tabular-nums text-red-600">{item.attempts}/{item.maxAttempts}</span>
            </div>
            <p className="mt-1 line-clamp-2 text-[11px] leading-5 text-[var(--ink-soft)]">{item.lastError || '-'}</p>
            {item.updatedAt && <p className="mt-1 text-[11px] text-[var(--ink-muted)]">{formatClock(item.updatedAt)}</p>}
          </div>
        ))}
      </div>
    </section>
  );
}

function StatusBars({ totals }: { totals: OpsRuntimeSnapshot['jobQueue']['totals'] }) {
  const statuses: JobStatus[] = ['queued', 'running', 'succeeded', 'failed'];
  const total = Math.max(1, totals.total);
  return (
    <div className="space-y-2">
      <div className="flex h-2 overflow-hidden rounded-full bg-[var(--bg-subtle)]">
        {statuses.map((status) => (
          <span
            key={status}
            className={statusBarClass(status)}
            style={{ width: `${(totals[status] / total) * 100}%` }}
          />
        ))}
      </div>
      <div className="grid grid-cols-4 gap-1.5">
        {statuses.map((status) => <StatusPill key={status} status={status} count={totals[status]} />)}
      </div>
    </div>
  );
}

function StatusPill({ status, count }: { status: JobStatus; count: number }) {
  return (
    <div className={`flex items-center justify-between gap-1 rounded-md px-2 py-1 text-[11px] ${statusPillClass(status)}`}>
      <span>{STATUS_LABEL[status]}</span>
      <span className="font-mono tabular-nums">{count}</span>
    </div>
  );
}

function PanelHeader({ title, right }: { title: string; right: string }) {
  return (
    <div className="flex h-10 items-center justify-between border-b border-[var(--line)] px-4">
      <h2 className="text-[13px] font-semibold text-[var(--ink)]">{title}</h2>
      <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{right}</span>
    </div>
  );
}

function EmptyRow({ label }: { label: string }) {
  return <div className="px-4 py-8 text-center text-[12px] text-[var(--ink-muted)]">{label}</div>;
}

function formatClock(value?: string) {
  if (!value) return '-';
  const date = new Date(value);
  if (!Number.isFinite(date.getTime())) return '-';
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
}

function toneClass(tone: string) {
  if (tone === 'blue') return 'bg-blue-50 text-blue-700';
  if (tone === 'amber') return 'bg-amber-50 text-amber-700';
  if (tone === 'red') return 'bg-red-50 text-red-700';
  if (tone === 'emerald') return 'bg-emerald-50 text-emerald-700';
  return 'bg-zinc-100 text-zinc-700';
}

function statusBarClass(status: JobStatus) {
  if (status === 'queued') return 'bg-blue-500';
  if (status === 'running') return 'bg-amber-500';
  if (status === 'succeeded') return 'bg-emerald-500';
  return 'bg-red-500';
}

function statusPillClass(status: JobStatus) {
  if (status === 'queued') return 'bg-blue-50 text-blue-700';
  if (status === 'running') return 'bg-amber-50 text-amber-700';
  if (status === 'succeeded') return 'bg-emerald-50 text-emerald-700';
  return 'bg-red-50 text-red-700';
}