Status Page

"use client";
 
import React from "react";
import { motion } from "framer-motion";
import { CheckCircle2, AlertCircle, XCircle, Clock } from "lucide-react";
 
interface ServiceStatus {
  id: string;
  name: string;
  description?: string;
  status: "operational" | "degraded" | "outage" | "maintenance";
  uptime?: string;
}
 
interface Incident {
  id: string;
  title: string;
  status: "investigating" | "identified" | "monitoring" | "resolved";
  severity: "minor" | "major" | "critical";
  timestamp: string;
  updates: {
    message: string;
    timestamp: string;
  }[];
}
 
interface StatusPageProps {
  title?: string;
  description?: string;
  overallStatus?: "operational" | "degraded" | "outage";
  services: ServiceStatus[];
  incidents?: Incident[];
  uptimePercentage?: string;
  className?: string;
}
 
export function StatusPage({
  title = "System Status",
  description = "Current status of all our services",
  overallStatus = "operational",
  services,
  incidents = [],
  uptimePercentage = "99.99",
  className = "",
}: StatusPageProps) {
  const getStatusConfig = (status: ServiceStatus["status"]) => {
    switch (status) {
      case "operational":
        return {
          label: "Operational",
          color: "text-emerald-600 dark:text-emerald-400",
          bg: "bg-emerald-50 dark:bg-emerald-950/30",
          dot: "bg-emerald-500",
          icon: CheckCircle2,
        };
      case "degraded":
        return {
          label: "Degraded Performance",
          color: "text-amber-600 dark:text-amber-400",
          bg: "bg-amber-50 dark:bg-amber-950/30",
          dot: "bg-amber-500",
          icon: AlertCircle,
        };
      case "outage":
        return {
          label: "Major Outage",
          color: "text-red-600 dark:text-red-400",
          bg: "bg-red-50 dark:bg-red-950/30",
          dot: "bg-red-500",
          icon: XCircle,
        };
      case "maintenance":
        return {
          label: "Maintenance",
          color: "text-blue-600 dark:text-blue-400",
          bg: "bg-blue-50 dark:bg-blue-950/30",
          dot: "bg-blue-500",
          icon: Clock,
        };
    }
  };
 
  const overallConfig = getStatusConfig(
    overallStatus === "operational"
      ? "operational"
      : overallStatus === "degraded"
        ? "degraded"
        : "outage",
  );
  const OverallIcon = overallConfig.icon;
 
  return (
    <section className={`w-full py-24 ${className}`}>
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="mb-12 text-center"
        >
          <h2 className="mb-4 text-4xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">
            {title}
          </h2>
          <p className="mx-auto max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
            {description}
          </p>
        </motion.div>
 
        {/* Overall Status Banner */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
          className={`mb-12 overflow-hidden rounded-2xl border p-8 ${overallConfig.bg} ${
            overallStatus === "operational"
              ? "border-emerald-200 dark:border-emerald-800"
              : overallStatus === "degraded"
                ? "border-amber-200 dark:border-amber-800"
                : "border-red-200 dark:border-red-800"
          }`}
        >
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
            <div className="flex items-center gap-4">
              <div
                className={`flex h-12 w-12 items-center justify-center rounded-full ${overallConfig.bg}`}
              >
                <OverallIcon className={`h-6 w-6 ${overallConfig.color}`} />
              </div>
              <div>
                <h3 className={`text-2xl font-bold ${overallConfig.color}`}>
                  {overallConfig.label}
                </h3>
                <p className="text-sm text-zinc-600 dark:text-zinc-400">
                  All systems are running smoothly
                </p>
              </div>
            </div>
            <div className="text-center sm:text-right">
              <div className="text-3xl font-bold text-zinc-900 dark:text-white">
                {uptimePercentage}%
              </div>
              <div className="text-sm text-zinc-600 dark:text-zinc-400">
                Uptime (30 days)
              </div>
            </div>
          </div>
        </motion.div>
 
        {/* Services Status */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
          className="mb-12"
        >
          <h3 className="mb-6 text-xl font-bold text-zinc-900 dark:text-white">
            Services
          </h3>
          <div className="space-y-3">
            {services.map((service, index) => {
              const config = getStatusConfig(service.status);
              const Icon = config.icon;
 
              return (
                <motion.div
                  key={service.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{
                    duration: 0.4,
                    delay: 0.3 + index * 0.05,
                    ease: "easeOut",
                  }}
                  className="flex items-center justify-between rounded-xl border border-zinc-200 bg-white p-4 transition-all hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
                >
                  <div className="flex items-center gap-4">
                    <div
                      className={`flex h-10 w-10 items-center justify-center rounded-lg ${config.bg}`}
                    >
                      <Icon className={`h-5 w-5 ${config.color}`} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-zinc-900 dark:text-white">
                        {service.name}
                      </h4>
                      {service.description && (
                        <p className="text-sm text-zinc-600 dark:text-zinc-400">
                          {service.description}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    {service.uptime && (
                      <span className="hidden text-sm font-medium text-zinc-600 dark:text-zinc-400 sm:block">
                        {service.uptime}
                      </span>
                    )}
                    <span
                      className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-semibold ${config.bg} ${config.color}`}
                    >
                      <span className={`h-2 w-2 rounded-full ${config.dot}`} />
                      {config.label}
                    </span>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
 
        {/* Incidents */}
        {incidents.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
          >
            <h3 className="mb-6 text-xl font-bold text-zinc-900 dark:text-white">
              Recent Incidents
            </h3>
            <div className="space-y-4">
              {incidents.map((incident, index) => (
                <motion.div
                  key={incident.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{
                    duration: 0.4,
                    delay: 0.5 + index * 0.05,
                    ease: "easeOut",
                  }}
                  className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
                >
                  <div className="border-b border-zinc-100 p-6 dark:border-zinc-800">
                    <div className="mb-2 flex items-start justify-between gap-4">
                      <h4 className="text-lg font-bold text-zinc-900 dark:text-white">
                        {incident.title}
                      </h4>
                      <span
                        className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ${
                          incident.severity === "critical"
                            ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
                            : incident.severity === "major"
                              ? "bg-amber-50 text-amber-600 dark:bg-amber-950/30 dark:text-amber-400"
                              : "bg-blue-50 text-blue-600 dark:bg-blue-950/30 dark:text-blue-400"
                        }`}
                      >
                        {incident.severity}
                      </span>
                    </div>
                    <p className="text-sm text-zinc-600 dark:text-zinc-400">
                      {incident.timestamp}
                    </p>
                  </div>
                  <div className="space-y-4 p-6">
                    {incident.updates.map((update, idx) => (
                      <div key={idx} className="flex gap-3 items-start">
                        <div className="">
                          <div className="h-2 w-2 rounded-full bg-zinc-400 dark:bg-zinc-600" />
                        </div>
                        <div className="flex-1 -mt-1.5">
                          <p className=" text-sm text-zinc-900 dark:text-white">
                            {update.message}
                          </p>
                          <p className="text-xs text-zinc-500 dark:text-zinc-500">
                            {update.timestamp}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        )}
 
        {/* Footer */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
          className="mt-12 text-center"
        >
          <p className="text-sm text-zinc-600 dark:text-zinc-400">
            Last updated: {new Date().toLocaleString()}
          </p>
          <a
            href="#"
            className="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
          >
            Subscribe to updates
          </a>
        </motion.div>
      </div>
    </section>
  );
}