"use client";

import { useState, useEffect, useCallback } from "react";
import { motion } from "motion/react";
import { RefreshCw, Clock, CheckCircle, AlertCircle, AlertTriangle, Wifi, Activity, Server, Pause } from "lucide-react";
import { cn } from "@/lib/utils";

type UptimeStatus = "UP" | "DOWN" | "LOOKS_DOWN" | "PAUSED" | "STARTED";
type StatusColor  = "emerald" | "orange" | "red" | "zinc";

const statusMap: Record<string, { color: StatusColor; label: string }> = {
  UP:         { color: "emerald", label: "Operational" },
  DOWN:       { color: "red",     label: "Down"        },
  LOOKS_DOWN: { color: "orange",  label: "Degraded"    },
  PAUSED:     { color: "zinc",    label: "Paused"      },
  STARTED:    { color: "zinc",    label: "Checking…"   },
};

const dotColor: Record<StatusColor, string> = {
  emerald: "bg-emerald-500",
  orange:  "bg-orange-500",
  red:     "bg-red-500",
  zinc:    "bg-zinc-500",
};

const textColor: Record<StatusColor, string> = {
  emerald: "text-emerald-400",
  orange:  "text-orange-400",
  red:     "text-red-400",
  zinc:    "text-content-muted",
};

const typeLabel: Record<string, string> = {
  HTTP: "HTTP(s)", KEYWORD: "Keyword", PING: "Ping", PORT: "Port", HEARTBEAT: "Heartbeat",
};

function getOverall(monitors: any[]): StatusColor {
  if (!monitors.length) return "zinc";
  if (monitors.some((m) => m.status === "DOWN"))       return "red";
  if (monitors.some((m) => m.status === "LOOKS_DOWN")) return "orange";
  return "emerald";
}

function formatDuration(seconds: number): string {
  if (!seconds || seconds < 60) return `${seconds ?? 0}s`;
  const m = Math.floor(seconds / 60);
  if (m < 60) return `${m}m`;
  const h = Math.floor(m / 60);
  const rem = m % 60;
  return rem > 0 ? `${h}h ${rem}m` : `${h}h`;
}

