"use client";

import { useEffect, useState, useCallback } from "react";
import { getGuests, inviteGuest, updateGuest, removeGuest, Guest } from "@/lib/api";
import {
  UserPlus, Trash2, RefreshCw, Mail, Users, User as UserIcon, X, Check, Clock,
} from "lucide-react";

export function GuestManagement() {
  const [guests, setGuests] = useState<Guest[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showInvite, setShowInvite] = useState(false);
  const [inviteEmail, setInviteEmail] = useState("");
  const [inviteChannels, setInviteChannels] = useState("");
  const [inviteType, setInviteType] = useState<"single" | "multi">("single");
  const [inviting, setInviting] = useState(false);

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

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

  const handleInvite = () => {
    if (!inviteEmail.trim() || !inviteChannels.trim()) return;
    setInviting(true);
    const channels = inviteChannels.split(",").map((c) => c.trim()).filter(Boolean);
    inviteGuest(inviteEmail.trim(), channels, inviteType)
      .then((newGuest) => {
        setGuests((prev) => [...prev, newGuest]);
        setInviteEmail("");
        setInviteChannels("");
        setShowInvite(false);
      })
      .catch((err) => {
        console.error("Failed to invite guest:", err);
        setError("Failed to invite guest");
      })
      .finally(() => setInviting(false));
  };

  const handleRemove = (guest: Guest) => {
    if (!confirm(`Remove guest ${guest.email}?`)) return;
    removeGuest(guest.id)
      .then(() => {
        setGuests((prev) => prev.filter((g) => g.id !== guest.id));
      })
      .catch((err) => console.error("Failed to remove guest:", err));
  };

  const handleToggleStatus = (guest: Guest) => {
    const newStatus = guest.status === "active" ? "disabled" : "active";
    updateGuest(guest.id, { status: newStatus })
      .then(() => {
        setGuests((prev) =>
          prev.map((g) => (g.id === guest.id ? { ...g, status: newStatus } : g))
        );
      })
      .catch((err) => console.error("Failed to update guest:", err));
  };

  const formatDate = (dateStr?: string) => {
    if (!dateStr) return "—";
    try {
      return new Date(dateStr).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
    } catch {
      return dateStr;
    }
  };

  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={loadGuests} 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">
            <Users size={20} className="text-slack-purple" />
            Guest Accounts
          </h2>
          <p className="text-sm text-gray-400 mt-0.5">
            Manage single-channel and multi-channel guests
          </p>
        </div>
        <button
          onClick={() => setShowInvite(!showInvite)}
          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"
        >
          <UserPlus size={16} />
          <span>Invite Guest</span>
        </button>
      </div>

      {/* Invite form */}
      {showInvite && (
        <div className="p-4 rounded-lg border border-gray-200 bg-gray-50 space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold text-gray-700">Invite New Guest</h3>
            <button onClick={() => setShowInvite(false)} className="text-gray-400 hover:text-gray-600">
              <X size={16} />
            </button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-500 mb-1 block">Email</label>
              <input
                type="email"
                value={inviteEmail}
                onChange={(e) => setInviteEmail(e.target.value)}
                placeholder="guest@example.com"
                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">
                Channel IDs (comma-separated)
              </label>
              <input
                type="text"
                value={inviteChannels}
                onChange={(e) => setInviteChannels(e.target.value)}
                placeholder="channel-id-1, channel-id-2"
                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>
          <div>
            <label className="text-xs font-medium text-gray-500 mb-1 block">Guest Type</label>
            <div className="flex gap-2">
              <button
                onClick={() => setInviteType("single")}
                className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
                  inviteType === "single" ? "bg-slack-purple text-white" : "bg-white text-gray-600 border border-gray-300"
                }`}
              >
                <UserIcon size={12} className="inline mr-1" />
                Single-Channel
              </button>
              <button
                onClick={() => setInviteType("multi")}
                className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
                  inviteType === "multi" ? "bg-slack-purple text-white" : "bg-white text-gray-600 border border-gray-300"
                }`}
              >
                <Users size={12} className="inline mr-1" />
                Multi-Channel
              </button>
            </div>
          </div>
          <button
            onClick={handleInvite}
            disabled={inviting || !inviteEmail.trim() || !inviteChannels.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"
          >
            {inviting ? <RefreshCw size={14} className="animate-pulse" /> : <Mail size={14} />}
            Send Invitation
          </button>
        </div>
      )}

      {/* Guests table */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-4 py-2 text-left font-semibold text-gray-600">Guest</th>
                <th className="px-4 py-2 text-left font-semibold text-gray-600">Type</th>
                <th className="px-4 py-2 text-left font-semibold text-gray-600">Channels</th>
                <th className="px-4 py-2 text-left font-semibold text-gray-600">Status</th>
                <th className="px-4 py-2 text-left font-semibold text-gray-600">Invited</th>
                <th className="px-4 py-2 text-left font-semibold text-gray-600">Last Active</th>
                <th className="px-4 py-2 text-right font-semibold text-gray-600">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {guests.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-4 py-8 text-center text-gray-400">
                    No guests invited yet.
                  </td>
                </tr>
              ) : (
                guests.map((guest) => {
                  const displayName = guest.display_name || guest.displayName || guest.name || guest.email;
                  const isSuspended = guest.status === "disabled";
                  return (
                    <tr key={guest.id} className="hover:bg-gray-50">
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-2">
                          <div className="w-8 h-8 rounded-full bg-slack-blue text-white flex items-center justify-center text-xs font-bold">
                            {displayName[0]?.toUpperCase() || "G"}
                          </div>
                          <div>
                            <p className="font-medium text-gray-800">{displayName}</p>
                            <p className="text-xs text-gray-400">{guest.email}</p>
                          </div>
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 capitalize">
                          {guest.type}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-gray-500 text-xs">
                        {guest.channels?.length || 0}
                      </td>
                      <td className="px-4 py-3">
                        {isSuspended ? (
                          <span className="inline-flex items-center gap-1 text-xs font-medium text-slack-red">
                            <X size={12} /> Disabled
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 text-xs font-medium text-slack-green">
                            <Check size={12} /> Active
                          </span>
                        )}
                      </td>
                      <td className="px-4 py-3 text-gray-500 text-xs">{formatDate(guest.invited_at)}</td>
                      <td className="px-4 py-3 text-gray-500 text-xs">{formatDate(guest.last_active)}</td>
                      <td className="px-4 py-3 text-right">
                        <button
                          onClick={() => handleToggleStatus(guest)}
                          className="px-2 py-1 text-xs text-gray-500 hover:text-slack-purple rounded transition-colors mr-1"
                        >
                          {isSuspended ? "Enable" : "Disable"}
                        </button>
                        <button
                          onClick={() => handleRemove(guest)}
                          className="p-1.5 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-colors"
                          title="Remove guest"
                        >
                          <Trash2 size={14} />
                        </button>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default GuestManagement;