"use client";

import { useEffect, useState, useCallback } from "react";
import {
  getUserGroups,
  createUserGroup,
  updateUserGroup,
  deleteUserGroup,
  UserGroup,
} from "@/lib/api";
import { Users, Plus, Trash2, X, Edit2, RefreshCw, Tag } from "lucide-react";

export function UserGroups() {
  const [groups, setGroups] = useState<UserGroup[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [editingGroup, setEditingGroup] = useState<UserGroup | null>(null);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [handle, setHandle] = useState("");
  const [memberIds, setMemberIds] = useState("");
  const [saving, setSaving] = useState(false);

  const loadGroups = useCallback(() => {
    setLoading(true);
    setError("");
    getUserGroups()
      .then((data) => setGroups(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load user groups:", err);
        setError("Failed to load user groups");
      })
      .finally(() => setLoading(false));
  }, []);

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

  const resetForm = () => {
    setName("");
    setDescription("");
    setHandle("");
    setMemberIds("");
    setEditingGroup(null);
  };

  const openForm = (group?: UserGroup) => {
    if (group) {
      setEditingGroup(group);
      setName(group.name);
      setDescription(group.description || "");
      setHandle(group.handle || "");
      setMemberIds((group.members || []).map((m) => m.id).join(", "));
    } else {
      resetForm();
    }
    setShowForm(true);
  };

  const handleSave = () => {
    if (!name.trim()) return;
    setSaving(true);
    const idsArray = memberIds
      .split(",")
      .map((s) => s.trim())
      .filter(Boolean);
    const payload = {
      name: name.trim(),
      description: description.trim() || undefined,
      handle: handle.trim() || undefined,
      memberIds: idsArray.length > 0 ? idsArray : undefined,
    };

    if (editingGroup) {
      updateUserGroup(editingGroup.id, payload)
        .then((updated) => {
          setGroups((prev) => prev.map((g) => (g.id === updated.id ? updated : g)));
          resetForm();
          setShowForm(false);
        })
        .catch((err) => {
          console.error("Failed to update user group:", err);
          setError("Failed to update group");
        })
        .finally(() => setSaving(false));
    } else {
      createUserGroup(payload)
        .then((newGroup) => {
          setGroups((prev) => [...prev, newGroup]);
          resetForm();
          setShowForm(false);
        })
        .catch((err) => {
          console.error("Failed to create user group:", err);
          setError("Failed to create group");
        })
        .finally(() => setSaving(false));
    }
  };

  const handleDelete = (group: UserGroup) => {
    if (!confirm(`Delete group "${group.name}"?`)) return;
    deleteUserGroup(group.id)
      .then(() => {
        setGroups((prev) => prev.filter((g) => g.id !== group.id));
      })
      .catch((err) => console.error("Failed to delete group:", err));
  };

  return (
    <div className="space-y-3">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h4 className="text-xs font-semibold text-gray-500 uppercase flex items-center gap-1.5">
          <Users size={14} />
          User Groups ({groups.length})
        </h4>
        <button
          onClick={() => openForm()}
          className="p-1 rounded text-gray-400 hover:text-slack-purple hover:bg-gray-100 transition-colors"
        >
          <Plus size={14} />
        </button>
      </div>

      {/* Form */}
      {showForm && (
        <div className="p-3 rounded-lg border border-gray-200 bg-gray-50 space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium text-gray-700">
              {editingGroup ? "Edit Group" : "New Group"}
            </span>
            <button
              onClick={() => {
                resetForm();
                setShowForm(false);
              }}
              className="text-gray-400 hover:text-gray-600"
            >
              <X size={14} />
            </button>
          </div>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Group name"
            className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          <input
            type="text"
            value={handle}
            onChange={(e) => setHandle(e.target.value)}
            placeholder="Handle (e.g. @engineering)"
            className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          <input
            type="text"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Description (optional)"
            className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          <input
            type="text"
            value={memberIds}
            onChange={(e) => setMemberIds(e.target.value)}
            placeholder="Member IDs (comma-separated)"
            className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          {error && <p className="text-xs text-slack-red">{error}</p>}
          <button
            onClick={handleSave}
            disabled={saving || !name.trim()}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-slack-purple text-white text-xs font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            {editingGroup ? <Edit2 size={12} /> : <Plus size={12} />}
            {saving ? "Saving..." : editingGroup ? "Update Group" : "Create Group"}
          </button>
        </div>
      )}

      {/* List */}
      {loading ? (
        <div className="text-xs text-gray-400 animate-pulse">Loading user groups...</div>
      ) : groups.length === 0 ? (
        <p className="text-xs text-gray-400">No user groups yet.</p>
      ) : (
        <div className="space-y-2">
          {groups.map((group) => (
            <div
              key={group.id}
              className="group p-3 rounded-md bg-gray-50 border border-gray-100"
            >
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-1.5">
                    <Tag size={12} className="text-slack-purple" />
                    <span className="text-sm font-medium text-gray-700">
                      {group.name}
                    </span>
                    {group.handle && (
                      <span className="text-xs text-gray-400">{group.handle}</span>
                    )}
                  </div>
                  {group.description && (
                    <p className="text-xs text-gray-500 mt-0.5">{group.description}</p>
                  )}
                  <div className="flex items-center gap-1 text-xs text-gray-400 mt-1">
                    <Users size={10} />
                    {group.member_count ?? group.members?.length ?? 0} members
                  </div>
                </div>
                <div className="flex items-center gap-1 flex-shrink-0">
                  <button
                    onClick={() => openForm(group)}
                    className="text-gray-400 hover:text-slack-purple p-0.5 rounded transition-colors"
                  >
                    <Edit2 size={12} />
                  </button>
                  <button
                    onClick={() => handleDelete(group)}
                    className="text-gray-400 hover:text-slack-red p-0.5 rounded transition-colors"
                  >
                    <Trash2 size={12} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default UserGroups;