// Inlinr — Team & Permissions view
// Reads members from Firestore users collection + pending invites subcollection.

const { useState, useEffect, useRef, useMemo } = React;

const ROLES = [
  { id: "owner", label: "Owner", tone: "owner", desc: "Full control of workspace, billing, members." },
  { id: "admin", label: "Admin", tone: "admin", desc: "Manage day-to-day operations and invite new members." },
  { id: "editor", label: "Editor", tone: "editor", desc: "Create campaigns, manage folders, work in media." },
  { id: "translator", label: "Translator", tone: "translator", desc: "Access localization workflows without editor access." },
  { id: "viewer", label: "Viewer", tone: "viewer", desc: "Read-only access to the library and preview sharing." }
];

const PERMISSIONS = [
  { id: "accessDashboard", label: "Access campaign library", roles: { owner: true, admin: true, editor: true, translator: true, viewer: true } },
  { id: "accessComposer", label: "Open the composer", roles: { owner: true, admin: true, editor: true, translator: false, viewer: false } },
  { id: "accessLocalization", label: "Use localization tools", roles: { owner: true, admin: true, editor: true, translator: true, viewer: false } },
  { id: "accessMedia", label: "Use media library", roles: { owner: true, admin: true, editor: true, translator: false, viewer: false } },
  { id: "createCampaign", label: "Create campaigns", roles: { owner: true, admin: true, editor: true, translator: false, viewer: false } },
  { id: "deleteCampaign", label: "Delete campaigns", roles: { owner: true, admin: true, editor: false, translator: false, viewer: false } },
  { id: "inviteMembers", label: "Invite new members", roles: { owner: true, admin: true, editor: false, translator: false, viewer: false } },
  { id: "resendInvites", label: "Resend pending invites", roles: { owner: true, admin: true, editor: false, translator: false, viewer: false } },
  { id: "updateRoles", label: "Update existing member roles", roles: { owner: true, admin: false, editor: false, translator: false, viewer: false } },
  { id: "editMemberProfile", label: "Edit member names", roles: { owner: true, admin: false, editor: false, translator: false, viewer: false } },
  { id: "removeMember", label: "Remove members", roles: { owner: true, admin: false, editor: false, translator: false, viewer: false } }
];

const roleOrder = { owner: 0, admin: 1, editor: 2, translator: 3, viewer: 4 };

const RoleBadge = ({ role }) => {
  const tone = INLINR_ROLE_META[role?.toLowerCase()]?.tone || "viewer";
  const label = INLINR_ROLE_META[role?.toLowerCase()]?.label || "Viewer";
  return <span className={`role-badge role-${tone}`}>{label}</span>;
};

const timeAgo = (ts) => {
  if (!ts) return "Pending";
  const now = Date.now();
  const t = ts.toDate ? ts.toDate().getTime() : new Date(ts).getTime();
  const diff = now - t;
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return "Just now";
  if (mins < 60) return `${mins} min ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours} h ago`;
  const days = Math.floor(hours / 24);
  if (days === 1) return "Yesterday";
  if (days < 7) return `${days} days ago`;
  if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
  if (days < 365) return `${Math.floor(days / 30)} months ago`;
  return `${Math.floor(days / 365)} years ago`;
};

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

const daysSince = (ts) => {
  if (!ts) return Infinity;
  const t = ts.toDate ? ts.toDate().getTime() : new Date(ts).getTime();
  return Math.floor((Date.now() - t) / 86400000);
};

