"use client";

import { useState, useEffect, useCallback } from "react";
import { useAuth } from "@/lib/AuthContext";
import { useRouter } from "next/navigation";
import {
  Lock,
  Users,
  Plus,
  X,
  Crown,
  Loader2,
  ChevronRight,
} from "lucide-react";
import ErrorFeedback from "@/components/ErrorFeedback";

interface GroupMember {
  id: string;
  userId: string;
  role: "owner" | "admin" | "member";
  user: {
    id: string;
    name: string;
    isPremium: boolean;
    isPro: boolean;
  };
}

interface Group {
  id: string;
  name: string;
  description?: string;
  inviteCode: string;
  createdAt: string;
  ownerId: string;
  owner: {
    id: string;
    name: string;
    isPremium: boolean;
    isPro: boolean;
  };
  members: GroupMember[];
  _count: {
    members: number;
    threads: number;
  };
}

export default function GroupsPage() {
  const { user, token, loading } = useAuth();
  const router = useRouter();

  const [groups, setGroups] = useState<Group[]>([]);
  const [loadingData, setLoadingData] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Create group modal
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [createName, setCreateName] = useState("");
  const [createDescription, setCreateDescription] = useState("");
  const [creating, setCreating] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);

  // Join group modal
  const [showJoinModal, setShowJoinModal] = useState(false);
  const [joinCode, setJoinCode] = useState("");
  const [joining, setJoining] = useState(false);
  const [joinError, setJoinError] = useState<string | null>(null);
  const [joinSuccess, setJoinSuccess] = useState<string | null>(null);

  const canCreateGroup = user?.isPremium || user?.isPro;

  const fetchGroups = useCallback(async () => {
    setLoadingData(true);
    setError(null);
    try {
      const res = await fetch("/mobile/api/groups", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      const data = await res.json();
      if (res.ok) {
        setGroups(data.groups || []);
      } else {
        setError(data.error || "Failed to load groups");
      }
    } catch {
      setError("Network error. Please try again.");
    } finally {
      setLoadingData(false);
    }
  }, [token]);

  useEffect(() => {
    if (!loading && !token) {
      router.push("/auth");
      return;
    }
  }, [loading, token, router]);

  useEffect(() => {
    if (token) {
      fetchGroups();
    }
  }, [token, fetchGroups]);

  const handleCreateGroup = async (e: React.FormEvent) => {
    e.preventDefault();
    setCreateError(null);
    setCreating(true);

    try {
      const res = await fetch("/mobile/api/groups", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          name: createName.trim(),
          description: createDescription.trim() || undefined,
        }),
      });

      const data = await res.json();
      if (res.ok) {
        setShowCreateModal(false);
        setCreateName("");
        setCreateDescription("");
        fetchGroups();
      } else {
        setCreateError(data.error || "Failed to create group");
      }
    } catch {
      setCreateError("Network error. Please try again.");
    } finally {
      setCreating(false);
    }
  };

  const handleJoinGroup = async (e: React.FormEvent) => {
    e.preventDefault();
    setJoinError(null);
    setJoinSuccess(null);
    setJoining(true);

    try {
      const res = await fetch("/mobile/api/groups/join", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          inviteCode: joinCode.trim(),
        }),
      });

      const data = await res.json();
      if (res.ok) {
        setJoinSuccess("Joined group successfully!");
        setJoinCode("");
        setTimeout(() => {
          setShowJoinModal(false);
          setJoinSuccess(null);
          fetchGroups();
        }, 1200);
      } else {
        setJoinError(data.error || "Failed to join group");
      }
    } catch {
      setJoinError("Network error. Please try again.");
    } finally {
      setJoining(false);
    }
  };

  function timeAgo(dateStr: string): string {
    const now = Date.now();
    const then = new Date(dateStr).getTime();
    const diffSec = Math.floor((now - then) / 1000);
    if (diffSec < 60) return "just now";
    const diffMin = Math.floor(diffSec / 60);
    if (diffMin < 60) return `${diffMin}m ago`;
    const diffHr = Math.floor(diffMin / 60);
    if (diffHr < 24) return `${diffHr}h ago`;
    const diffDay = Math.floor(diffHr / 24);
    if (diffDay < 7) return `${diffDay}d ago`;
    return new Date(dateStr).toLocaleDateString();
  }

  if (loading) {
    return (
      <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
        <div className="w-8 h-8 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
      </div>
    );
  }

  if (!user) return null;

  return (
    <div className="min-h-dvh bg-[#0a0a0f] pb-28">
      {/* Header */}
      <div className="px-4 pt-6 pb-4">
        <div className="flex items-center justify-between mb-1">
          <div className="flex items-center gap-2">
            <div className="w-9 h-9 rounded-xl bg-[#D4AF37]/15 flex items-center justify-center">
              <Users size={18} className="text-[#D4AF37]" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-white">Groups</h1>
              <p className="text-xs text-gray-500">Private forum groups</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={() => {
                setJoinCode("");
                setJoinError(null);
                setJoinSuccess(null);
                setShowJoinModal(true);
              }}
              className="flex items-center gap-1.5 bg-gray-800/40 border border-gray-700/60 rounded-xl px-3 py-3 active:bg-gray-700/60 transition"
            >
              <span className="text-xs font-medium text-gray-300">Join</span>
            </button>
            {canCreateGroup && (
              <button
                onClick={() => {
                  setCreateName("");
                  setCreateDescription("");
                  setCreateError(null);
                  setShowCreateModal(true);
                }}
                className="flex items-center gap-1.5 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-3 py-3 active:bg-[#D4AF37]/25 transition"
              >
                <Plus size={14} className="text-[#D4AF37]" />
                <span className="text-xs font-medium text-[#D4AF37]">Create</span>
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Premium gating banner for free users */}
      {!canCreateGroup && (
        <div className="mx-4 mb-3 bg-gradient-to-r from-amber-900/15 to-gray-900/50 border border-amber-800/20 rounded-xl px-3 py-2.5">
          <div className="flex items-center gap-2">
            <Lock size={14} className="text-[#D4AF37] shrink-0" />
            <div className="flex-1">
              <p className="text-xs text-amber-300/90">
                <span className="font-semibold">Free</span> members can browse.{" "}
                <span className="text-[#D4AF37] font-semibold">Premium</span> or{" "}
                <span className="text-purple-400 font-semibold">Pro</span> required to create groups.
              </p>
            </div>
            <button
              onClick={() => router.push("/profile")}
              className="text-xs font-semibold text-[#D4AF37] bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-lg px-2.5 py-3 active:bg-[#D4AF37]/25 transition"
            >
              Upgrade
            </button>
          </div>
        </div>
      )}

      {/* Groups list */}
      <div className="px-4">
        {loadingData ? (
          <div className="flex flex-col items-center justify-center py-20">
            <Loader2 size={32} className="text-[#D4AF37] animate-spin mb-3" />
            <p className="text-sm text-gray-500">Loading groups...</p>
          </div>
        ) : error ? (
          <ErrorFeedback error={error} kind="network" onRetry={fetchGroups} context="groups" />
        ) : groups.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-20">
            <div className="w-16 h-16 rounded-2xl bg-gray-800/40 flex items-center justify-center mb-4">
              <Users size={28} className="text-gray-600" />
            </div>
            <h3 className="text-base font-semibold text-gray-400 mb-1">
              No groups yet
            </h3>
            <p className="text-xs text-gray-600 text-center max-w-xs">
              {canCreateGroup
                ? "Create a private group to discuss topics with select members."
                : "Join a private group using an invite code."}
            </p>
            {canCreateGroup && (
              <button
                onClick={() => {
                  setCreateName("");
                  setCreateDescription("");
                  setCreateError(null);
                  setShowCreateModal(true);
                }}
                className="mt-4 flex items-center gap-2 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-4 py-3 active:bg-[#D4AF37]/25 transition"
              >
                <Plus size={16} className="text-[#D4AF37]" />
                <span className="text-sm font-medium text-[#D4AF37]">Create Group</span>
              </button>
            )}
          </div>
        ) : (
          <div className="space-y-2.5">
            {groups.map((group) => (
              <button
                key={group.id}
                onClick={() => router.push(`/groups/${group.id}`)}
                className="w-full text-left bg-[#111118] border border-gray-800/60 rounded-2xl p-4 active:scale-[0.99] transition-transform"
              >
                <div className="flex items-center gap-3">
                  {/* Group avatar */}
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#D4AF37]/20 to-gray-800/60 flex items-center justify-center shrink-0">
                    <span className="text-base font-bold text-[#D4AF37]">
                      {group.name.charAt(0).toUpperCase()}
                    </span>
                  </div>

                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-1.5 mb-0.5">
                      <h3 className="text-sm font-semibold text-white truncate">
                        {group.name}
                      </h3>
                      {group.ownerId === user.id && (
                        <Crown size={12} className="text-[#D4AF37] shrink-0" />
                      )}
                    </div>
                    {group.description && (
                      <p className="text-xs text-gray-500 truncate mb-1">
                        {group.description}
                      </p>
                    )}
                    <div className="flex items-center gap-3 text-xs text-gray-600">
                      <div className="flex items-center gap-1">
                        <Users size={11} />
                        <span>{group._count.members} members</span>
                      </div>
                      <span className="text-gray-700">·</span>
                      <span>{group._count.threads} threads</span>
                    </div>
                  </div>

                  <ChevronRight size={16} className="text-gray-600 shrink-0" />
                </div>
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Create group modal */}
      {showCreateModal && (
        <div className="fixed inset-0 z-[60] flex items-end sm:items-center justify-center">
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={() => setShowCreateModal(false)}
          />
          <div className="relative w-full sm:max-w-md bg-[#111118] border border-gray-800/60 rounded-t-2xl sm:rounded-2xl p-5 animate-fade-in max-h-[90dvh] overflow-y-auto">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Users size={18} className="text-[#D4AF37]" />
                <h2 className="text-base font-bold text-white">Create Group</h2>
              </div>
              <button
                onClick={() => setShowCreateModal(false)}
                className="w-8 h-8 rounded-full bg-gray-800/60 flex items-center justify-center active:bg-gray-700/60 transition"
              >
                <X size={16} className="text-gray-500" />
              </button>
            </div>

            <form onSubmit={handleCreateGroup} className="space-y-4">
              <div>
                <label className="block text-xs font-medium text-gray-500 mb-1.5">
                  Group Name *
                </label>
                <input
                  type="text"
                  value={createName}
                  onChange={(e) => setCreateName(e.target.value)}
                  placeholder="e.g., Book Club, Quran Study"
                  required
                  maxLength={100}
                  className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-500 mb-1.5">
                  Description (optional)
                </label>
                <textarea
                  value={createDescription}
                  onChange={(e) => setCreateDescription(e.target.value)}
                  placeholder="What's this group about?"
                  maxLength={500}
                  rows={3}
                  className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition resize-none"
                />
              </div>

              {createError && (
                <ErrorFeedback error={createError} kind="default" onRetry={() => setCreateError(null)} context="create group" />
              )}

              <div className="flex gap-3 pt-2">
                <button
                  type="button"
                  onClick={() => setShowCreateModal(false)}
                  className="flex-1 py-3 rounded-xl text-sm font-medium text-gray-500 bg-gray-800/40 border border-gray-800/60 active:bg-gray-700/40 transition"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={creating}
                  className="flex-1 py-3 rounded-xl text-sm font-semibold text-[#0a0a0f] bg-[#D4AF37] active:bg-[#c5a233] transition flex items-center justify-center gap-2 disabled:opacity-60"
                >
                  {creating ? (
                    <>
                      <Loader2 size={14} className="animate-spin" />
                      Creating...
                    </>
                  ) : (
                    "Create Group"
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Join group modal */}
      {showJoinModal && (
        <div className="fixed inset-0 z-[60] flex items-end sm:items-center justify-center">
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={() => {
              if (!joining) setShowJoinModal(false);
            }}
          />
          <div className="relative w-full sm:max-w-md bg-[#111118] border border-gray-800/60 rounded-t-2xl sm:rounded-2xl p-5 animate-fade-in max-h-[90dvh] overflow-y-auto">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Lock size={18} className="text-[#D4AF37]" />
                <h2 className="text-base font-bold text-white">Join Group</h2>
              </div>
              <button
                onClick={() => {
                  if (!joining) setShowJoinModal(false);
                }}
                className="w-8 h-8 rounded-full bg-gray-800/60 flex items-center justify-center active:bg-gray-700/60 transition"
              >
                <X size={16} className="text-gray-500" />
              </button>
            </div>

            <form onSubmit={handleJoinGroup} className="space-y-4">
              <div>
                <label className="block text-xs font-medium text-gray-500 mb-1.5">
                  Invite Code *
                </label>
                <input
                  type="text"
                  value={joinCode}
                  onChange={(e) => setJoinCode(e.target.value)}
                  placeholder="Enter the invite code"
                  required
                  maxLength={50}
                  className="w-full bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-[#D4AF37]/40 transition"
                />
                <p className="text-xs text-gray-600 mt-1.5">
                  Ask the group owner for the invite code.
                </p>
              </div>

              {joinError && (
                <ErrorFeedback error={joinError} kind="default" onRetry={() => setJoinError(null)} context="join group" />
              )}

              {joinSuccess && (
                <div className="bg-emerald-900/10 border border-emerald-800/30 rounded-xl p-3">
                  <p className="text-xs text-emerald-300">{joinSuccess}</p>
                </div>
              )}

              <div className="flex gap-3 pt-2">
                <button
                  type="button"
                  onClick={() => {
                    if (!joining) setShowJoinModal(false);
                  }}
                  className="flex-1 py-3 rounded-xl text-sm font-medium text-gray-500 bg-gray-800/40 border border-gray-800/60 active:bg-gray-700/40 transition"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={joining}
                  className="flex-1 py-3 rounded-xl text-sm font-semibold text-[#0a0a0f] bg-[#D4AF37] active:bg-[#c5a233] transition flex items-center justify-center gap-2 disabled:opacity-60"
                >
                  {joining ? (
                    <>
                      <Loader2 size={14} className="animate-spin" />
                      Joining...
                    </>
                  ) : (
                    "Join Group"
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}