import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Loader2,
  RefreshCw,
  Database,
  CheckCircle,
  XCircle,
  AlertCircle,
  Clock,
  ToggleLeft,
  ToggleRight,
  Play,
  ExternalLink,
  Shield,
  Search,
  Swords,
  Bug,
} from "lucide-react";
import {
  getDataSources,
  updateDataSource,
  syncDataSource,
  syncAllDataSources,
  type DataSource,
  type SyncAllResult,
} from "../api/data-sources";

/** Map source type to visual props. */
function typeProps(type: string) {
  switch (type) {
    case "attack_procedure":
      return { label: "Attack Procedure", color: "text-red-400 bg-red-900/50 border-red-500/30", icon: Swords };
    case "detection_rule":
      return { label: "Detection Rule", color: "text-blue-400 bg-blue-900/50 border-blue-500/30", icon: Shield };
    case "threat_intel":
      return { label: "Threat Intel", color: "text-purple-400 bg-purple-900/50 border-purple-500/30", icon: Search };
    case "defensive_technique":
      return { label: "Defensive", color: "text-green-400 bg-green-900/50 border-green-500/30", icon: Shield };
    default:
      return { label: type, color: "text-gray-400 bg-gray-800/50 border-gray-600/30", icon: Bug };
  }
}

function statusBadge(status: string | null) {
  if (!status) return null;
  switch (status) {
    case "success":
      return (
        <span className="inline-flex items-center gap-1 rounded-full border border-green-500/30 bg-green-900/50 px-2 py-0.5 text-xs font-medium text-green-400">
          <CheckCircle className="h-3 w-3" /> Success
        </span>
      );
    case "error":
      return (
        <span className="inline-flex items-center gap-1 rounded-full border border-red-500/30 bg-red-900/50 px-2 py-0.5 text-xs font-medium text-red-400">
          <XCircle className="h-3 w-3" /> Error
        </span>
      );
    case "in_progress":
      return (
        <span className="inline-flex items-center gap-1 rounded-full border border-yellow-500/30 bg-yellow-900/50 px-2 py-0.5 text-xs font-medium text-yellow-400">
          <Loader2 className="h-3 w-3 animate-spin" /> In Progress
        </span>
      );
    default:
      return (
        <span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400">
          {status}
        </span>
      );
  }
}

