import React, { useState, useEffect, useMemo } from 'react';
import { X, Search, UserPlus, Loader2, Shield, Trash2, Clock } from 'lucide-react';
import { useConfirm } from '@/hooks/useConfirm';
import { useNotification } from '@/hooks/useNotification';

interface AddMemberModalProps {
  isOpen: boolean;
  onClose: () => void;
  tourId: string;
  participants?: Array<{ id: string; userId?: string | null; role: string; displayName?: string | null; user?: { id: string; name: string; email: string } | null }>;
  joinRequests?: Array<{ id: string; userId: string; user?: { id: string; name: string; email: string }; status: string; requestedById: string }>;
  onRemoveMember?: (userId: string) => Promise<void>;
  onMemberAdded?: () => void;
  userRole?: string; // User's role in the tour
  isPublicView?: boolean; // New prop to indicate public view
}

export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose, tourId, participants = [], joinRequests = [], onRemoveMember, onMemberAdded, userRole, isPublicView }) => {
  const [activeTab, setActiveTab] = useState<'search' | 'email'>('search');
  const [query, setQuery] = useState('');
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedUser, setSelectedUser] = useState<string | null>(null);
  const [role, setRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
  const [submitting, setSubmitting] = useState(false);
  const [fetchError, setFetchError] = useState('');
  const [submitError, setSubmitError] = useState('');
  const [actionLoading, setActionLoading] = useState<string | null>(null);

  // Trạng thái cho tab mời qua email
  const [inviteEmail, setInviteEmail] = useState('');
  const [inviteRole, setInviteRole] = useState<'OWNER' | 'MANAGER' | 'MEMBER' | 'MEMBER_NO_FINANCE' | 'VIEWER_ONLY'>('MEMBER');
  const [inviteLoading, setInviteLoading] = useState(false);
  const [inviteError, setInviteError] = useState('');
  const [inviteSuccess, setInviteSuccess] = useState('');

  const confirm = useConfirm();
  const notify = useNotification();

  const participantIds = useMemo(() => new Set(participants.map((p) => p.userId).filter(Boolean) as string[]), [participants]);
  const requestUserIds = useMemo(() => new Set(joinRequests.map((r) => (r as any).userId)), [joinRequests]);
  const visibleUsers = useMemo(() => users.filter((u) => !participantIds.has(u.id)), [users, participantIds]);
  
  const canCreateDirectly = !userRole || userRole === 'OWNER' || userRole === 'MANAGER';
  const canInviteByEmail = userRole === 'OWNER' || userRole === 'MANAGER';

  const handleManualAdd = async () => {
    const name = query.trim();
    if (!name) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      const res = await fetch(`/api/v1/tours/${tourId}/members`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: JSON.stringify({ displayName: name, role }),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || data.error || 'Thao tác thất bại');
      }
      await onMemberAdded?.();
      onClose();
    } catch (err: any) {
      setSubmitError(err.message || 'Thao tác thất bại');
    } finally {
      setSubmitting(false);
    }
  };

  const fetchUsers = async () => {
    setLoading(true);
    setFetchError('');
    try {
      const res = await fetch(`/api/v1/users?q=${encodeURIComponent(query)}`, {
        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
      });
      if (!res.ok) throw new Error('Không thể tải danh sách người dùng');
      const data = await res.json();
      setUsers(Array.isArray(data) ? data : []);
    } catch (err: any) {
      setFetchError(err.message || 'Không thể tải danh sách người dùng');
    } finally {
      setLoading(false);
    }
  };

  const handleSendInvite = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inviteEmail.trim()) return;
    setInviteLoading(true);
    setInviteError('');
    setInviteSuccess('');
    try {
      const res = await fetch(`/api/v1/tours/${tourId}/invitations`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
      });
      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.message || 'Gửi lời mời thất bại');
      }
      setInviteSuccess(`Lời mời đã được gửi thành công đến ${inviteEmail}!`);
      setInviteEmail('');
      notify({ title: 'Thành công', message: `Lời mời đã gửi tới ${inviteEmail}`, type: 'success' });
      await onMemberAdded?.();
    } catch (err: any) {
      setInviteError(err.message || 'Thao tác thất bại');
    } finally {
      setInviteLoading(false);
    }
  };

  useEffect(() => {
    if (!isOpen || activeTab !== 'search') return;
    const delayDebounceFn = setTimeout(() => {
      fetchUsers();
    }, 300);

    return () => clearTimeout(delayDebounceFn);
  }, [query, isOpen, activeTab]);

  useEffect(() => {
    if (!isOpen) {
      setQuery('');
      setSelectedUser(null);
      setRole('MEMBER');
      setFetchError('');
      setSubmitError('');
      setInviteEmail('');
      setInviteRole('MEMBER');
      setInviteError('');
      setInviteSuccess('');
      setActiveTab('search');
    }
  }, [isOpen]);

  const handleRemove = async (memberIdOrUserId: string, memberName: string) => {
    if (!onRemoveMember) return;
    const isConfirmed = await confirm({
      title: 'Xóa thành viên',
      message: `Bạn có chắc chắn muốn xóa ${memberName} khỏi tour?`
    });

    if (isConfirmed) {
      try {
        await onRemoveMember(memberIdOrUserId);
      } catch (err: any) {
        setSubmitError(err.message || 'Không thể xóa thành viên');
      }
    }
  };

  const handleRequestAction = async (reqId: string, action: 'accept' | 'reject') => {
    if (!onMemberAdded) return;
    setActionLoading(reqId);
    try {
      const endpoint = action === 'accept'
        ? `/api/v1/tours/${tourId}/join-requests/${reqId}/accept`
        : `/api/v1/tours/${tourId}/join-requests/${reqId}/reject`;
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.message || data.error || (action === 'accept' ? 'Không thể chấp nhận' : 'Không thể từ chối'));
      }
      await onMemberAdded();
    } catch (err: any) {
      notify({ title: 'Lỗi', message: err.message || 'Thao tác thất bại', type: 'error' });
    } finally {
      setActionLoading(null);
    }
  };

  const handleAdd = async () => {
    if (!selectedUser) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      const endpoint = canCreateDirectly ? `/api/v1/tours/${tourId}/members` : `/api/v1/tours/${tourId}/join-requests`;
      const body = canCreateDirectly
        ? { userId: selectedUser, role }
        : { userId: selectedUser };
      const res = await fetch(`${endpoint}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: JSON.stringify(body),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || data.error || 'Thao tác thất bại');
      }
      await onMemberAdded?.();
      onClose();
    } catch (err: any) {
      setSubmitError(err.message || 'Thao tác thất bại');
    } finally {
      setSubmitting(false);
    }
  };

  if (!isOpen || isPublicView) return null; // Do not render if public view

  return (
    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
        <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
          <div>
            <h2 className="text-lg font-bold text-gray-900 flex items-center gap-2">
              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thành viên hành trình' : 'Mời tham gia tour'}
            </h2>
            <p className="text-xs text-gray-500">
              {canCreateDirectly ? 'Quản lý, thêm thành viên và mời người khác tham gia.' : 'Mời sẽ được gửi và chờ người quản lý phê duyệt.'}
            </p>
          </div>
          <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors">
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>

        {canInviteByEmail && (
          <div className="flex border-b border-gray-100 bg-gray-50/30">
            <button
              onClick={() => setActiveTab('search')}
              className={`flex-1 py-3 text-center text-sm font-bold border-b-2 transition-all ${
                activeTab === 'search'
                  ? 'border-blue-600 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              Tìm thành viên
            </button>
            <button
              onClick={() => setActiveTab('email')}
              className={`flex-1 py-3 text-center text-sm font-bold border-b-2 transition-all ${
                activeTab === 'email'
                  ? 'border-blue-600 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              Mời qua Email
            </button>
          </div>
        )}

        <div className="p-5 space-y-4 overflow-y-auto flex-1">
          {/* Danh sách thành viên hiện tại */}
          <div>
            <p className="text-[11px] font-bold text-gray-500 mb-2">Thành viên của tour ({participants.filter(p => p.user || p.displayName).length})</p>
            <div className="flex flex-wrap gap-3">
              {participants.filter(p => p.user || p.displayName).map((p) => {
                const rawToken = localStorage.getItem('token');
                let currentUserId: string | null = null;
                try {
                  const payload = JSON.parse(atob((rawToken || '').split('.')[1]));
                  currentUserId = payload.sub;
                } catch {
                  currentUserId = null;
                }
                const isCurrentUser = currentUserId && p.userId === currentUserId;
                const isOwner = p.role === 'OWNER';
                const canRemove = onRemoveMember && !isCurrentUser && !isOwner;
                const memberName = p.user?.name || p.displayName || p.userId || 'Thành viên';
                return (
                  <div key={p.id} className="flex flex-col items-center gap-1">
                    <div className="relative">
                      <div className="w-10 h-10 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold text-sm overflow-hidden">
                        {memberName.charAt(0)}
                      </div>
                      {canRemove && (
                        <button
                          onClick={() => handleRemove(p.userId || p.id, memberName)}
                          className="absolute -top-1 -right-1 w-4 h-4 bg-gray-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white"
                          aria-label="Remove item"
                        >
                          <Trash2 size={10} />
                        </button>
                      )}
                    </div>
                    <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{memberName}</span>
                  </div>
                );
              })}
              {participants.length === 0 && (
                <span className="text-xs text-gray-400">Chưa có thành viên nào</span>
              )}
            </div>
          </div>

          {/* Danh sách chờ duyệt */}
          {joinRequests.length > 0 && (
            <div>
              <p className="text-[11px] font-bold text-gray-500 mb-2 flex items-center gap-1">
                <Clock className="w-3 h-3 text-amber-500" /> Đang chờ phê duyệt ({joinRequests.length})
              </p>
              <div className="flex flex-wrap gap-3">
                {(joinRequests as any[]).map((req) => (
                  <div key={req.id} className="flex flex-col items-center gap-1 relative">
                    <div className="w-10 h-10 rounded-full bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-600 font-bold text-sm overflow-hidden">
                      {req.user?.name?.charAt(0) || '?'}
                    </div>
                    <div className="absolute -top-1 -right-1 flex">
                      <button
                        type="button"
                        disabled={actionLoading === req.id}
                        onClick={() => handleRequestAction(req.id, 'accept')}
                        className="w-4 h-4 bg-green-500 hover:bg-green-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50"
                        aria-label="Accept"
                      >
                        +
                      </button>
                      <button
                        type="button"
                        disabled={actionLoading === req.id}
                        onClick={() => handleRequestAction(req.id, 'reject')}
                        className="w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white text-[10px] leading-none disabled:opacity-50 -ml-1"
                        aria-label="Reject"
                      >
                        x
                      </button>
                    </div>
                    <span className="text-[10px] font-semibold text-gray-700 max-w-[72px] truncate">{req.user?.name || req.userId}</span>
                    <span className="text-[9px] font-bold text-amber-600 bg-amber-100 px-1.5 py-0.5 rounded-full border border-amber-200">PENDING</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <hr className="border-gray-100" />

          {activeTab === 'search' ? (
            <div className="space-y-4">
              {canCreateDirectly && (
                <div className="space-y-1.5">
                  <label className="text-xs font-bold text-gray-700 ml-1">Phân quyền khi thêm</label>
                  <select
                    className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm font-bold text-gray-800"
                    value={role}
                    onChange={(e) => setRole(e.target.value as any)}
                  >
                    <option value="OWNER">OWNER</option>
                    <option value="MANAGER">MANAGER</option>
                    <option value="MEMBER">MEMBER</option>
                    <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE</option>
                    <option value="VIEWER_ONLY">VIEWER_ONLY</option>
                  </select>
                </div>
              )}

              <div className="space-y-2">
                <div className="relative mb-2">
                  <input
                    type="text"
                    placeholder="Tìm kiếm theo tên hoặc địa chỉ email..."
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    className="w-full pl-10 pr-10 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
                  />
                  <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
                  {query && (
                    <button
                      type="button"
                      onClick={() => setQuery('')}
                      className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-200 rounded-full text-gray-400 transition-colors"
                    >
                      <X className="w-4 h-4" />
                    </button>
                  )}
                </div>

                {fetchError && (
                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
                    {fetchError}
                  </div>
                )}
                {submitError && (
                  <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
                    {submitError}
                  </div>
                )}
                {loading ? (
                  <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
                ) : (
                  <div className="space-y-2 max-h-[30vh] overflow-y-auto pr-1">
                    {query.trim() && canCreateDirectly && (
                      <button
                        type="button"
                        onClick={handleManualAdd}
                        disabled={submitting}
                        className="w-full flex items-center gap-3 p-3 rounded-2xl border border-dashed border-blue-300 hover:border-blue-400 bg-blue-50/20 text-blue-700 transition-all text-left mb-2"
                      >
                        <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
                          +
                        </div>
                        <div className="flex-1 text-left">
                          <div className="text-sm font-bold">Thêm thành viên thủ công</div>
                          <div className="text-[11px] text-gray-500">Thêm "{query.trim()}" trực tiếp vào danh sách thành viên</div>
                        </div>
                        {submitting ? (
                          <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
                        ) : (
                          <span className="px-2.5 py-1 bg-blue-600 text-white rounded-xl text-xs font-bold transition-all">Thêm</span>
                        )}
                      </button>
                    )}
                    {visibleUsers.map((u) => {
                      const isSelected = selectedUser === u.id;
                      return (
                        <button
                          key={u.id}
                          onClick={() => setSelectedUser(u.id)}
                          disabled={requestUserIds.has(u.id)}
                          className={`w-full flex items-center gap-3 p-3 rounded-2xl border transition-all ${
                            isSelected ? 'border-blue-500 bg-blue-50/60' : 'border-gray-100 hover:border-blue-200'
                          } ${requestUserIds.has(u.id) ? 'opacity-60' : ''}`}
                        >
                          <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
                            {u.name?.charAt(0) || '?'}
                          </div>
                          <div className="flex-1 text-left">
                            <div className="text-sm font-bold text-gray-900">{u.name || 'Chưa đặt tên'}</div>
                            <div className="text-[11px] text-gray-500">{u.email}</div>
                          </div>
                          <div className="flex items-center gap-1 text-[10px] font-bold text-gray-500">
                            {isSelected && <Shield className="w-3 h-3 text-blue-600" />}
                          </div>
                        </button>
                      );
                    })}
                    {!loading && visibleUsers.length === 0 && (
                      <div className="text-center py-8 text-sm text-gray-500">Không tìm thấy người dùng phù hợp</div>
                    )}
                  </div>
                )}
              </div>
              <div className="flex justify-end gap-2 pt-2">
                <button onClick={onClose} className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
                  Hủy
                </button>
                <button
                  disabled={!selectedUser || submitting}
                  onClick={handleAdd}
                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all"
                >
                  {submitting ? 'Đang xử lý...' : canCreateDirectly ? 'Thêm vào tour' : 'Gửi lời mời'}
                </button>
              </div>
            </div>
          ) : (
            <form onSubmit={handleSendInvite} className="space-y-4">
              <div className="space-y-1.5">
                <label className="text-xs font-bold text-gray-700 ml-1">Email người nhận</label>
                <input
                  required
                  type="email"
                  placeholder="nhap.email@example.com"
                  value={inviteEmail}
                  onChange={(e) => setInviteEmail(e.target.value)}
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm font-bold text-gray-800"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-xs font-bold text-gray-700 ml-1">Vai trò trong Tour</label>
                <select
                  className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm font-bold text-gray-800"
                  value={inviteRole}
                  onChange={(e) => setInviteRole(e.target.value as any)}
                >
                  <option value="MEMBER">MEMBER (Thành viên tài chính)</option>
                  <option value="MEMBER_NO_FINANCE">MEMBER_NO_FINANCE (Thành viên phi tài chính)</option>
                  <option value="MANAGER">MANAGER (Đồng quản trị viên)</option>
                  <option value="VIEWER_ONLY">VIEWER_ONLY (Chỉ xem thông tin)</option>
                </select>
              </div>

              {inviteError && (
                <div className="p-3 bg-red-50 text-red-600 rounded-xl text-xs font-bold border border-red-100">
                  {inviteError}
                </div>
              )}
              {inviteSuccess && (
                <div className="p-3 bg-green-50 text-green-700 rounded-xl text-xs font-bold border border-green-100">
                  {inviteSuccess}
                </div>
              )}

              <div className="flex justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors"
                >
                  Đóng
                </button>
                <button
                  type="submit"
                  disabled={inviteLoading || !inviteEmail}
                  className="px-4 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-xl text-sm font-bold transition-all flex items-center gap-2"
                >
                  {inviteLoading ? (
                    <>
                      Đang gửi...
                      <Loader2 className="w-4 h-4 animate-spin" />
                    </>
                  ) : (
                    'Gửi thư mời'
                  )}
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};