const InviteModal = ({ open, onClose, workspace, profile, existingEmails }) => {
  const [email, setEmail] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [role, setRole] = useState("editor");
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [warning, setWarning] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    if (!open) return;
    setEmail("");
    setFirstName("");
    setLastName("");
    setRole("editor");
    setSending(false);
    setSent(false);
    setWarning("");
    setError("");
  }, [open]);

  const assignableRoles = ROLES.filter(r => {
    if (profile?.role === "owner") return r.id !== "owner";
    if (profile?.role === "admin") return r.id !== "owner" && r.id !== "admin";
    return false;
  });

  const handleSend = async () => {
    const emailLower = normalizeEmail(email);
    if (!emailLower) {
      setError("Enter a work email.");
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailLower)) {
      setError("Enter a valid email address.");
      return;
    }
    if (existingEmails.includes(emailLower)) {
      setError("This email is already part of the workspace or already invited.");
      return;
    }

    setSending(true);
    setError("");
    setWarning("");

    try {
      const result = await sendWorkspaceInvitation({
        workspaceId: workspace.id,
        workspaceName: workspace.name || "Workspace",
        email: emailLower,
        role,
        firstName,
        lastName,
        invitedByUid: fbAuth.currentUser?.uid || null,
        invitedByName: profile?.displayName || null
      });
      if (!result.emailQueued) {
        setWarning("Invitation created, but the email was not sent. Configure Firebase Trigger Email to deliver branded invites.");
      }
      setSent(true);
      setTimeout(() => onClose(), 1800);
    } catch (err) {
      if (err.code === "already-member") {
        setError("This user is already a member of the workspace.");
      } else if (err.code === "email-already-registered") {
        setError("This email already belongs to another registered workspace account.");
      } else {
        setError("Unable to create the invitation right now.");
      }
      setSending(false);
    }
  };

  if (!open) return null;

  return (
    <div className="invite-overlay" onClick={onClose}>
      <div className="invite-modal" onClick={e => e.stopPropagation()}>
        {sent ? (
          <div className="invite-success">
            <div className="invite-success-icon"><Icon name="check" size={28} /></div>
            <div className="invite-success-title">Invitation created</div>
            <div className="invite-success-sub">{warning || "The team member can now join the workspace from the email invite."}</div>
          </div>
        ) : (
          <>
            <div className="invite-head">
              <div>
                <div className="invite-title">Invite a team member</div>
                <div className="invite-sub">Add first name, last name, email and role before sending the invite.</div>
              </div>
              <button className="invite-close" onClick={onClose}><Icon name="x" size={16} /></button>
            </div>

            <div className="invite-body">
              <div className="auth-name-grid">
                <label className="auth-field">
                  <span className="auth-field-label">First name</span>
                  <div className="auth-input-wrap">
                    <Icon name="users" size={13} className="auth-input-icon" />
                    <input value={firstName} onChange={e => setFirstName(e.target.value)} placeholder="Jane" />
                  </div>
                </label>
                <label className="auth-field">
                  <span className="auth-field-label">Last name</span>
                  <div className="auth-input-wrap">
                    <Icon name="users" size={13} className="auth-input-icon" />
                    <input value={lastName} onChange={e => setLastName(e.target.value)} placeholder="Doe" />
                  </div>
                </label>
              </div>

              <label className="invite-label">Work email</label>
              <div className="invite-emails-wrap">
                <input
                  type="email"
                  placeholder="name@company.com"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                />
              </div>

              {(error || warning) && (
                <div className={`invite-error${warning && !error ? " invite-error--warn" : ""}`}>
                  <Icon name={warning && !error ? "info" : "warn"} size={13} />
                  {error || warning}
                </div>
              )}

              <label className="invite-label" style={{ marginTop: 16 }}>Assign role</label>
              <div className="invite-role-grid">
                {assignableRoles.map(r => (
                  <button
                    key={r.id}
                    className={`invite-role-card${role === r.id ? " is-selected" : ""}`}
                    onClick={() => setRole(r.id)}
                  >
                    <div className="invite-role-top">
                      <span className={`role-dot role-${r.tone}`} />
                      <span className="invite-role-name">{r.label}</span>
                      {role === r.id && <Icon name="check" size={14} className="invite-role-check" />}
                    </div>
                    <div className="invite-role-desc">{r.desc}</div>
                  </button>
                ))}
              </div>
            </div>

            <div className="invite-foot">
              <Button variant="ghost" onClick={onClose}>Cancel</Button>
              <Button variant="primary" iconLeft="mail" onClick={handleSend}>
                {sending ? "Sending…" : "Send invitation"}
              </Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const MemberEditorModal = ({ open, member, onClose }) => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [role, setRole] = useState("viewer");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!open || !member) return;
    setFirstName(member.firstName || "");
    setLastName(member.lastName || "");
    setRole(member.role || "viewer");
    setSaving(false);
    setError("");
  }, [open, member]);

  if (!open || !member) return null;

  const canEditRole = (member.kind === "member" || member.kind === "legacy-invite") && member.role !== "owner";
  const isInviteLike = member.kind === "invite" || member.kind === "legacy-invite";

  const save = async () => {
    setSaving(true);
    setError("");
    const nextDisplayName = buildDisplayName({ firstName, lastName, email: member.email });
    const updates = {
      firstName: firstName.trim(),
      lastName: lastName.trim(),
      displayName: nextDisplayName,
      avatarInitials: buildAvatarInitials({ firstName, lastName, displayName: nextDisplayName, email: member.email })
    };
    if (canEditRole) updates.role = role;

    try {
      if (member.kind === "invite") {
        await fbDb.collection("workspaces").doc(member.workspaceId).collection("invites").doc(member.recordId).update(updates);
      } else if (member.kind === "legacy-invite") {
        await fbDb.collection("users").doc(member.recordId).update(updates);
      } else {
        await fbDb.collection("users").doc(member.recordId).update(updates);
      }
      onClose();
    } catch (err) {
      setError("Unable to save the member right now.");
      setSaving(false);
    }
  };

  return (
    <div className="invite-overlay" onClick={onClose}>
      <div className="invite-modal" onClick={e => e.stopPropagation()}>
        <div className="invite-head">
          <div>
            <div className="invite-title">{isInviteLike ? "Edit pending invite" : "Edit team member"}</div>
            <div className="invite-sub">Owners can update names, and existing member roles stay owner-managed only.</div>
          </div>
          <button className="invite-close" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>

        <div className="invite-body">
          <div className="auth-name-grid">
            <label className="auth-field">
              <span className="auth-field-label">First name</span>
              <div className="auth-input-wrap">
                <Icon name="users" size={13} className="auth-input-icon" />
                <input value={firstName} onChange={e => setFirstName(e.target.value)} />
              </div>
            </label>
            <label className="auth-field">
              <span className="auth-field-label">Last name</span>
              <div className="auth-input-wrap">
                <Icon name="users" size={13} className="auth-input-icon" />
                <input value={lastName} onChange={e => setLastName(e.target.value)} />
              </div>
            </label>
          </div>

          <label className="invite-label">Email</label>
          <div className="invite-emails-wrap invite-emails-wrap--readonly">
            <input value={member.email || ""} readOnly />
          </div>

          {canEditRole && (
            <>
              <label className="invite-label" style={{ marginTop: 16 }}>Role</label>
              <div className="invite-role-grid">
                {ROLES.filter(r => r.id !== "owner").map(r => (
                  <button
                    key={r.id}
                    className={`invite-role-card${role === r.id ? " is-selected" : ""}`}
                    onClick={() => setRole(r.id)}
                  >
                    <div className="invite-role-top">
                      <span className={`role-dot role-${r.tone}`} />
                      <span className="invite-role-name">{r.label}</span>
                      {role === r.id && <Icon name="check" size={14} className="invite-role-check" />}
                    </div>
                    <div className="invite-role-desc">{r.desc}</div>
                  </button>
                ))}
              </div>
            </>
          )}

          {error && (
            <div className="invite-error">
              <Icon name="warn" size={13} />
              {error}
            </div>
          )}
        </div>

        <div className="invite-foot">
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          <Button variant="primary" iconLeft="check" onClick={save}>
            {saving ? "Saving…" : "Save changes"}
          </Button>
        </div>
      </div>
    </div>
  );
};

