"use client";

import { useEffect, useState, useCallback } from "react";
import { getBots, createBot, updateBot, deleteBot, Bot } from "@/lib/api";
import { Bot as BotIcon, Trash2, RefreshCw, Plus, X, Power, PowerOff } from "lucide-react";

export function BotManagement() {
  const [bots, setBots] = useState<Bot[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showCreate, setShowCreate] = useState(false);

  // Create form
  const [name, setName] = useState("");
  const [displayName, setDisplayName] = useState("");
  const [description, setDescription] = useState("");
  const [scopes, setScopes] = useState("");

  const loadBots = useCallback(() => {
    setLoading(true);
    setError("");
    getBots()
      .then((data) => setBots(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load bots:", err);
        setError("Failed to load bots");
      })
      .finally(() => setLoading(false));
  }, []);

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

  const handleCreate = () => {
    if (!name.trim()) return;
    const scopeList = scopes
      .split(",")
      .map((s) => s.trim())
      .filter(Boolean);
    createBot({
      name: name.trim(),
      display_name: displayName.trim() || undefined,
      description: description.trim() || undefined,
      scopes: scopeList.length > 0 ? scopeList : undefined,
    })
      .then((newBot) => {
        setBots((prev) => [...prev, newBot]);
        setName("");
        setDisplayName("");
        setDescription("");
        setScopes("");
        setShowCreate(false);
      })
      .catch((err) => {
        console.error("Failed to create bot:", err);
        setError("Failed to create bot");
      });
  };

  const handleToggle = (bot: Bot) => {
    updateBot(bot.id, { enabled: !bot.enabled })
      .then((updated) => {
        setBots((prev) => prev.map((b) => (b.id === bot.id ? updated : b)));
      })
      .catch((err) => console.error("Failed to toggle bot:", err));
  };

  const handleDelete = (bot: Bot) => {
    if (!confirm(`Delete bot "${bot.name}"?`)) return;
    deleteBot(bot.id)
      .then(() => {
        setBots((prev) => prev.filter((b) => b.id !== bot.id));
      })
      .catch((err) => console.error("Failed to delete bot:", err));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center text-gray-400 py-12">
        <RefreshCw size={20} className="animate-pulse" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center text-slack-red py-12 text-sm">
        {error}
        <button onClick={loadBots} className="ml-2 text-slack-purple hover:underline">
          Retry
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-bold text-gray-800 flex items-center gap-2">
            <BotIcon size={20} className="text-slack-purple" />
            Bot Users
          </h2>
          <p className="text-sm text-gray-400 mt-0.5">Manage bot accounts for integrations</p>
        </div>
        <button
          onClick={() => setShowCreate(!showCreate)}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors"
        >
          {showCreate ? <X size={16} /> : <Plus size={16} />}
          {showCreate ? "Cancel" : "New Bot"}
        </button>
      </div>

      {/* Create form */}
      {showCreate && (
        <div className="p-4 rounded-lg border border-gray-200 bg-gray-50 space-y-3">
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">Bot Name</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. my-helper-bot"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">Display Name</label>
            <input
              type="text"
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              placeholder="e.g. Helper Bot"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">Description</label>
            <input
              type="text"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="What does this bot do?"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">
              Scopes (comma-separated)
            </label>
            <input
              type="text"
              value={scopes}
              onChange={(e) => setScopes(e.target.value)}
              placeholder="commands, channels:read, chat:write"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <button
            onClick={handleCreate}
            disabled={!name.trim()}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            <BotIcon size={14} />
            Create Bot
          </button>
        </div>
      )}

      {/* Bots list */}
      {bots.length === 0 && !showCreate ? (
        <div className="flex flex-col items-center justify-center py-16 text-gray-400">
          <BotIcon size={48} className="mb-3 opacity-50" />
          <p className="text-sm">No bots configured.</p>
          <p className="text-xs mt-1">Create a bot to enable API integrations.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {bots.map((bot) => (
            <div
              key={bot.id}
              className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm hover:border-slack-purple/30 transition-colors"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-start gap-3 flex-1 min-w-0">
                  <div className="w-10 h-10 rounded-lg bg-slack-purple/10 flex items-center justify-center flex-shrink-0">
                    <BotIcon size={20} className="text-slack-purple" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold text-gray-800">{bot.display_name || bot.name}</h3>
                      <span
                        className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${
                          bot.enabled
                            ? "bg-slack-green/10 text-slack-green"
                            : "bg-gray-100 text-gray-400"
                        }`}
                      >
                        {bot.enabled ? "Enabled" : "Disabled"}
                      </span>
                    </div>
                    {bot.description && (
                      <p className="text-sm text-gray-500 mt-1">{bot.description}</p>
                    )}
                    {bot.scopes && bot.scopes.length > 0 && (
                      <div className="flex flex-wrap gap-1 mt-2">
                        {bot.scopes.map((scope) => (
                          <span
                            key={scope}
                            className="inline-block text-[10px] px-2 py-0.5 rounded bg-gray-100 text-gray-500"
                          >
                            {scope}
                          </span>
                        ))}
                      </div>
                    )}
                    {bot.channels && bot.channels.length > 0 && (
                      <p className="text-xs text-gray-400 mt-2">
                        Connected to {bot.channels.length} channel(s)
                      </p>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-1 flex-shrink-0">
                  <button
                    onClick={() => handleToggle(bot)}
                    className="p-1.5 rounded text-gray-400 hover:text-slack-green hover:bg-gray-50 transition-colors"
                    title={bot.enabled ? "Disable" : "Enable"}
                  >
                    {bot.enabled ? <Power size={14} /> : <PowerOff size={14} />}
                  </button>
                  <button
                    onClick={() => handleDelete(bot)}
                    className="p-1.5 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-colors"
                    title="Delete bot"
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default BotManagement;