import React from "react";
import {
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Clock,
  ShieldCheck,
  Mail,
  ArrowUpRight,
} from "lucide-react";
import { ClientSite } from "../types";

interface StatsBannerProps {
  sites: ClientSite[];
  onFilterByStatus: (status: "all" | "online" | "issue") => void;
  currentFilter: "all" | "online" | "issue";
  onSendSummaryAlert: () => void;
  adminEmail: string;
}

export const StatsBanner: React.FC<StatsBannerProps> = ({
  sites,
  onFilterByStatus,
  currentFilter,
  onSendSummaryAlert,
  adminEmail,
}) => {
  const total = sites.length;
  const onlineCount = sites.filter(
    (s) => s.lastResult?.status === "online",
  ).length;
  const downCount = sites.filter((s) => s.lastResult?.status === "down").length;
  const errorCount = sites.filter(
    (s) => s.lastResult?.status === "error",
  ).length;
  const warningCount = sites.filter(
    (s) => s.lastResult?.status === "warning",
  ).length;
  const unknownCount = sites.filter(
    (s) => s.lastResult?.status === "unknown",
  ).length;
  const uncheckedCount = sites.filter((s) => !s.lastResult).length;
  const totalIssues = downCount + errorCount + warningCount + unknownCount;

  // Calculate average response time of checked sites
  const checkedSitesWithLatency = sites.filter(
    (s) =>
      s.lastResult &&
      s.lastResult.responseTimeMs > 0 &&
      s.lastResult.status === "online",
  );
  const avgLatency =
    checkedSitesWithLatency.length > 0
      ? Math.round(
          checkedSitesWithLatency.reduce(
            (acc, curr) => acc + (curr.lastResult?.responseTimeMs || 0),
            0,
          ) / checkedSitesWithLatency.length,
        )
      : null;

  return (
    <div className="space-y-4">
      {/* Critical Alert Bar if issues exist */}
      {totalIssues > 0 && (
        <div className="bg-red-950/60 border border-red-800/80 rounded-xl p-4 text-red-200 flex flex-col md:flex-row md:items-center md:justify-between gap-3 shadow-lg shadow-red-950/20 animate-in fade-in slide-in-from-top-2">
          <div className="flex items-start space-x-3">
            <div className="p-2 rounded-lg bg-red-600/30 border border-red-500/40 text-red-400 mt-0.5">
              <XCircle className="w-5 h-5 text-red-400" />
            </div>
            <div>
              <h3 className="font-semibold text-white text-sm flex items-center gap-2">
                Perhatian: {totalIssues} Laman Web Mengalami Masalah!
                <span className="text-xs px-2 py-0.5 rounded bg-red-800 text-red-100">
                  {downCount} Down / {errorCount} Ralat / {warningCount} Amaran
                  / {unknownCount} Belum sah
                </span>
              </h3>
              <p className="text-xs text-red-300 mt-0.5">
                Lihat butiran untuk membezakan gangguan, amaran dan semakan yang
                belum dapat disahkan.
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2 self-end md:self-auto">
            <button
              onClick={() => onFilterByStatus("issue")}
              className="text-xs px-3 py-1.5 rounded-lg bg-red-900/60 hover:bg-red-800 border border-red-700 text-red-100 font-medium transition-colors"
            >
              Tapis Web Bermasalah
            </button>
            <button
              onClick={onSendSummaryAlert}
              className="flex items-center space-x-1.5 text-xs px-3.5 py-1.5 rounded-lg bg-red-600 hover:bg-red-500 text-white font-medium transition-colors shadow-sm"
              title={`Hantar ringkasan isu ke ${adminEmail}`}
            >
              <Mail className="w-3.5 h-3.5" />
              <span>Hantar Notis ke Emel</span>
            </button>
          </div>
        </div>
      )}

      {/* Grid of Metric Cards */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
        {/* Total Sites */}
        <div
          onClick={() => onFilterByStatus("all")}
          className={`cursor-pointer rounded-xl p-3.5 border transition-all ${
            currentFilter === "all"
              ? "bg-slate-800 border-blue-500 shadow-md ring-1 ring-blue-500/30"
              : "bg-slate-900/70 border-slate-800 hover:border-slate-700"
          }`}
        >
          <div className="flex items-center justify-between text-slate-400 mb-1">
            <span className="text-xs font-medium uppercase tracking-wider">
              Jumlah Web
            </span>
            <span className="text-xs text-slate-500">Klien</span>
          </div>
          <div className="text-2xl font-bold text-white tracking-tight">
            {total}
          </div>
          <div className="text-[11px] text-slate-400 mt-1 flex items-center justify-between">
            <span>{uncheckedCount} belum disemak</span>
            <span className="text-blue-400">Papar Semua</span>
          </div>
        </div>

        {/* Online Sites */}
        <div
          onClick={() => onFilterByStatus("online")}
          className={`cursor-pointer rounded-xl p-3.5 border transition-all ${
            currentFilter === "online"
              ? "bg-emerald-950/40 border-emerald-500 shadow-md ring-1 ring-emerald-500/30"
              : "bg-slate-900/70 border-slate-800 hover:border-emerald-900/60"
          }`}
        >
          <div className="flex items-center justify-between text-emerald-400 mb-1">
            <span className="text-xs font-medium uppercase tracking-wider">
              Website Sihat
            </span>
            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
          </div>
          <div className="text-2xl font-bold text-emerald-400 tracking-tight">
            {onlineCount}
          </div>
          <div className="text-[11px] text-emerald-500/80 mt-1">
            {total > 0 ? Math.round((onlineCount / total) * 100) : 0}% website
            sihat sekarang
          </div>
        </div>

        {/* Down Sites */}
        <div
          onClick={() => onFilterByStatus("issue")}
          className={`cursor-pointer rounded-xl p-3.5 border transition-all ${
            downCount > 0
              ? "bg-red-950/50 border-red-700 shadow-md"
              : "bg-slate-900/70 border-slate-800 hover:border-slate-700"
          }`}
        >
          <div className="flex items-center justify-between text-red-400 mb-1">
            <span className="text-xs font-medium uppercase tracking-wider">
              Web Down
            </span>
            <XCircle className="w-4 h-4 text-red-400" />
          </div>
          <div className="text-2xl font-bold text-red-400 tracking-tight">
            {downCount}
          </div>
          <div className="text-[11px] text-red-400/80 mt-1">
            {downCount > 0 ? "Tergendala / 500 / Timeout" : "Tiada Web Down"}
          </div>
        </div>

        {/* WP Error Sites */}
        <div
          onClick={() => onFilterByStatus("issue")}
          className={`cursor-pointer rounded-xl p-3.5 border transition-all ${
            errorCount > 0
              ? "bg-amber-950/40 border-amber-700 shadow-md"
              : "bg-slate-900/70 border-slate-800 hover:border-slate-700"
          }`}
        >
          <div className="flex items-center justify-between text-amber-400 mb-1">
            <span className="text-xs font-medium uppercase tracking-wider">
              Ralat WordPress
            </span>
            <AlertTriangle className="w-4 h-4 text-amber-400" />
          </div>
          <div className="text-2xl font-bold text-amber-400 tracking-tight">
            {errorCount}
          </div>
          <div className="text-[11px] text-amber-400/80 mt-1">
            {errorCount > 0 ? "DB / WSOD / Maintenance" : "Tiada Ralat WP"}
          </div>
        </div>

        {/* Avg Latency */}
        <div className="bg-slate-900/70 border border-slate-800 rounded-xl p-3.5 col-span-2 sm:col-span-1">
          <div className="flex items-center justify-between text-slate-400 mb-1">
            <span className="text-xs font-medium uppercase tracking-wider">
              Purata Respon
            </span>
            <Clock className="w-4 h-4 text-cyan-400" />
          </div>
          <div className="text-2xl font-bold text-white tracking-tight">
            {avgLatency !== null ? `${avgLatency} ms` : "—"}
          </div>
          <div className="text-[11px] text-slate-400 mt-1">
            {avgLatency !== null
              ? avgLatency < 500
                ? "🟢 Sangat Pantas"
                : avgLatency < 1200
                  ? "🟡 Kelajuan Sederhana"
                  : "🔴 Respon Perlahan"
              : "Belum disemak"}
          </div>
        </div>
      </div>
    </div>
  );
};