'use client';

import clsx from 'clsx';

const SYSTEM_METRICS = [
  {
    id: 'db-latency',
    title: 'Database Latency',
    value: '1.2ms',
    status: 'healthy',
    detail: 'Average query time',
  },
  {
    id: 'cache-hit',
    title: 'Cache Hit Rate',
    value: '94%',
    status: 'healthy',
    detail: 'Redis object cache',
  },
  {
    id: 'api-uptime',
    title: 'API Uptime',
    value: '99.99%',
    status: 'healthy',
    detail: 'Last 30 days',
  },
  {
    id: 'error-rate',
    title: 'Error Rate',
    value: '0.02%',
    status: 'healthy',
    detail: '5xx responses',
  },
  {
    id: 'queue-depth',
    title: 'Job Queue',
    value: '12',
    status: 'warning',
    detail: 'Pending background jobs',
  },
  {
    id: 'storage',
    title: 'Storage Usage',
    value: '45%',
    status: 'healthy',
    detail: 'S3 bucket capacity',
  },
];

export function PerformancePlaybook() {
  return (
    <section className="mt-10 rounded-3xl border border-slate-100 bg-white p-6 shadow-sm">
      <header className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <div>
          <p className="text-xs uppercase tracking-widest text-brand">System Health</p>
          <h3 className="text-2xl font-semibold text-slate-900">Platform Status Monitor</h3>
          <p className="text-sm text-slate-500">Real-time infrastructure telemetry and performance metrics.</p>
        </div>
        <span className="flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
          </span>
          Systems Operational
        </span>
      </header>
      <div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {SYSTEM_METRICS.map((metric) => (
          <div key={metric.id} className="rounded-2xl border border-slate-100 p-4 transition hover:shadow-md">
            <div className="flex items-center justify-between">
              <p className="text-xs uppercase tracking-wide text-slate-400">{metric.title}</p>
              <div className={clsx(
                'h-2 w-2 rounded-full',
                metric.status === 'healthy' ? 'bg-emerald-500' : 'bg-amber-500'
              )} />
            </div>
            <p className="mt-2 text-2xl font-bold text-slate-900">{metric.value}</p>
            <p className="mt-1 text-xs text-slate-500">{metric.detail}</p>
          </div>
        ))}
      </div>
    </section>
  );
}