const MemberActions = ({ member, profile, currentUserId, onClose, onEdit }) => {
  const menuRef = useRef(null);
  const [showRoleMenu, setShowRoleMenu] = useState(false);
  const [confirmRemove, setConfirmRemove] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [onClose]);

  const isSelf = member.recordId === currentUserId;
  const isOwnerMember = member.kind === "member" && member.role === "owner";
  const isInviteLike = member.kind === "invite" || member.kind === "legacy-invite";
  const canEditMember = hasPermission(profile, "editMemberProfile") && !isSelf && !isOwnerMember;
  const canUpdateRole = hasPermission(profile, "updateRoles") && member.kind === "member" && !isSelf && !isOwnerMember;
  const canRemoveMember = hasPermission(profile, "removeMember") && !isSelf && !isOwnerMember;
  const canResendInvite = isInviteLike && hasPermission(profile, "resendInvites");

  const changeRole = async (newRole) => {
    const nextDisplayName = buildDisplayName({
      firstName: member.firstName,
      lastName: member.lastName,
      email: member.email,
      fallbackDisplayName: member.displayName
    });
    await fbDb.collection("users").doc(member.recordId).update({
      role: newRole,
      displayName: nextDisplayName
    });
    setShowRoleMenu(false);
    onClose();
  };

  const toggleStatus = async () => {
    const newStatus = member.status === "disabled" ? "active" : "disabled";
    await fbDb.collection("users").doc(member.recordId).update({ status: newStatus });
    onClose();
  };

  const resendInvite = async () => {
    const result = await sendWorkspaceInvitation({
      workspaceId: member.workspaceId,
      workspaceName: member.workspaceName || "Workspace",
      email: member.email,
      role: member.role,
      firstName: member.firstName,
      lastName: member.lastName,
      invitedByUid: fbAuth.currentUser?.uid || null,
      invitedByName: profile?.displayName || null
    });
    if (member.kind === "legacy-invite") {
      await fbDb.collection("users").doc(member.recordId).delete();
    }
    if (!result.emailQueued) {
      alert("Invite refreshed, but the email was not sent. Configure Firebase Trigger Email to deliver branded invites.");
    }
    onClose();
  };

  const removeMember = async () => {
    if (member.kind === "invite") {
      await fbDb.collection("workspaces").doc(member.workspaceId).collection("invites").doc(member.recordId).delete();
    } else {
      await fbDb.collection("users").doc(member.recordId).delete();
    }
    onClose();
  };

  const assignableRoles = ROLES.filter(r => r.id !== "owner" && r.id !== member.role);

  return (
    <div className="member-menu" ref={menuRef} onClick={e => e.stopPropagation()}>
      {showRoleMenu ? (
        <>
          <button className="mm-item mm-back" onClick={() => setShowRoleMenu(false)}>
            <Icon name="chevronLeft" size={13} /> Change role
          </button>
          <div className="mm-sep" />
          {assignableRoles.map(r => (
            <button key={r.id} className="mm-item" onClick={() => changeRole(r.id)}>
              <span className={`role-dot role-${r.tone}`} />
              <span>{r.label}</span>
            </button>
          ))}
        </>
      ) : confirmRemove ? (
        <>
          <div className="mm-confirm-text">Remove {member.displayName || member.email}?</div>
          <div className="mm-confirm-actions">
            <button className="mm-btn mm-btn--cancel" onClick={() => setConfirmRemove(false)}>Cancel</button>
            <button className="mm-btn mm-btn--danger" onClick={removeMember}>Remove</button>
          </div>
        </>
      ) : (
        <>
          {canEditMember && (
            <button className="mm-item" onClick={() => { onEdit(member); onClose(); }}>
              <Icon name="users" size={14} />
              <span>Edit member</span>
            </button>
          )}
          {canUpdateRole && (
            <button className="mm-item" onClick={() => setShowRoleMenu(true)}>
              <Icon name="shield" size={14} />
              <span>Change role</span>
              <Icon name="chevronRight" size={12} className="mm-arrow" />
            </button>
          )}
          {member.kind === "member" && canEditMember && (
            <button className="mm-item" onClick={toggleStatus}>
              <Icon name={member.status === "disabled" ? "check" : "x"} size={14} />
              <span>{member.status === "disabled" ? "Enable member" : "Disable member"}</span>
            </button>
          )}
          {canResendInvite && (
            <button className="mm-item" onClick={resendInvite}>
              <Icon name="mail" size={14} />
              <span>Resend invite</span>
            </button>
          )}
          {(canEditMember || canUpdateRole || canRemoveMember || canResendInvite) && <div className="mm-sep" />}
          {canRemoveMember && (
            <button className="mm-item mm-item--danger" onClick={() => setConfirmRemove(true)}>
              <Icon name="trash" size={14} />
              <span>{isInviteLike ? "Delete invite" : "Remove from workspace"}</span>
            </button>
          )}
          {!canEditMember && !canUpdateRole && !canRemoveMember && !canResendInvite && (
            <div className="mm-item mm-item--disabled">
              <Icon name="lock" size={14} />
              <span>{isSelf ? "You can't edit yourself here" : "No permission"}</span>
            </div>
          )}
        </>
      )}
    </div>
  );
};

