'use client';

import { useEffect, useState } from 'react';
import { monitoringService, type Alert } from '@/services/monitoring.service';
import {
  RefreshCw,
  Search,
  ShieldAlert,
  CheckCircle2,
  ShieldCheck,
} from 'lucide-react';

type AlertSeverityFilter = '' | 'critical' | 'warning' | 'info';

export default function SuperAdminSecurityPage() {
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState('');
  const [severityFilter, setSeverityFilter] = useState<AlertSeverityFilter>('');
  const [resolving, setResolving] = useState<string | null>(null);
  const [resolveDialog, setResolveDialog] = useState<{
    open: boolean;
    alert: Alert | null;
    reason: string;
  }>({ open: false, alert: null, reason: '' });

  useEffect(() => {
    loadAlerts();
  }, [severityFilter]);

  const loadAlerts = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await monitoringService.getActiveAlerts();
      setAlerts(res || []);
    } catch (err: any) {
      setError(err?.message || 'Failed to load security alerts');
    } finally {
      setLoading(false);
    }
  };

  const handleResolve = async () => {
    if (!resolveDialog.alert) return;
    setResolving(resolveDialog.alert.id);
    setError(null);
    try {
      await monitoringService.resolveAlert(resolveDialog.alert.id, resolveDialog.reason);
      setAlerts((prev) => prev.filter((a) => a.id !== resolveDialog.alert?.id));
    } catch (err: any) {
      setError(err?.message || 'Failed to resolve alert');
    } finally {
      setResolving(null);
      setResolveDialog((prev) => ({ ...prev, open: false }));
    }
  };

  const filteredAlerts = alerts.filter((alert) => {
    if (severityFilter && alert.severity !== severityFilter) return false;
    if (search) {
      const q = search.toLowerCase();
      return (
        alert.name.toLowerCase().includes(q) ||
        alert.description.toLowerCase().includes(q) ||
        alert.ruleId.toLowerCase().includes(q)
      );
    }
    return true;
  });

  const severityCounts = alerts.reduce(
    (acc, alert) => {
      acc[alert.severity] = (acc[alert.severity] || 0) + 1;
      return acc;
    },
    {} as Record<string, number>,
  );

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-white">Security & Alerts</h1>
          <p className="text-sm text-slate-400">Monitor security alerts and resolve critical issues.</p>
        </div>
        <button
          onClick={loadAlerts}
          className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-400 hover:bg-white/5"
        >
          <RefreshCw className="h-4 w-4" /> Refresh
        </button>
      </div>

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        {(
          [
            ['Critical', severityCounts.critical || 0, 'text-rose-400'],
            ['Warning', severityCounts.warning || 0, 'text-amber-400'],
            ['Info', severityCounts.info || 0, 'text-sky-400'],
          ] as const
        ).map(([label, count, color]) => (
          <div key={label} className="rounded-xl border border-white/5 bg-slate-900/50 p-4">
            <div className="text-xs font-medium text-slate-400">{label}</div>
            <div className={`mt-2 text-2xl font-bold ${color}`}>{count}</div>
          </div>
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <div className="relative flex-1 min-w-[200px] max-w-md">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <input
            type="text"
            placeholder="Search alerts..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-4 py-2 text-sm text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none"
          />
        </div>
        <select
          value={severityFilter}
          onChange={(e) => setSeverityFilter(e.target.value as AlertSeverityFilter)}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
        >
          <option value="">All Severities</option>
          <option value="critical">Critical</option>
          <option value="warning">Warning</option>
          <option value="info">Info</option>
        </select>
      </div>

      {error && (
        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</div>
      )}

      {loading ? (
        <div className="text-center text-slate-400">Loading security alerts...</div>
      ) : (
        <div className="overflow-x-auto rounded-xl border border-white/10">
          <table className="w-full text-left text-sm">
            <thead className="bg-white/5 text-xs uppercase text-slate-400">
              <tr>
                <th className="px-4 py-3">Severity</th>
                <th className="px-4 py-3">Alert</th>
                <th className="px-4 py-3">Description</th>
                <th className="px-4 py-3">Rule ID</th>
                <th className="px-4 py-3">Triggered</th>
                <th className="px-4 py-3 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5">
              {filteredAlerts.map((alert) => (
                <tr key={alert.id} className="hover:bg-white/5">
                  <td className="px-4 py-3">
                    <span
                      className={`rounded-full px-2 py-1 text-xs font-medium ${
                        alert.severity === 'critical'
                          ? 'bg-rose-500/10 text-rose-400'
                          : alert.severity === 'warning'
                            ? 'bg-amber-500/10 text-amber-400'
                            : 'bg-sky-500/10 text-sky-400'
                      }`}
                    >
                      {alert.severity}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-white">
                    <div className="flex items-center gap-2">
                      <ShieldAlert className="h-4 w-4 text-slate-500" />
                      <span className="font-medium">{alert.name}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-slate-300">{alert.description}</td>
                  <td className="px-4 py-3 font-mono text-xs text-slate-300">{alert.ruleId}</td>
                  <td className="px-4 py-3 text-slate-400">{new Date(alert.triggeredAt).toLocaleString()}</td>
                  <td className="px-4 py-3 text-right">
                    <button
                      onClick={() => setResolveDialog({ open: true, alert, reason: '' })}
                      disabled={resolving === alert.id}
                      className="flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
                    >
                      <ShieldCheck className="h-3.5 w-3.5" /> Resolve
                    </button>
                  </td>
                </tr>
              ))}
              {filteredAlerts.length === 0 && (
                <tr>
                  <td colSpan={6} className="px-4 py-8 text-center text-slate-400">
                    No security alerts found.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      )}

      {resolveDialog.open && resolveDialog.alert && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
            <div className="flex items-center gap-2">
              <ShieldCheck className="h-5 w-5 text-emerald-400" />
              <h3 className="text-lg font-semibold text-white">Resolve Alert</h3>
            </div>
            <p className="mt-2 text-sm text-slate-400">
              You are about to mark <span className="font-medium text-white">{resolveDialog.alert.name}</span> as
              resolved. Please provide a reason.
            </p>
            <div className="mt-4">
              <label className="block text-xs font-medium text-slate-300">Reason for resolution</label>
              <select
                value={resolveDialog.reason}
                onChange={(e) =>
                  setResolveDialog((prev) => ({ ...prev, reason: e.target.value }))
                }
                className="mt-1 w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
              >
                <option value="">Select a reason</option>
                <option value="Issue resolved">Issue resolved</option>
                <option value="False positive">False positive</option>
                <option value="Maintenance">Maintenance</option>
                <option value="Acknowledged">Acknowledged</option>
              </select>
            </div>
            <div className="mt-6 flex items-center justify-end gap-2">
              <button
                onClick={() => setResolveDialog((prev) => ({ ...prev, open: false }))}
                className="rounded-lg border border-white/10 px-4 py-2 text-sm text-slate-300 hover:bg-white/5"
              >
                Cancel
              </button>
              <button
                onClick={handleResolve}
                disabled={!resolveDialog.reason || resolving === resolveDialog.alert?.id}
                className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
              >
                {resolving === resolveDialog.alert?.id ? 'Resolving...' : 'Resolve'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}