"use client";

import { useEffect, useState, useCallback } from "react";
import {
  getInformationBarriers,
  createInformationBarrier,
  deleteInformationBarrier,
  InformationBarrier,
} from "@/lib/api";
import { ShieldBan, RefreshCw, Plus, X, Trash2, Users, ArrowLeftRight } from "lucide-react";

export function InformationBarriers() {
  const [barriers, setBarriers] = useState<InformationBarrier[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showCreate, setShowCreate] = useState(false);

  // Create form
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [groupA, setGroupA] = useState("");
  const [groupB, setGroupB] = useState("");

  const loadBarriers = useCallback(() => {
    setLoading(true);
    setError("");
    getInformationBarriers()
      .then((data) => setBarriers(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load information barriers:", err);
        setError("Failed to load information barriers");
      })
      .finally(() => setLoading(false));
  }, []);

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

  const handleCreate = () => {
    if (!name.trim() || !groupA.trim() || !groupB.trim()) return;
    const groupAList = groupA.split(",").map((g) => g.trim()).filter(Boolean);
    const groupBList = groupB.split(",").map((g) => g.trim()).filter(Boolean);
    createInformationBarrier({
      name: name.trim(),
      description: description.trim() || undefined,
      group_a: groupAList,
      group_b: groupBList,
    })
      .then((newBarrier) => {
        setBarriers((prev) => [...prev, newBarrier]);
        setName("");
        setDescription("");
        setGroupA("");
        setGroupB("");
        setShowCreate(false);
      })
      .catch((err) => {
        console.error("Failed to create information barrier:", err);
        setError("Failed to create information barrier");
      });
  };

  const handleDelete = (barrier: InformationBarrier) => {
    if (!confirm(`Delete barrier "${barrier.name}"?`)) return;
    deleteInformationBarrier(barrier.id)
      .then(() => {
        setBarriers((prev) => prev.filter((b) => b.id !== barrier.id));
      })
      .catch((err) => console.error("Failed to delete barrier:", 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={loadBarriers} 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>
          <h3 className="text-sm font-semibold text-gray-800 flex items-center gap-2">
            <ShieldBan size={18} className="text-slack-purple" />
            Information Barriers
          </h3>
          <p className="text-xs text-gray-400 mt-0.5">
            Restrict communication between groups for compliance
          </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 Barrier"}
        </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">Barrier Name</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Trading vs Research separation"
              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="Why is this barrier needed?"
              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 className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-500 mb-1 block">
                Group A (user IDs, comma-separated)
              </label>
              <input
                type="text"
                value={groupA}
                onChange={(e) => setGroupA(e.target.value)}
                placeholder="user1, user2"
                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">
                Group B (user IDs, comma-separated)
              </label>
              <input
                type="text"
                value={groupB}
                onChange={(e) => setGroupB(e.target.value)}
                placeholder="user3, user4"
                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>
          <button
            onClick={handleCreate}
            disabled={!name.trim() || !groupA.trim() || !groupB.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"
          >
            <ShieldBan size={14} />
            Create Barrier
          </button>
        </div>
      )}

      {/* Barriers list */}
      {barriers.length === 0 && !showCreate ? (
        <div className="flex flex-col items-center justify-center py-12 text-gray-400">
          <ShieldBan size={40} className="mb-3 opacity-50" />
          <p className="text-sm">No information barriers configured.</p>
          <p className="text-xs mt-1">Create a barrier to restrict communication between groups.</p>
        </div>
      ) : (
        <div className="space-y-2">
          {barriers.map((barrier) => (
            <div
              key={barrier.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-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <h4 className="text-sm font-semibold text-gray-800">{barrier.name}</h4>
                    <span
                      className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${
                        barrier.enabled
                          ? "bg-slack-green/10 text-slack-green"
                          : "bg-gray-100 text-gray-400"
                      }`}
                    >
                      {barrier.enabled ? "Active" : "Disabled"}
                    </span>
                  </div>
                  {barrier.description && (
                    <p className="text-xs text-gray-500 mt-1">{barrier.description}</p>
                  )}
                  <div className="flex items-center gap-3 mt-2">
                    <div className="flex items-center gap-1">
                      <Users size={12} className="text-gray-400" />
                      <span className="text-xs text-gray-600">
                        Group A: {barrier.group_a.length} user(s)
                      </span>
                    </div>
                    <ArrowLeftRight size={12} className="text-gray-300" />
                    <div className="flex items-center gap-1">
                      <Users size={12} className="text-gray-400" />
                      <span className="text-xs text-gray-600">
                        Group B: {barrier.group_b.length} user(s)
                      </span>
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => handleDelete(barrier)}
                  className="p-1.5 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-colors"
                  title="Delete barrier"
                >
                  <Trash2 size={14} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default InformationBarriers;