function formatRelative(iso: string): string {
  if (!iso) return "—";
  const diff = Date.now() - new Date(iso).getTime();
  const m = Math.floor(diff / 60_000);
  if (m < 1)  return "just now";
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

export default function StatusPage() {
  const [monitors, setMonitors]         = useState<any[]>([]);
  const [incidents, setIncidents]       = useState<any[]>([]);
  const [loading, setLoading]           = useState(true);
  const [lastUpdated, setLastUpdated]   = useState("");
  const [isRefreshing, setIsRefreshing] = useState(false);

  const fetchStatus = useCallback(async (bust = false) => {
    try {
      const res  = await fetch(`/api/uptime${bust ? "?refresh=true" : ""}`);
      const data = await res.json();
      setMonitors(data.monitors ?? []);
      setIncidents(data.incidents ?? []);
      setLastUpdated(new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }));
    } catch {
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchStatus();
    const id = setInterval(() => fetchStatus(), 60_000);
    return () => clearInterval(id);
  }, [fetchStatus]);

  const handleRefresh = async () => {
    setIsRefreshing(true);
    setLoading(true);
    await fetchStatus(true);
    setTimeout(() => setIsRefreshing(false), 600);
  };

  const overall     = loading && !monitors.length ? "zinc" : getOverall(monitors);
  const overallInfo = overall === "emerald"
    ? { label: "All Systems Operational", Icon: CheckCircle }
    : overall === "orange"
    ? { label: "Partial Degradation",     Icon: AlertCircle }
    : overall === "red"
    ? { label: "Service Disruption",      Icon: AlertTriangle }
    : { label: loading ? "Checking…" : "No Services Found", Icon: Clock };

  const activeIncidents   = incidents.filter((i) => !i.resolvedAt);
  const resolvedIncidents = incidents.filter((i) => !!i.resolvedAt);

  return (
    <main className="min-h-screen bg-base text-white font-sans selection:bg-accent-hover/30">
      <div className="relative w-full max-w-3xl mx-auto px-6 pb-24">

        <motion.section
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
          className="pt-36 pb-14"
        >
          <div className="flex items-center gap-3 mb-6">
            <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
            <p className="text-xs font-bold text-accent-text uppercase tracking-widest">System Status</p>
            <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
          </div>

          <h1 className="text-5xl md:text-6xl font-semibold tracking-tight text-white leading-[1.05] mb-5">
            All systems <span className="text-accent-text">monitored.</span>
          </h1>

          <p className="text-content-dim text-lg max-w-md leading-relaxed mb-10">
            Real-time uptime monitoring across all infrastructure and services.
          </p>

          <div className="flex items-center justify-between gap-4 flex-wrap">
            <div className="flex items-center gap-2.5">
              {loading && !monitors.length ? (
                <span className="w-2 h-2 rounded-full bg-zinc-600 animate-pulse" />
              ) : (
                <span className={cn("w-2 h-2 rounded-full", dotColor[overall], overall === "emerald" && "shadow-[0_0_6px_1px] shadow-emerald-500/40")} />
              )}
              <span className={cn("text-sm font-semibold", textColor[overall])}>
                {overallInfo.label}
              </span>
              {!loading && monitors.length > 0 && (
                <span className="text-xs text-content-subtle">
                  · {monitors.length} service{monitors.length !== 1 ? "s" : ""}
                </span>
              )}
            </div>

            <div className="flex items-center gap-3">
              {lastUpdated && (
                <span className="text-xs text-content-subtle hidden sm:flex items-center gap-1.5">
                  <Clock className="w-3 h-3" />
                  {lastUpdated}
                </span>
              )}
              <button
                onClick={handleRefresh}
                disabled={isRefreshing || loading}
                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-surface border border-border/80 hover:border-border-hover text-content-dim hover:text-white transition-all duration-200 disabled:opacity-40"
              >
                <RefreshCw className={cn("w-3.5 h-3.5", (isRefreshing || loading) && "animate-spin")} />
                Refresh
              </button>
            </div>
          </div>
        </motion.section>

        <div className="h-px bg-border/60" />

        {!loading && incidents.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.35, delay: 0.1 }}
            className="pt-10 pb-2"
          >
            <p className="text-[10px] font-bold text-content-subtle uppercase tracking-widest mb-5">Incidents</p>

            <div className="space-y-4">
              {activeIncidents.map((inc, idx) => (
                <div key={inc.id ?? idx} className="flex items-start gap-4 pl-4 border-l-2 border-orange-500/60">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap mb-0.5">
                      <p className="text-sm font-semibold text-white">{inc.monitorName}</p>
                      <span className="text-[10px] font-bold text-orange-400 uppercase tracking-wide">Ongoing</span>
                    </div>
                    {inc.reason && <p className="text-xs text-content-muted leading-relaxed">{inc.reason}</p>}
                  </div>
                  <div className="text-right shrink-0">
                    <p className="text-xs text-content-subtle">{formatRelative(inc.startedAt)}</p>
                  </div>
                </div>
              ))}

              {resolvedIncidents.map((inc, idx) => (
                <div key={inc.id ?? idx} className="flex items-start gap-4 pl-4 border-l-2 border-border/60">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap mb-0.5">
                      <p className="text-sm font-medium text-content-dim">{inc.monitorName}</p>
                      <span className="text-[10px] font-bold text-content-subtle uppercase tracking-wide">Resolved</span>
                      {inc.duration != null && (
                        <span className="text-[10px] text-content-faint font-mono">{formatDuration(inc.duration)}</span>
                      )}
                    </div>
                    {inc.reason && <p className="text-xs text-content-subtle leading-relaxed">{inc.reason}</p>}
                  </div>
                  <div className="text-right shrink-0">
                    <p className="text-xs text-content-subtle">{formatRelative(inc.resolvedAt)}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-10 h-px bg-border/60" />
          </motion.div>
        )}

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.35, delay: 0.15 }}
          className="pt-10"
        >
          <p className="text-[10px] font-bold text-content-subtle uppercase tracking-widest mb-2">Services</p>

          <div className="divide-y divide-border/40">
            {loading && !monitors.length ? (
              [1, 2, 3, 4, 5].map((i) => (
                <div key={i} className="flex items-center justify-between py-4 gap-4">
                  <div className="flex items-center gap-3">
                    <span className="w-1.5 h-1.5 rounded-full bg-zinc-700 shrink-0 animate-pulse" />
                    <div className="space-y-1.5">
                      <div className="h-3.5 w-36 bg-zinc-800 rounded animate-pulse" />
                      <div className="h-2.5 w-16 bg-zinc-900 rounded animate-pulse" />
                    </div>
                  </div>
                  <div className="h-3 w-20 bg-zinc-800 rounded animate-pulse" />
                </div>
              ))
            ) : monitors.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-20 text-center">
                <Wifi className="w-6 h-6 text-content-faint mb-3" />
                <p className="text-content-muted text-sm">No monitors configured.</p>
              </div>
            ) : (
              monitors.map((m, idx) => {
                const s    = statusMap[m.status as UptimeStatus] ?? { color: "zinc" as StatusColor, label: "Unknown" };
                const Icon = m.type === "PING" ? Activity : m.status === "PAUSED" ? Pause : Server;

                return (
                  <motion.div
                    key={m.id ?? idx}
                    initial={{ opacity: 0, y: 6 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.3, delay: idx * 0.035 }}
                    className="flex items-center justify-between py-4 gap-4 group"
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      <span className={cn("w-1.5 h-1.5 rounded-full shrink-0", dotColor[s.color])} />
                      <div className="min-w-0">
                        <div className="flex items-center gap-2">
                          <p className="text-sm font-medium text-white truncate">{m.name ?? "Unknown"}</p>
                          <Icon className="w-3 h-3 text-content-faint shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                        </div>
                        <p className="text-[10px] text-content-faint uppercase tracking-widest">
                          {typeLabel[m.type] ?? "Endpoint"}
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center gap-5 shrink-0">
                      {m.uptime != null && (
                        <span className="text-xs font-mono text-content-subtle hidden sm:block">
                          {parseFloat(m.uptime).toFixed(2)}%
                        </span>
                      )}
                      <span className={cn("text-xs font-semibold", textColor[s.color])}>
                        {s.label}
                      </span>
                    </div>
                  </motion.div>
                );
              })
            )}
          </div>
        </motion.div>

      </div>
    </main>
  );
}