const FilterDropdown = ({ options, value, onChange, onClose, label }) => {
  const ref = useRef(null);

  useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) onClose();
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [onClose]);

  return (
    <div className="filter-drop" ref={ref}>
      <div className="filter-drop-label">{label}</div>
      {options.map(o => (
        <button
          key={o.id}
          className={`filter-drop-item${value === o.id ? " is-active" : ""}`}
          onClick={() => { onChange(o.id); onClose(); }}
        >
          {o.dot && <span className={`role-dot ${o.dot}`} />}
          <span>{o.label}</span>
          <span className="filter-drop-count">{o.count ?? ""}</span>
          {value === o.id && <Icon name="check" size={12} className="filter-drop-check" />}
        </button>
      ))}
    </div>
  );
};

const exportCSV = (members) => {
  const headers = ["Type", "First name", "Last name", "Name", "Email", "Role", "Status", "Last Active", "Joined"];
  const rows = members.map(m => [
    m.kind,
    m.firstName || "",
    m.lastName || "",
    m.displayName || "",
    m.email || "",
    m.role || "",
    m.status || "active",
    m.lastActiveAt ? (m.lastActiveAt.toDate ? m.lastActiveAt.toDate().toISOString() : new Date(m.lastActiveAt).toISOString()) : "",
    m.joinedAt ? (m.joinedAt.toDate ? m.joinedAt.toDate().toISOString() : new Date(m.joinedAt).toISOString()) : ""
  ]);
  const escape = (v) => `"${String(v).replace(/"/g, '""')}"`;
  const csv = [headers.map(escape).join(","), ...rows.map(r => r.map(escape).join(","))].join("\n");
  const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8;" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `team-members-${new Date().toISOString().slice(0, 10)}.csv`;
  a.click();
  URL.revokeObjectURL(url);
};

