import React, { useCallback, useEffect, useState } from "react";
import { Plug, RefreshCw, ToggleLeft, ToggleRight } from "lucide-react";
import { useToast } from "../ToastContext";
import { get, post, put } from "../api";

const Plugins = () => {
  const [plugins, setPlugins] = useState([]);
  const [loading, setLoading] = useState(true);
  const { addToast } = useToast();

  const fetchPlugins = useCallback(async () => {
    setLoading(true);
    try {
      const data = await get("/api/plugins");
      if (data && data.status === "success" && data.data) {
        const pluginsArray = Object.entries(data.data).map(
          ([name, details]) => ({
            name,
            ...details,
          }),
        );
        pluginsArray.sort((a, b) => a.name.localeCompare(b.name));
        setPlugins(pluginsArray);
      } else {
        addToast("Failed to fetch plugins", "error");
        setPlugins([]);
      }
    } catch (error) {
      addToast(error.message || "Error fetching plugins", "error");
    } finally {
      setLoading(false);
    }
  }, [addToast]);

  useEffect(() => {
    fetchPlugins();
  }, [fetchPlugins]);

  const handleReload = async () => {
    addToast("Reloading plugins...", "info");
    try {
      await put("/api/plugins/reload");
      addToast("Plugins reloaded successfully", "success");
      fetchPlugins();
    } catch (error) {
      addToast(error.message || "Failed to reload plugins", "error");
    }
  };

  const handleToggle = async (pluginName, currentEnabled) => {
    const newEnabled = !currentEnabled;
    try {
      // API expects POST for setting status
      await post(`/api/plugins/${pluginName}`, { enabled: newEnabled });
      addToast(
        `Plugin ${pluginName} ${newEnabled ? "enabled" : "disabled"}.`,
        "success",
      );

      // Optimistic update
      setPlugins((prev) =>
        prev.map((p) =>
          p.name === pluginName ? { ...p, enabled: newEnabled } : p,
        ),
      );
    } catch (error) {
      addToast(
        error.message || `Failed to toggle plugin ${pluginName}`,
        "error",
      );
      fetchPlugins(); // Fetch fresh state to be sure.
    }
  };

  return (
    <div className="container">
      <div
        className="header"
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <h1>Plugin Management</h1>
        <button
          className="action-button secondary"
          onClick={handleReload}
          disabled={loading}
          title="Reload all plugins"
        >
          <RefreshCw
            size={16}
            style={{ marginRight: "5px" }}
            className={loading ? "spin" : ""}
          />{" "}
          Reload Plugins
        </button>
      </div>

      {loading ? (
        <div style={{ textAlign: "center", padding: "20px" }}>
          <RefreshCw
            className="spin"
            style={{ display: "inline-block", marginRight: "10px" }}
          />{" "}
          Loading plugins...
        </div>
      ) : (
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
            gap: "20px",
            marginTop: "20px",
          }}
        >
          {plugins.length === 0 ? (
            <p style={{ color: "#aaa" }}>No plugins installed.</p>
          ) : (
            plugins.map((plugin) => (
              <div
                key={plugin.name}
                style={{
                  background: "var(--container-background-color, #333)",
                  border: "1px solid var(--border-color, #555)",
                  padding: "15px",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    marginBottom: "10px",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "10px",
                    }}
                  >
                    <Plug size={20} />
                    <h3 style={{ margin: 0, fontSize: "1.1em" }}>
                      {plugin.name}
                    </h3>
                  </div>

                  <button
                    onClick={() => handleToggle(plugin.name, plugin.enabled)}
                    style={{
                      background: "none",
                      border: "none",
                      cursor: "pointer",
                      color: plugin.enabled
                        ? "var(--primary-button-background-color)"
                        : "#777",
                    }}
                    title={plugin.enabled ? "Disable" : "Enable"}
                  >
                    {plugin.enabled ? (
                      <ToggleRight size={32} />
                    ) : (
                      <ToggleLeft size={32} />
                    )}
                  </button>
                </div>

                <p
                  style={{
                    margin: "5px 0",
                    color: "#ccc",
                    fontSize: "0.9em",
                    flexGrow: 1,
                  }}
                >
                  {plugin.description || "No description provided."}
                </p>

                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginTop: "15px",
                    fontSize: "0.85em",
                    color: "#888",
                    borderTop: "1px solid var(--border-color, #555)",
                    paddingTop: "10px",
                  }}
                >
                  <span>v{plugin.version || "N/A"}</span>
                  <span>{plugin.author || "Unknown Author"}</span>
                </div>
              </div>
            ))
          )}
        </div>
      )}
    </div>
  );
};

export default Plugins;