export default function DataSourcesPage() {
  const queryClient = useQueryClient();
  const [syncingId, setSyncingId] = useState<string | null>(null);
  const [syncAllResult, setSyncAllResult] = useState<SyncAllResult | null>(null);

  // ── Queries ─────────────────────────────────────────────────────
  const {
    data: sources,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["data-sources"],
    queryFn: getDataSources,
  });

  // ── Toggle enable/disable ───────────────────────────────────────
  const toggleMutation = useMutation({
    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) =>
      updateDataSource(id, { is_enabled: enabled }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["data-sources"] });
    },
  });

  // ── Sync individual source ──────────────────────────────────────
  const syncMutation = useMutation({
    mutationFn: (id: string) => syncDataSource(id),
    onSuccess: () => {
      setSyncingId(null);
      queryClient.invalidateQueries({ queryKey: ["data-sources"] });
    },
    onError: () => {
      setSyncingId(null);
      queryClient.invalidateQueries({ queryKey: ["data-sources"] });
    },
  });

  // ── Sync all ────────────────────────────────────────────────────
  const syncAllMutation = useMutation({
    mutationFn: syncAllDataSources,
    onSuccess: (data) => {
      setSyncAllResult(data);
      queryClient.invalidateQueries({ queryKey: ["data-sources"] });
    },
  });

  const handleSync = (id: string) => {
    setSyncingId(id);
    syncMutation.mutate(id);
  };

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return "Never";
    const date = new Date(dateStr);
    return date.toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" });
  };

  const formatStats = (stats: Record<string, unknown> | null) => {
    if (!stats) return null;
    return Object.entries(stats)
      .filter(([k]) => k !== "error")
      .map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`)
      .join(" | ");
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Data Sources</h1>
          <p className="mt-1 text-sm text-gray-400">
            Manage external data sources for test templates and detection rules
          </p>
        </div>
        <button
          onClick={() => syncAllMutation.mutate()}
          disabled={syncAllMutation.isPending}
          className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
        >
          {syncAllMutation.isPending ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <RefreshCw className="h-4 w-4" />
          )}
          {syncAllMutation.isPending ? "Syncing All..." : "Sync All"}
        </button>
      </div>

      {/* Sync All Result */}
      {syncAllResult && (
        <div className="rounded-xl border border-cyan-500/30 bg-gray-900 p-4">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-semibold text-white">Sync All Results</h3>
            <button
              onClick={() => setSyncAllResult(null)}
              className="text-gray-400 hover:text-white text-xs"
            >
              Dismiss
            </button>
          </div>
          <div className="space-y-2">
            {syncAllResult.results.map((r, i) => (
              <div key={i} className="flex items-center gap-3 text-sm">
                {r.status === "success" ? (
                  <CheckCircle className="h-4 w-4 text-green-400 shrink-0" />
                ) : r.status === "error" ? (
                  <XCircle className="h-4 w-4 text-red-400 shrink-0" />
                ) : (
                  <AlertCircle className="h-4 w-4 text-yellow-400 shrink-0" />
                )}
                <span className="text-gray-300 font-medium">{r.source}</span>
                {r.stats && (
                  <span className="text-gray-500 text-xs">
                    {formatStats(r.stats as Record<string, unknown>)}
                  </span>
                )}
                {r.detail && (
                  <span className="text-gray-500 text-xs">{r.detail}</span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Loading */}
      {isLoading && (
        <div className="flex items-center justify-center py-16">
          <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
          <AlertCircle className="mx-auto h-8 w-8 text-red-400" />
          <p className="mt-2 text-sm text-red-400">
            Failed to load data sources: {(error as Error)?.message}
          </p>
        </div>
      )}

      {/* Data Sources Table */}
      {sources && sources.length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead>
                <tr className="border-b border-gray-800 bg-gray-900/50">
                  <th className="px-4 py-3 font-medium text-gray-400">Source</th>
                  <th className="px-4 py-3 font-medium text-gray-400">Type</th>
                  <th className="px-4 py-3 font-medium text-gray-400">Status</th>
                  <th className="px-4 py-3 font-medium text-gray-400">Last Sync</th>
                  <th className="px-4 py-3 font-medium text-gray-400">Stats</th>
                  <th className="px-4 py-3 font-medium text-gray-400">Enabled</th>
                  <th className="px-4 py-3 font-medium text-gray-400">Actions</th>
                </tr>
              </thead>
              <tbody>
                {sources.map((src: DataSource) => {
                  const tp = typeProps(src.type);
                  const TypeIcon = tp.icon;
                  const isSyncing = syncingId === src.id;

                  return (
                    <tr
                      key={src.id}
                      className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
                    >
                      {/* Source */}
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-3">
                          <div className="rounded-lg bg-gray-800 p-2">
                            <Database className="h-4 w-4 text-cyan-400" />
                          </div>
                          <div>
                            <p className="font-medium text-gray-200">{src.display_name}</p>
                            <div className="flex items-center gap-2">
                              <span className="text-xs text-gray-500 font-mono">{src.name}</span>
                              {src.url && (
                                <a
                                  href={src.url}
                                  target="_blank"
                                  rel="noreferrer"
                                  className="text-gray-500 hover:text-cyan-400"
                                >
                                  <ExternalLink className="h-3 w-3" />
                                </a>
                              )}
                            </div>
                          </div>
                        </div>
                      </td>

                      {/* Type */}
                      <td className="px-4 py-3">
                        <span
                          className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium ${tp.color}`}
                        >
                          <TypeIcon className="h-3 w-3" />
                          {tp.label}
                        </span>
                      </td>

                      {/* Sync Status */}
                      <td className="px-4 py-3">
                        {isSyncing ? statusBadge("in_progress") : statusBadge(src.last_sync_status)}
                      </td>

                      {/* Last Sync */}
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-1.5 text-xs text-gray-400">
                          <Clock className="h-3.5 w-3.5" />
                          {formatDate(src.last_sync_at)}
                        </div>
                        {src.sync_frequency && (
                          <span className="text-[10px] text-gray-600">
                            Frequency: {src.sync_frequency}
                          </span>
                        )}
                      </td>

                      {/* Stats */}
                      <td className="px-4 py-3">
                        {src.last_sync_stats ? (
                          <span className="text-xs text-gray-400">
                            {formatStats(src.last_sync_stats)}
                          </span>
                        ) : (
                          <span className="text-xs text-gray-600">-</span>
                        )}
                      </td>

                      {/* Toggle */}
                      <td className="px-4 py-3">
                        <button
                          onClick={() =>
                            toggleMutation.mutate({
                              id: src.id,
                              enabled: !src.is_enabled,
                            })
                          }
                          disabled={toggleMutation.isPending}
                          className={`flex items-center gap-1 text-xs font-medium transition-colors ${
                            src.is_enabled
                              ? "text-green-400 hover:text-green-300"
                              : "text-gray-500 hover:text-gray-400"
                          }`}
                        >
                          {src.is_enabled ? (
                            <>
                              <ToggleRight className="h-5 w-5" />
                              On
                            </>
                          ) : (
                            <>
                              <ToggleLeft className="h-5 w-5" />
                              Off
                            </>
                          )}
                        </button>
                      </td>

                      {/* Actions */}
                      <td className="px-4 py-3">
                        <button
                          onClick={() => handleSync(src.id)}
                          disabled={isSyncing || !src.is_enabled}
                          className="flex items-center gap-1.5 rounded-lg bg-gray-800 border border-gray-700 px-3 py-1.5 text-xs font-medium text-gray-300 hover:bg-gray-700 hover:text-white disabled:opacity-40 transition-colors"
                        >
                          {isSyncing ? (
                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
                          ) : (
                            <Play className="h-3.5 w-3.5" />
                          )}
                          {isSyncing ? "Syncing..." : "Sync"}
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Empty State */}
      {sources && sources.length === 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-12 text-center">
          <Database className="mx-auto h-12 w-12 text-gray-600" />
          <h3 className="mt-4 text-lg font-medium text-gray-300">No Data Sources</h3>
          <p className="mt-1 text-sm text-gray-500">
            Run the data sources seed script to register initial sources.
          </p>
        </div>
      )}
    </div>
  );
}