"use client";

import { useState, useEffect, useCallback } from "react";
import { useAuth } from "@/lib/AuthContext";
import { useRouter, useParams } from "next/navigation";
import {
  ArrowLeft,
  Users,
  Plus,
  Copy,
  Check,
  X,
  Crown,
  Shield,
  Loader2,
  Clock,
  UserMinus,
} 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 GroupDetail {
  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;
  };
}

const ROLE_ICONS: Record<string, any> = {
  owner: Crown,
  admin: Shield,
};

const ROLE_COLORS: Record<string, string> = {
  owner: "text-[#D4AF37]",
  admin: "text-blue-400",
  member: "text-gray-500",
};

export default function GroupDetailPage() {
  const { user, token, loading } = useAuth();
  const router = useRouter();
  const params = useParams();
  const groupId = params.id as string;

  const [group, setGroup] = useState<GroupDetail | null>(null);
  const [loadingData, setLoadingData] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Invite code
  const [inviteCode, setInviteCode] = useState<string | null>(null);
  const [loadingInvite, setLoadingInvite] = useState(false);
  const [copied, setCopied] = useState(false);

  // Remove member
  const [removingMember, setRemovingMember] = useState<string | null>(null);

  const isOwner = group?.ownerId === user?.id;

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

  const fetchInviteCode = useCallback(async () => {
    setLoadingInvite(true);
    try {
      const res = await fetch(`/mobile/api/groups/${groupId}/invite`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      const data = await res.json();
      if (res.ok) {
        setInviteCode(data.inviteCode);
      }
    } catch {
      // silent
    } finally {
      setLoadingInvite(false);
    }
  }, [token, groupId]);

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

  useEffect(() => {
    if (token && groupId) {
      fetchGroup();
    }
  }, [token, groupId, fetchGroup]);

  useEffect(() => {
    if (isOwner && groupId && token) {
      fetchInviteCode();
    }
  }, [isOwner, groupId, token, fetchInviteCode]);

  const handleCopyCode = async () => {
    if (inviteCode) {
      try {
        await navigator.clipboard.writeText(inviteCode);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch {
        // fallback
        const input = document.createElement("input");
        input.value = inviteCode;
        document.body.appendChild(input);
        input.select();
        document.execCommand("copy");
        document.body.removeChild(input);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      }
    }
  };

  const handleRemoveMember = async (memberId: string) => {
    if (!confirm("Remove this member from the group?")) return;
    setRemovingMember(memberId);
    try {
      const res = await fetch(
        `/mobile/api/groups/${groupId}/members/${memberId}`,
        {
          method: "DELETE",
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );
      if (res.ok) {
        fetchGroup();
      }
    } catch {
      // silent
    } finally {
      setRemovingMember(null);
    }
  };

  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">
      {/* Sticky header */}
      <div className="sticky top-0 z-20 bg-[#0a0a0f]/90 backdrop-blur-lg border-b border-gray-800/40">
        <div className="flex items-center gap-3 px-4 h-12">
          <button
            onClick={() => router.push("/groups")}
            className="w-8 h-8 rounded-full bg-gray-800/60 flex items-center justify-center active:bg-gray-700/60 transition"
          >
            <ArrowLeft size={16} className="text-gray-400" />
          </button>
          <h1 className="text-sm font-semibold text-white truncate">
            {group ? group.name : "Group"}
          </h1>
        </div>
      </div>

      {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 group...</p>
        </div>
      ) : error ? (
        <ErrorFeedback error={error} kind="network" onRetry={fetchGroup} context="group detail" />
      ) : !group ? (
        <div className="mx-4 mt-4 bg-gray-900/40 border border-gray-800/60 rounded-2xl p-6 text-center">
          <p className="text-sm text-gray-400">Group not found</p>
          <button
            onClick={() => router.push("/groups")}
            className="mt-3 text-xs text-[#D4AF37] underline"
          >
            Back to groups
          </button>
        </div>
      ) : (
        <>
          {/* Group info card */}
          <div className="px-4 pt-4 pb-2">
            <div className="bg-[#111118] border border-gray-800/60 rounded-2xl p-5">
              <div className="flex items-center gap-4 mb-4">
                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#D4AF37]/20 to-gray-800/60 flex items-center justify-center shrink-0">
                  <span className="text-2xl font-bold text-[#D4AF37]">
                    {group.name.charAt(0).toUpperCase()}
                  </span>
                </div>
                <div className="flex-1 min-w-0">
                  <h2 className="text-lg font-bold text-white">{group.name}</h2>
                  {group.description && (
                    <p className="text-xs text-gray-500 mt-0.5">
                      {group.description}
                    </p>
                  )}
                  <div className="flex items-center gap-3 mt-2 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>
                    <div className="flex items-center gap-1">
                      <MessageCircle size={11} />
                      <span>{group._count.threads} threads</span>
                    </div>
                    <span className="text-gray-700">·</span>
                    <div className="flex items-center gap-0.5">
                      <Clock size={9} />
                      <span>{timeAgo(group.createdAt)}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Owner info */}
              <div className="flex items-center gap-2 bg-[#0a0a0f] rounded-xl px-3.5 py-2.5">
                <Crown size={14} className="text-[#D4AF37] shrink-0" />
                <span className="text-xs text-gray-500">Created by</span>
                <span className={`text-xs font-semibold ${
                  group.owner.isPro
                    ? "text-purple-400"
                    : group.owner.isPremium
                      ? "text-[#D4AF37]"
                      : "text-gray-300"
                }`}>
                  {group.owner.name}
                </span>
              </div>
            </div>
          </div>

          {/* Invite code section (owner only) */}
          {isOwner && (
            <div className="px-4 mb-3">
              <div className="bg-[#111118] border border-gray-800/60 rounded-2xl p-4">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xs font-medium text-gray-500">
                    Invite Code
                  </span>
                  <span className="text-[10px] text-amber-400/70 bg-amber-400/10 border border-amber-400/20 rounded-md px-1.5 py-0.5">
                    Share to invite members
                  </span>
                </div>
                {loadingInvite ? (
                  <div className="flex items-center justify-center py-3">
                    <Loader2 size={16} className="text-[#D4AF37] animate-spin" />
                  </div>
                ) : inviteCode ? (
                  <div className="flex items-center gap-2">
                    <div className="flex-1 bg-[#0a0a0f] border border-gray-800/60 rounded-xl px-3.5 py-3">
                      <code className="text-sm font-mono text-[#D4AF37] tracking-wider select-all">
                        {inviteCode}
                      </code>
                    </div>
                    <button
                      onClick={handleCopyCode}
                      className="w-11 h-11 rounded-xl bg-[#D4AF37]/15 border border-[#D4AF37]/30 flex items-center justify-center active:bg-[#D4AF37]/25 transition shrink-0"
                    >
                      {copied ? (
                        <Check size={18} className="text-emerald-400" />
                      ) : (
                        <Copy size={18} className="text-[#D4AF37]" />
                      )}
                    </button>
                  </div>
                ) : (
                  <p className="text-xs text-gray-600">
                    Failed to load invite code.
                  </p>
                )}
              </div>
            </div>
          )}

          {/* Members section */}
          <div className="px-4">
            <div className="flex items-center justify-between mb-3 px-1">
              <div className="flex items-center gap-2">
                <Users size={14} className="text-gray-500" />
                <span className="text-xs font-medium text-gray-500">
                  Members ({group.members.length})
                </span>
              </div>
            </div>

            <div className="space-y-2">
              {group.members.map((member) => {
                const RoleIcon = ROLE_ICONS[member.role] || null;
                const canRemove =
                  isOwner &&
                  member.role !== "owner" &&
                  member.userId !== user.id;

                return (
                  <div
                    key={member.id}
                    className="bg-[#111118] border border-gray-800/60 rounded-2xl p-3.5"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center text-xs font-bold text-gray-300 shrink-0">
                        {member.user.name.charAt(0).toUpperCase()}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-1.5">
                          <span className="text-sm font-semibold text-white truncate">
                            {member.user.name}
                          </span>
                          {member.user.isPro && (
                            <Crown size={11} className="text-purple-400 shrink-0" />
                          )}
                        </div>
                        <div className="flex items-center gap-2 mt-0.5">
                          {RoleIcon && (
                            <div className={`flex items-center gap-0.5 ${ROLE_COLORS[member.role]}`}>
                              <RoleIcon size={10} />
                              <span className="text-[10px] capitalize">{member.role}</span>
                            </div>
                          )}
                          {member.role === "member" && (
                            <span className="text-[10px] text-gray-600">Member</span>
                          )}
                        </div>
                      </div>
                      {canRemove && (
                        <button
                          onClick={() => handleRemoveMember(member.id)}
                          disabled={removingMember === member.id}
                          className="w-9 h-9 rounded-full bg-red-900/15 border border-red-800/30 flex items-center justify-center active:bg-red-900/25 transition shrink-0 disabled:opacity-50"
                        >
                          {removingMember === member.id ? (
                            <Loader2 size={14} className="animate-spin text-red-400" />
                          ) : (
                            <UserMinus size={14} className="text-red-400" />
                          )}
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* View threads button */}
          <div className="px-4 mt-5">
            <button
              onClick={() => router.push(`/forum?groupId=${group.id}`)}
              className="w-full flex items-center justify-center gap-2 bg-[#D4AF37]/15 border border-[#D4AF37]/30 rounded-xl px-4 py-3 active:bg-[#D4AF37]/25 transition"
            >
              <MessageCircle size={16} className="text-[#D4AF37]" />
              <span className="text-sm font-medium text-[#D4AF37]">
                View Group Threads
              </span>
            </button>
          </div>
        </>
      )}
    </div>
  );
}

function MessageCircle(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={props.size || 24}
      height={props.size || 24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
    </svg>
  );
}