const TeamView = ({ profile }) => {
  const [users, setUsers] = useState([]);
  const [invites, setInvites] = useState([]);
  const [workspace, setWorkspace] = useState(null);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState("all");
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState(null);
  const [inviteOpen, setInviteOpen] = useState(false);
  const [editorMember, setEditorMember] = useState(null);
  const [statusFilter, setStatusFilter] = useState("all");
  const [activityFilter, setActivityFilter] = useState("all");
  const [openMenu, setOpenMenu] = useState(null);
  const [statusDropOpen, setStatusDropOpen] = useState(false);
  const [activityDropOpen, setActivityDropOpen] = useState(false);

  useEffect(() => {
    if (!profile?.workspaceId) return;
    const wid = profile.workspaceId;
    let usersReady = false;
    let invitesReady = false;

    const finishLoading = () => {
      if (usersReady && invitesReady) setLoading(false);
    };

    fbDb.collection("workspaces").doc(wid).get().then(snap => {
      if (snap.exists) setWorkspace({ id: snap.id, ...snap.data() });
    });

    const unsubUsers = fbDb.collection("users")
      .where("workspaceId", "==", wid)
      .onSnapshot(snap => {
        usersReady = true;
        setUsers(snap.docs.map(d => ({ recordId: d.id, ...d.data(), kind: "member" })));
        finishLoading();
      });

    const unsubInvites = fbDb.collection("workspaces").doc(wid).collection("invites")
      .onSnapshot(snap => {
        invitesReady = true;
        setInvites(snap.docs.map(d => ({
          recordId: d.id,
          workspaceId: wid,
          ...d.data(),
          kind: "invite",
          status: "invited",
          lastActiveAt: null
        })));
        finishLoading();
      });

    return () => {
      unsubUsers();
      unsubInvites();
    };
  }, [profile?.workspaceId]);

  const members = useMemo(() => (
    [...users, ...invites]
      .map(item => {
        const isLegacyInvite = item.kind === "member" && item.status === "invited" && !item.lastActiveAt;
        return {
          ...item,
          kind: isLegacyInvite ? "legacy-invite" : item.kind,
          id: (isLegacyInvite || item.kind === "invite") ? `invite:${item.recordId}` : item.recordId,
          joinedAt: item.joinedAt || item.invitedAt || item.lastSentAt || null,
          workspaceName: item.workspaceName || workspace?.name || "Workspace",
          displayName: item.displayName || buildDisplayName({
            firstName: item.firstName,
            lastName: item.lastName,
            email: item.email
          }),
          avatarInitials: item.avatarInitials || buildAvatarInitials({
            firstName: item.firstName,
            lastName: item.lastName,
            displayName: item.displayName,
            email: item.email
          })
        };
      })
      .sort((a, b) => {
        const roleDiff = (roleOrder[a.role] ?? 9) - (roleOrder[b.role] ?? 9);
        if (roleDiff !== 0) return roleDiff;
        const aInviteLike = a.kind === "invite" || a.kind === "legacy-invite";
        const bInviteLike = b.kind === "invite" || b.kind === "legacy-invite";
        if (aInviteLike !== bInviteLike) return aInviteLike ? 1 : -1;
        return (a.displayName || "").localeCompare(b.displayName || "");
      })
  ), [users, invites, workspace?.name]);

  const roleCounts = {};
  members.forEach(m => {
    const r = m.role?.toLowerCase();
    roleCounts[r] = (roleCounts[r] || 0) + 1;
  });

  const statusCounts = { active: 0, invited: 0, disabled: 0 };
  members.forEach(m => {
    const s = m.status || "active";
    statusCounts[s] = (statusCounts[s] || 0) + 1;
  });

  const pendingCount = members.filter(m => m.kind === "invite" || m.kind === "legacy-invite").length;
  const twoFACount = users.filter(m => m.twoFA).length;

  const filtered = members.filter(u => {
    if (filter !== "all" && u.role?.toLowerCase() !== filter) return false;
    if (statusFilter !== "all" && (u.status || "active") !== statusFilter) return false;
    if (activityFilter !== "all") {
      const d = daysSince(u.lastActiveAt);
      if (activityFilter === "today" && d > 0) return false;
      if (activityFilter === "week" && d > 7) return false;
      if (activityFilter === "month" && d > 30) return false;
      if (activityFilter === "inactive" && d < 30) return false;
    }
    if (query) {
      const q = query.toLowerCase();
      const haystack = [u.displayName, u.email, u.firstName, u.lastName].filter(Boolean).join(" ").toLowerCase();
      if (!haystack.includes(q)) return false;
    }
    return true;
  });

  const existingEmails = members.map(m => normalizeEmail(m.email));
  const currentUserId = fbAuth.currentUser?.uid;
  const canInvite = hasPermission(profile, "inviteMembers");

  const statusOptions = [
    { id: "all", label: "All statuses", count: members.length },
    { id: "active", label: "Active", dot: "team-status--active", count: statusCounts.active },
    { id: "invited", label: "Invited", dot: "team-status--invited", count: statusCounts.invited },
    { id: "disabled", label: "Disabled", dot: "team-status--disabled", count: statusCounts.disabled }
  ];

  const activityOptions = [
    { id: "all", label: "Any time" },
    { id: "today", label: "Today" },
    { id: "week", label: "This week" },
    { id: "month", label: "This month" },
    { id: "inactive", label: "Inactive (30+ days)" }
  ];

  const activeFilterCount = (statusFilter !== "all" ? 1 : 0) + (activityFilter !== "all" ? 1 : 0);

  if (loading) {
    return (
      <div className="team" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
        <span className="auth-spinner" />
      </div>
    );
  }

  return (
    <div className="team">
      <aside className="team-rail">
        <div className="team-rail-head">
          <div className="team-rail-eyebrow">Team & Access</div>
          <div className="team-rail-title">Members</div>
          <div className="team-rail-sub">{members.length} {members.length === 1 ? "member" : "members"} · {workspace?.plan ? workspace.plan.charAt(0).toUpperCase() + workspace.plan.slice(1) : "—"} plan</div>
        </div>

        <div className="team-rail-section">Roles</div>
        <div className="team-roles">
          <button className={`team-role-row${filter === "all" ? " is-active" : ""}`} onClick={() => setFilter("all")}>
            <Icon name="users" size={14} className="trr-icon" />
            <span className="trr-label">All members</span>
            <span className="trr-count">{members.length}</span>
          </button>
          {ROLES.map(r => (
            <button key={r.id} className={`team-role-row${filter === r.id ? " is-active" : ""}`} onClick={() => setFilter(r.id)}>
              <span className={`role-dot role-${r.tone}`} />
              <span className="trr-label">{r.label}</span>
              <span className="trr-count">{roleCounts[r.id] || 0}</span>
            </button>
          ))}
        </div>

        <div className="team-rail-section">Pending invites</div>
        <div className="team-rail-stat">
          <div className="trs-num">{pendingCount}</div>
          <div className="trs-meta">Awaiting acceptance</div>
        </div>

        <div className="team-rail-section">Security</div>
        <div className="team-rail-list">
          <div className="team-rail-bullet">
            <Icon name="shield" size={13} />
            <div>
              <div className="trb-t">Role updates</div>
              <div className="trb-s">Only owners can change existing member roles</div>
            </div>
            <span className="pill pill--good">Owner</span>
          </div>
          <div className="team-rail-bullet">
            <Icon name="lock" size={13} />
            <div>
              <div className="trb-t">2FA</div>
              <div className="trb-s">{twoFACount} of {users.length} enrolled</div>
            </div>
            <span className={`pill pill--${twoFACount === users.length && users.length > 0 ? "good" : twoFACount > 0 ? "warn" : "neutral"}`}>
              {twoFACount === users.length && users.length > 0 ? "All" : twoFACount > 0 ? "Partial" : "Off"}
            </span>
          </div>
        </div>
      </aside>

      <section className="team-main">
        <header className="team-head">
          <div className="team-head-titles">
            <div className="dash-breadcrumb">
              <b>Team & permissions</b>
            </div>
            <div className="dash-h1">
              {filter === "all" ? "All members" : `${ROLES.find(r => r.id === filter)?.label}s`}
              <span className="dash-h1-count">{filtered.length} {filtered.length === 1 ? "member" : "members"}</span>
            </div>
          </div>
          <div className="dash-actions">
            <Button variant="ghost" iconLeft="download" onClick={() => exportCSV(filtered)}>Export CSV</Button>
            {canInvite && (
              <Button variant="primary" iconLeft="plus" onClick={() => setInviteOpen(true)}>Invite member</Button>
            )}
          </div>
        </header>

        <div className="dash-toolbar">
          <div className="dash-search">
            <Icon name="search" size={13} />
            <input placeholder="Search by name or email…" value={query} onChange={e => setQuery(e.target.value)} />
            {query && (
              <button className="dash-search-clear" onClick={() => setQuery("")}><Icon name="x" size={11} /></button>
            )}
            {!query && <span className="kbd-hint">⌘F</span>}
          </div>
          <div style={{ position: "relative" }}>
            <button
              className={`filter-chip${statusFilter !== "all" ? " is-active" : ""}`}
              onClick={() => { setStatusDropOpen(o => !o); setActivityDropOpen(false); }}
            >
              <Icon name="chip" size={13} />
              {statusFilter !== "all" ? statusOptions.find(o => o.id === statusFilter)?.label : "Status"}
              <Icon name="chevronDown" size={11} />
            </button>
            {statusDropOpen && (
              <FilterDropdown
                options={statusOptions}
                value={statusFilter}
                onChange={setStatusFilter}
                onClose={() => setStatusDropOpen(false)}
                label="Filter by status"
              />
            )}
          </div>
          <div style={{ position: "relative" }}>
            <button
              className={`filter-chip${activityFilter !== "all" ? " is-active" : ""}`}
              onClick={() => { setActivityDropOpen(o => !o); setStatusDropOpen(false); }}
            >
              <Icon name="history" size={13} />
              {activityFilter !== "all" ? activityOptions.find(o => o.id === activityFilter)?.label : "Last active"}
              <Icon name="chevronDown" size={11} />
            </button>
            {activityDropOpen && (
              <FilterDropdown
                options={activityOptions}
                value={activityFilter}
                onChange={setActivityFilter}
                onClose={() => setActivityDropOpen(false)}
                label="Filter by activity"
              />
            )}
          </div>
          {activeFilterCount > 0 && (
            <button className="filter-clear" onClick={() => { setStatusFilter("all"); setActivityFilter("all"); }}>
              <Icon name="x" size={11} />
              Clear filters
            </button>
          )}
          <div className="dash-toolbar-spacer" />
          <span className="team-bulk-hint">{filtered.length} matching</span>
        </div>

        <div className="dash-scroll">
          {filtered.length === 0 ? (
            <div className="team-empty">
              <Icon name="users" size={32} />
              <div className="team-empty-title">No members found</div>
              <div className="team-empty-sub">
                {query || statusFilter !== "all" || activityFilter !== "all"
                  ? "Try adjusting your search or filters."
                  : "Invite your first team member to get started."}
              </div>
              {!query && canInvite && (
                <Button variant="primary" iconLeft="plus" onClick={() => setInviteOpen(true)}>Invite member</Button>
              )}
            </div>
          ) : (
            <table className="team-table">
              <thead>
                <tr>
                  <th className="col-name" style={{ width: "32%" }}>Member</th>
                  <th style={{ width: "140px" }}>Role</th>
                  <th style={{ width: "120px" }}>Status</th>
                  <th style={{ width: "90px" }}>Type</th>
                  <th style={{ width: "140px" }}>Last active</th>
                  <th style={{ width: "120px" }}>Joined</th>
                  <th style={{ width: "60px" }} />
                </tr>
              </thead>
              <tbody>
                {filtered.map(u => (
                  <tr key={u.id} className={selected === u.id ? "is-selected" : ""} onClick={() => setSelected(u.id)}>
                    <td className="col-name">
                      <div className="team-member">
                        <div className="team-avatar" style={{ background: u.avatarColor || "#71717a" }}>{u.avatarInitials || "?"}</div>
                        <div className="team-member-meta">
                          <div className="tm-name">
                            {u.displayName}
                            {u.recordId === currentUserId && <span className="tm-you">You</span>}
                          </div>
                          <div className="tm-email">{u.email}</div>
                        </div>
                      </div>
                    </td>
                    <td><RoleBadge role={u.role || "viewer"} /></td>
                    <td>
                      <span className={`team-status team-status--${u.status || "active"}`}>
                        <span className="dot" />
                        {u.status === "active" ? "Active" : u.status === "invited" ? "Invited" : u.status === "disabled" ? "Disabled" : "Active"}
                      </span>
                    </td>
                    <td>
                      <span className={`team-2fa ${u.kind === "invite" || u.kind === "legacy-invite" ? "is-off" : "is-on"}`}>
                        <Icon name={u.kind === "invite" || u.kind === "legacy-invite" ? "mail" : "users"} size={11} />
                        {u.kind === "invite" || u.kind === "legacy-invite" ? "Invite" : "Member"}
                      </span>
                    </td>
                    <td><span className="modified">{timeAgo(u.lastActiveAt)}</span></td>
                    <td><span className="modified">{formatDate(u.joinedAt)}</span></td>
                    <td>
                      <div className="row-actions" style={{ position: "relative" }}>
                        <button title="More" onClick={e => { e.stopPropagation(); setOpenMenu(openMenu === u.id ? null : u.id); }}>
                          <Icon name="moreH" size={14} />
                        </button>
                        {openMenu === u.id && (
                          <MemberActions
                            member={u}
                            profile={profile}
                            currentUserId={currentUserId}
                            onClose={() => setOpenMenu(null)}
                            onEdit={setEditorMember}
                          />
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}

          <div className="perm-matrix">
            <div className="perm-head">
              <div className="perm-titles">
                <div className="perm-eyebrow">Reference</div>
                <div className="perm-h">Permissions by role</div>
                <div className="perm-sub">Role access is now wired in the app shell, the team actions menu, and the invitation flow. Existing role updates remain owner-only.</div>
              </div>
            </div>

            <div className="perm-grid">
              <div className="perm-row perm-row--head">
                <div className="perm-cell perm-cell--label">Capability</div>
                {ROLES.map(r => (
                  <div key={r.id} className="perm-cell perm-cell--role">
                    <span className={`role-dot role-${r.tone}`} />
                    <div className="perm-role-meta">
                      <div className="perm-role-name">{r.label}</div>
                      <div className="perm-role-count">{roleCounts[r.id] || 0} {(roleCounts[r.id] || 0) === 1 ? "person" : "people"}</div>
                    </div>
                  </div>
                ))}
              </div>
              {PERMISSIONS.map(p => (
                <div key={p.id} className="perm-row">
                  <div className="perm-cell perm-cell--label">{p.label}</div>
                  {ROLES.map(r => (
                    <div key={r.id} className="perm-cell perm-cell--val">
                      {p.roles[r.id]
                        ? <span className="perm-check"><Icon name="check" size={12} /></span>
                        : <span className="perm-dash">—</span>}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <InviteModal
        open={inviteOpen}
        onClose={() => setInviteOpen(false)}
        workspace={workspace || { id: profile?.workspaceId, name: "Workspace" }}
        profile={profile}
        existingEmails={existingEmails}
      />

      <MemberEditorModal
        open={Boolean(editorMember)}
        member={editorMember}
        onClose={() => setEditorMember(null)}
      />
    </div>
  );
};

Object.assign(window, { TeamView });